FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

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


<html>
<html>
<div id="gozinto_fix" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<div id="gozinto_small" 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_fix', {
var brd = JXG.JSXGraph.initBoard('gozinto_small', {
     boundingbox: [-1, 9, 13, -1],
     boundingbox: [-1, 9, 13, -1],
     axis: false,
     axis: false,
Zeile 35: Zeile 35:
});
});


// Rechteck mit schwarzer Schrift
// --- Funktion zur Rechteckerstellung (kleiner + fixiert) ---
function box(x1,y1,x2,y2,text){
function box(x1,y1,x2,y2,text){
     var poly = brd.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
     var poly = brd.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
Zeile 45: Zeile 45:
     });
     });
     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,fixed:true});
         {anchorX:'middle',anchorY:'middle',strokeColor:'black',fontSize:13,fixed:true});
     return {x1:x1,y1:y1,x2:x2,y2:y2};
     return {x1:x1,y1:y1,x2:x2,y2:y2};
}
}


// Rechtecke (Einzelteile oben, Baugruppen unten)
// --- Rechtecke ---
var E1=box(0,6,1.5,7,'E1');
// Kleinere Rechtecke: Breite = 1, Höhe = 0.6
var E2=box(2,6,3.5,7,'E2');
var h = 0.6, w = 1.0;
var E3=box(4,6,5.5,7,'E3');
var E4=box(6,6,7.5,7,'E4');


var B1=box(0,2,1.5,3,'B1');
// Einzelteile (oben)
var B2=box(2,2,3.5,3,'B2');
var E1=box(0,6, w,6+h,'E1');
var B3=box(4,2,5.5,3,'B3');
var E2=box(2,6, 2+w,6+h,'E2');
var B4=box(6,2,7.5,3,'B4');
var E3=box(4,6, 4+w,6+h,'E3');
var B5=box(8,2,9.5,3,'B5');
var E4=box(6,6, 6+w,6+h,'E4');


// Funktion: exakte Kante von Rechteckrand zu Rechteckrand
// Bauteile (unten, leicht versetzt dazwischen)
var B1=box(0.5,2, 0.5+w,2+h,'B1');
var B2=box(2.5,2, 2.5+w,2+h,'B2');
var B3=box(4.5,2, 4.5+w,2+h,'B3');
var B4=box(6.5,2, 6.5+w,2+h,'B4');
var B5=box(8.5,2, 8.5+w,2+h,'B5');
 
// --- Kanten (exakt an Rechteckrändern) ---
function edge(fromRect,toRect,label,offset){
function edge(fromRect,toRect,label,offset){
     // Start: Mitte der Unterkante des Einzelteils
     // Start = Mitte Unterkante des Einzelteils
     var fx=(fromRect.x1+fromRect.x2)/2;
     var fx=(fromRect.x1+fromRect.x2)/2;
     var fy=fromRect.y1;
     var fy=fromRect.y1;
     // Ende: Mitte der Oberkante des Bauteils
     // Ende = Mitte Oberkante des Bauteils
     var tx=(toRect.x1+toRect.x2)/2;
     var tx=(toRect.x1+toRect.x2)/2;
     var ty=toRect.y2;
     var ty=toRect.y2;
    // Richtungsvektor
     var dx=tx-fx, dy=ty-fy;
     var dx=tx-fx, dy=ty-fy;
     var len=Math.sqrt(dx*dx+dy*dy);
     var len=Math.sqrt(dx*dx+dy*dy);
     var ux=dx/len, uy=dy/len;
     var ux=dx/len, uy=dy/len;
    // Senkrecht-Versatz
     var px=-uy, py=ux;
     var px=-uy, py=ux;
     fx+=px*offset; fy+=py*offset;
     fx+=px*offset; fy+=py*offset;
     tx+=px*offset; ty+=py*offset;
     tx+=px*offset; ty+=py*offset;
    // Randkorrektur: Linie endet genau an Rechtecksgrenzen
    var fromEdgeY=fromRect.y1; // Unterkante
    var toEdgeY=toRect.y2;    // Oberkante
    var startY=fromEdgeY;
    var endY=toEdgeY;
    // Start- und Endpunkte korrigieren: nicht in Rechteck reinzeichnen
    var yShiftStart=0.05; // optischer Ausgleich
    var yShiftEnd=-0.05;
    var start=[fx, startY+yShiftStart];
    var end=[tx, endY+yShiftEnd];


     // Mittelpunkt für Kreis
     var yShiftStart=0.03, yShiftEnd=-0.03;
    var start=[fx, fy+yShiftStart];
    var end=[tx, ty+yShiftEnd];
 
     var midX=(start[0]+end[0])/2;
     var midX=(start[0]+end[0])/2;
     var midY=(start[1]+end[1])/2;
     var midY=(start[1]+end[1])/2;
     var gap=0.3;
     var gap=0.25;
     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];
Zeile 104: Zeile 100:
         strokeColor:'#000',strokeWidth:1.5,fixed:true
         strokeColor:'#000',strokeWidth:1.5,fixed:true
     });
     });
     // Kreis mit Beschriftung
     // Kreis + Beschriftung
     brd.create('circle',[[midX,midY],0.2],{
     brd.create('circle',[[midX,midY],0.18],{
         fillColor:'white',strokeColor:'black',fixed:true
         fillColor:'white',strokeColor:'black',fixed:true
     });
     });
     brd.create('text',[midX,midY,label],
     brd.create('text',[midX,midY,label],
         {anchorX:'middle',anchorY:'middle',fontSize:11,fixed:true});
         {anchorX:'middle',anchorY:'middle',fontSize:10,fixed:true});
}
}


// --- Kanten (exakt an Rechteckrändern, fixiert) ---
// --- Kanten exakt verbunden und fixiert ---
 
// B1: E1, E2
// B1: E1,E2
edge(E1, B1, '2', -0.12);
edge(E1, B1, '2', -0.15);
edge(E2, B1, '1', 0.12);
edge(E2, B1, '1', 0.15);


// B2: E1,E2
// B2: E1, E2
edge(E1, B2, '2', -0.15);
edge(E1, B2, '2', -0.12);
edge(E2, B2, '1', 0.15);
edge(E2, B2, '1', 0.12);


// B3: E1,E2,E3
// B3: E1, E2, E3
edge(E1, B3, '1', -0.25);
edge(E1, B3, '1', -0.18);
edge(E2, B3, '1', 0);
edge(E2, B3, '1', 0);
edge(E3, B3, '1', 0.25);
edge(E3, B3, '1', 0.18);


// B4: E1,E3,E4
// B4: E1, E3, E4
edge(E1, B4, '2', -0.25);
edge(E1, B4, '2', -0.18);
edge(E3, B4, '1', 0);
edge(E3, B4, '1', 0);
edge(E4, B4, '1', 0.25);
edge(E4, B4, '1', 0.18);


// B5: E1,E4
// B5: E1, E4
edge(E1, B5, '1', -0.15);
edge(E1, B5, '1', -0.12);
edge(E4, B5, '2', 0.15);
edge(E4, B5, '2', 0.12);


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