FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

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


<html>
<html>
<div id="gozinto_neu" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<div id="gozinto_final" 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_neu', {
var brd = JXG.JSXGraph.initBoard('gozinto_final', {
     boundingbox: [-1, 9, 13, -1],
     boundingbox: [-1, 9, 13, -1],
     axis: false,
     axis: false,
Zeile 58: Zeile 58:
var B5=box(8,2,9.5,3,'B5');
var B5=box(8,2,9.5,3,'B5');


// Hilfsfunktion: Pfeil mit Kreisen und Lücke
// Funktion: Kante mit Kreis (Menge) und Pfeilspitze am Ziel
function edge(from,to,label){
function edge(from,to,label,offset){
     // Koordinatenpunkte (von und zu sind Arrays)
     // leicht versetzen (offset) für parallele Kanten
     var midX=(from[0]+to[0])/2;
     var dx=to[0]-from[0];
     var midY=(from[1]+to[1])/2;
     var dy=to[1]-from[1];
     var dirX=(to[0]-from[0]);
    var len=Math.sqrt(dx*dx+dy*dy);
     var dirY=(to[1]-from[1]);
    var ux=dx/len, uy=dy/len;
     var len=Math.sqrt(dirX*dirX+dirY*dirY);
    var px=-uy, py=ux; // senkrechter Einheitsvektor
     var ux=dirX/len, uy=dirY/len;
    // leicht seitlich verschieben
     var f=[from[0]+px*offset, from[1]+py*offset];
     var t=[to[0]+px*offset, to[1]+py*offset];
     var midX=(f[0]+t[0])/2;
     var midY=(f[1]+t[1])/2;
     var gap=0.3;
     var gap=0.3;
     var p1=[midX-ux*gap, midY-uy*gap];
     var p1=[midX-ux*gap, midY-uy*gap];
     var p2=[midX+ux*gap, midY+uy*gap];
     var p2=[midX+ux*gap, midY+uy*gap];
     // Liniensegmente
     // Linie bis zum Kreis (keine Spitze)
     brd.create('arrow',[from,p1],{strokeColor:'#000',strokeWidth:1.5});
     brd.create('line',[f,p1],{straightFirst:false,straightLast:false,strokeColor:'#000',strokeWidth:1.5});
     brd.create('arrow',[p2,to],{strokeColor:'#000',strokeWidth:1.5});
    // Linie nach dem Kreis bis zum Ziel (mit Spitze)
     // Kreis
     brd.create('arrow',[p2,t],{strokeColor:'#000',strokeWidth:1.5});
     brd.create('circle',[ [midX,midY],0.2 ],{fillColor:'white',strokeColor:'black'});
     // Kreis mit Beschriftung
     brd.create('circle',[[midX,midY],0.2],{fillColor:'white',strokeColor:'black'});
     brd.create('text',[midX,midY,label],
     brd.create('text',[midX,midY,label],
         {anchorX:'middle',anchorY:'middle',fontSize:11});
         {anchorX:'middle',anchorY:'middle',fontSize:11});
}
}


// Kanten – Start/Endpunkte an Rechteckrändern
// --- Kanten gemäß Definition ---


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


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


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


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


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


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