FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

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


<html>
<html>
<div id="gozinto1" style="width:90vw; max-width:700px; height:60vw; max-height:500px; margin-top:20px;"></div>
<div id="gozinto_neu" 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 brd1 = JXG.JSXGraph.initBoard('gozinto1', {
var brd = JXG.JSXGraph.initBoard('gozinto_neu', {
     boundingbox: [-1, 8, 10, -1],
     boundingbox: [-1, 9, 13, -1],
     axis: false,
     axis: false,
     showNavigation: false,
     showNavigation: false,
Zeile 35: Zeile 35:
});
});


// Rechteck mit Label innen
// Rechteck mit schwarzer Schrift
function box(x1,y1,x2,y2,text){
function box(x1,y1,x2,y2,text){
     var poly = brd1.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
     var poly = brd.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
         fillColor:'#3498db',fillOpacity:0.8,vertices:{visible:false},
         fillColor:'#3498db',fillOpacity:0.8,vertices:{visible:false},
         borders:{strokeColor:'#1f4e78',strokeWidth:2}
         borders:{strokeColor:'#1f4e78',strokeWidth:2}
     });
     });
     brd1.create('text',[(x1+x2)/2,(y1+y2)/2,text],
     brd.create('text',[(x1+x2)/2,(y1+y2)/2,text],
         {anchorX:'middle',anchorY:'middle',strokeColor:'white',fontSize:14});
         {anchorX:'middle',anchorY:'middle',strokeColor:'black',fontSize:14});
     return poly;
     return poly;
}
}


// Knoten
// Rechtecke (Einzelteile oben, Baugruppen unten)
var E1=box(0,6,1.5,7,'E1');
var E1=box(0,6,1.5,7,'E1');
var E2=box(2,6,3.5,7,'E2');
var E2=box(2,6,3.5,7,'E2');
Zeile 52: Zeile 52:
var E4=box(6,6,7.5,7,'E4');
var E4=box(6,6,7.5,7,'E4');


var B1=box(1,3.5,2.5,4.5,'B1');
var B1=box(0,2,1.5,3,'B1');
var B2=box(3,3.5,4.5,4.5,'B2');
var B2=box(2,2,3.5,3,'B2');
var B3=box(5,3.5,6.5,4.5,'B3');
var B3=box(4,2,5.5,3,'B3');
var B4=box(2,1,3.5,2,'B4');
var B4=box(6,2,7.5,3,'B4');
var B5=box(5,1,6.5,2,'B5');
var B5=box(8,2,9.5,3,'B5');


// Hilfsfunktion: Pfeil mit Mengen-Kreis
// Hilfsfunktion: Pfeil mit Kreisen und Lücke
function edge(from,to,label){
function edge(from,to,label){
    // Koordinatenpunkte (von und zu sind Arrays)
     var midX=(from[0]+to[0])/2;
     var midX=(from[0]+to[0])/2;
     var midY=(from[1]+to[1])/2;
     var midY=(from[1]+to[1])/2;
Zeile 66: Zeile 67:
     var len=Math.sqrt(dirX*dirX+dirY*dirY);
     var len=Math.sqrt(dirX*dirX+dirY*dirY);
     var ux=dirX/len, uy=dirY/len;
     var ux=dirX/len, uy=dirY/len;
     var gap=0.3; // Lücke an der Kreisposition
     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];
     brd1.create('arrow',[from,p1],{strokeColor:'#000',strokeWidth:1.5});
     // Liniensegmente
     brd1.create('arrow',[p2,to],{strokeColor:'#000',strokeWidth:1.5});
    brd.create('arrow',[from,p1],{strokeColor:'#000',strokeWidth:1.5});
     brd1.create('circle',[ [midX,midY],0.2 ],{fillColor:'white',strokeColor:'black'});
     brd.create('arrow',[p2,to],{strokeColor:'#000',strokeWidth:1.5});
     brd1.create('text',[midX,midY,label],{anchorX:'middle',anchorY:'middle',fontSize:11});
     // Kreis
    brd.create('circle',[ [midX,midY],0.2 ],{fillColor:'white',strokeColor:'black'});
     brd.create('text',[midX,midY,label],
        {anchorX:'middle',anchorY:'middle',fontSize:11});
}
}


// Verbindungen laut Aufgabe:
// Kanten – Start/Endpunkte an Rechteckrändern
edge([0.75,6],[1.75,4.5],'2'); // E1→B1
edge([2.75,6],[1.75,4.5],'1'); // E2→B1


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


edge([0.75,6],[5.75,4.5],'1'); // E1→B3
// B2: E1,E2
edge([2.75,6],[5.75,4.5],'1'); // E2→B3
edge([0.75,6],[2.75,3],'2'); // E1→B2
edge([4.75,6],[5.75,4.5],'1'); // E3→B3
edge([2.75,6],[2.75,3],'1'); // E2→B2


edge([0.75,6],[2.75,2],'2');   // E1→B4
// B3: E1,E2,E3
edge([4.75,6],[2.75,2],'1');   // E3→B4
edge([0.75,6],[4.75,3],'1'); // E1→B3
edge([6.75,6],[2.75,2],'1');   // E4→B4
edge([2.75,6],[4.75,3],'1'); // E2→B3
edge([4.75,6],[4.75,3],'1'); // E3→B3
 
// B4: E1,E3,E4
edge([0.75,6],[6.75,3],'2'); // E1→B4
edge([4.75,6],[6.75,3],'1'); // E3→B4
edge([6.75,6],[6.75,3],'1'); // E4→B4
 
// B5: E1,E4
edge([0.75,6],[8.75,3],'1'); // E1→B5
edge([6.75,6],[8.75,3],'2'); // E4→B5


edge([0.75,6],[5.75,2],'1');  // E1→B5
edge([6.75,6],[5.75,2],'2');  // E4→B5
</script>
</script>
</html>
</html>
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“