FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Zeile 25: Zeile 25:


<html>
<html>
<div id="gozinto_final" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<div id="gozinto_exakt" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script>
<script>
var brd = JXG.JSXGraph.initBoard('gozinto_final', {
var brd = JXG.JSXGraph.initBoard('gozinto_exakt', {
     boundingbox: [-1, 9, 13, -1],
     boundingbox: [-1, 9, 13, -1],
     axis: false,
     axis: false,
Zeile 43: Zeile 43:
     brd.create('text',[(x1+x2)/2,(y1+y2)/2,text],
     brd.create('text',[(x1+x2)/2,(y1+y2)/2,text],
         {anchorX:'middle',anchorY:'middle',strokeColor:'black',fontSize:14});
         {anchorX:'middle',anchorY:'middle',strokeColor:'black',fontSize:14});
     return poly;
     return {poly: poly, x1:x1, y1:y1, x2:x2, y2:y2};
}
}


Zeile 58: Zeile 58:
var B5=box(8,2,9.5,3,'B5');
var B5=box(8,2,9.5,3,'B5');


// Funktion: Kante mit Kreis (Menge) und Pfeilspitze am Ziel
// Funktion: exakte Kante von Rand zu Rand mit Kreis
function edge(from,to,label,offset){
function edge(fromRect, toRect, label, offset){
     // leicht versetzen (offset) für parallele Kanten
     // Startpunkt: Mitte der Unterkante des Einzelteils
     var dx=to[0]-from[0];
    var fx = (fromRect.x1 + fromRect.x2)/2;
     var dy=to[1]-from[1];
    var fy = fromRect.y1;
     var len=Math.sqrt(dx*dx+dy*dy);
    // Endpunkt: Mitte der Oberkante des Bauteils
     var ux=dx/len, uy=dy/len;
    var tx = (toRect.x1 + toRect.x2)/2;
     var px=-uy, py=ux; // senkrechter Einheitsvektor
     var ty = toRect.y2;
     // leicht seitlich verschieben
    // Richtung und senkrechter Offset
    var f=[from[0]+px*offset, from[1]+py*offset];
     var dx = tx - fx, dy = ty - fy;
     var t=[to[0]+px*offset, to[1]+py*offset];
     var len = Math.sqrt(dx*dx + dy*dy);
     var midX=(f[0]+t[0])/2;
     var ux = dx/len, uy = dy/len;
     var midY=(f[1]+t[1])/2;
     var px = -uy, py = ux;
     var gap=0.3;
     fx += px*offset; fy += py*offset;
     var p1=[midX-ux*gap, midY-uy*gap];
     tx += px*offset; ty += py*offset;
     var p2=[midX+ux*gap, midY+uy*gap];
 
    // Mittelpunkt für Kreis
     var midX = (fx + tx)/2;
     var midY = (fy + ty)/2;
     var gap = 0.3;
     var p1 = [midX - ux*gap, midY - uy*gap];
     var p2 = [midX + ux*gap, midY + uy*gap];
 
     // Linie bis zum Kreis (keine Spitze)
     // Linie bis zum Kreis (keine Spitze)
     brd.create('line',[f,p1],{straightFirst:false,straightLast:false,strokeColor:'#000',strokeWidth:1.5});
     brd.create('line', [[fx, fy], p1], {
     // Linie nach dem Kreis bis zum Ziel (mit Spitze)
        straightFirst: false, straightLast: false,
     brd.create('arrow',[p2,t],{strokeColor:'#000',strokeWidth:1.5});
        strokeColor: '#000', strokeWidth: 1.5
    });
     // Linie vom Kreis bis zum Ziel (mit Spitze)
     brd.create('arrow', [p2, [tx, ty]], {
        strokeColor: '#000', strokeWidth: 1.5
    });
     // Kreis mit Beschriftung
     // Kreis mit Beschriftung
     brd.create('circle',[[midX,midY],0.2],{fillColor:'white',strokeColor:'black'});
     brd.create('circle', [[midX, midY], 0.2], {
     brd.create('text',[midX,midY,label],
        fillColor: 'white', strokeColor: 'black'
         {anchorX:'middle',anchorY:'middle',fontSize:11});
    });
     brd.create('text', [midX, midY, label], {
         anchorX: 'middle', anchorY: 'middle', fontSize: 11
    });
}
}


// --- Kanten gemäß Definition ---
// --- Kanten exakt zwischen Rechteckrändern ---


// B1: E1,E2
// B1: E1,E2
edge([0.75,6],[0.75,3],'2',-0.15); // E1→B1
edge(E1, B1, '2', -0.15);
edge([2.75,6],[0.75,3],'1',0.15); // E2→B1
edge(E2, B1, '1', 0.15);


// B2: E1,E2
// B2: E1,E2
edge([0.75,6],[2.75,3],'2',-0.15); // E1→B2
edge(E1, B2, '2', -0.15);
edge([2.75,6],[2.75,3],'1',0.15); // E2→B2
edge(E2, B2, '1', 0.15);


// B3: E1,E2,E3
// B3: E1,E2,E3
edge([0.75,6],[4.75,3],'1',-0.25); // E1→B3
edge(E1, B3, '1', -0.25);
edge([2.75,6],[4.75,3],'1',0);     // E2→B3
edge(E2, B3, '1', 0);
edge([4.75,6],[4.75,3],'1',0.25); // E3→B3
edge(E3, B3, '1', 0.25);


// B4: E1,E3,E4
// B4: E1,E3,E4
edge([0.75,6],[6.75,3],'2',-0.25); // E1→B4
edge(E1, B4, '2', -0.25);
edge([4.75,6],[6.75,3],'1',0);     // E3→B4
edge(E3, B4, '1', 0);
edge([6.75,6],[6.75,3],'1',0.25); // E4→B4
edge(E4, B4, '1', 0.25);


// B5: E1,E4
// B5: E1,E4
edge([0.75,6],[8.75,3],'1',-0.15); // E1→B5
edge(E1, B5, '1', -0.15);
edge([6.75,6],[8.75,3],'2',0.15); // E4→B5
edge(E4, B5, '2', 0.15);


</script>
</script>
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“