FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Flbkwikiadmin (Diskussion | Beiträge)
Bürokraten, Oberflächenadministratoren, Administratoren
2.195 Bearbeitungen
VisuellWikitext
Zeile 27: Zeile 27:
<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_small', {
var brd = JXG.JSXGraph.initBoard('gozinto', {
     boundingbox: [-1, 9, 13, -1],
     boundingbox: [-1, 10, 15, -1],
     axis: false,
     axis: false,
     showNavigation: false,
     showNavigation: false
    showCopyright: false
});
});


// --- Funktion zur Rechteckerstellung (kleiner + fixiert) ---
// -------------------------------------------------------------
function box(x1,y1,x2,y2,text){
// Hilfsfunktion: Rechteck als Polygon aus 4 Punkten erzeugen
     var poly = brd.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
// -------------------------------------------------------------
function createRect(x,y,w,h,labelText) {
     let p1 = brd.create('point', [x, y],      {visible:false, fixed:false});
    let p2 = brd.create('point', [x+w, y],    {visible:false, fixed:false});
    let p3 = brd.create('point', [x+w, y-h],  {visible:false, fixed:false});
    let p4 = brd.create('point', [x, y-h],    {visible:false, fixed:false});
 
    let poly = brd.create('polygon', [p1,p2,p3,p4], {
         fillColor:'#3498db',
         fillColor:'#3498db',
         fillOpacity:0.85,
         fillOpacity:0.8,
         vertices:{visible:false},
         borders:{strokeWidth:2, strokeColor:'#1f4e78'},
        borders:{strokeColor:'#1f4e78',strokeWidth:2},
         hasInnerPoints:true
         fixed:true
     });
     });
     brd.create('text',[(x1+x2)/2,(y1+y2)/2,text],
 
         {anchorX:'middle',anchorY:'middle',strokeColor:'black',fontSize:13,fixed:true});
     let label = brd.create('text',
     return {x1:x1,y1:y1,x2:x2,y2:y2};
        [ ()=>(p1.X()+p3.X())/2,
          ()=>(p1.Y()+p3.Y())/2,
          labelText ],
         {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14}
    );
 
     return {p1:p1,p2:p2,p3:p3,p4:p4,centerX:()=> (p1.X()+p3.X())/2, centerY:()=> (p1.Y()+p3.Y())/2};
}
}


// --- Rechtecke ---
// -------------------------------------------------------------
// Kleinere Rechtecke: Breite = 1, Höhe = 0.6
// Hilfsfunktion: Kreis-Knoten mit Punkt + Beschriftung
var h = 0.6, w = 1.0;
// -------------------------------------------------------------
function createCircleNode(x,y,labelText){
    let p = brd.create('point', [x,y], {visible:false});
    let c = brd.create('circle', [p, 0.35], {
        strokeColor:'black',
        fillColor:'white',
        fillOpacity:1
    });


// Einzelteile (oben)
    let t = brd.create('text',[()=>p.X(), ()=>p.Y(), labelText],
var E1=box(0,6, w,6+h,'E1');
        {anchorX:'middle', anchorY:'middle', fontSize:12, strokeColor:'black'}
var E2=box(2,6, 2+w,6+h,'E2');
    );
var E3=box(4,6, 4+w,6+h,'E3');
var E4=box(6,6, 6+w,6+h,'E4');


// Bauteile (unten, leicht versetzt dazwischen)
    return p;
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){
// Linien erstellen, die immer verbunden bleiben
     // Start = Mitte Unterkante des Einzelteils
// -------------------------------------------------------------
    var fx=(fromRect.x1+fromRect.x2)/2;
function connect(A, B, arrow){
    var fy=fromRect.y1;
     if(arrow){
    // Ende = Mitte Oberkante des Bauteils
        return brd.create('arrow', [A, B], {strokeWidth:2});
    var tx=(toRect.x1+toRect.x2)/2;
     }
     var ty=toRect.y2;
     return brd.create('line', [A, B], {
     var dx=tx-fx, dy=ty-fy;
        straightFirst:false, straightLast:false, strokeWidth:2
    var len=Math.sqrt(dx*dx+dy*dy);
     });
    var ux=dx/len, uy=dy/len;
}
    var px=-uy, py=ux;
     fx+=px*offset; fy+=py*offset;
    tx+=px*offset; ty+=py*offset;


    var yShiftStart=0.03, yShiftEnd=-0.03;
// -------------------------------------------------------------
    var start=[fx, fy+yShiftStart];
// Rechtecke für EINZELTEILE (oben)
    var end=[tx, ty+yShiftEnd];
// -------------------------------------------------------------
let E1 = createRect(0,8,2,1,'E1');
let E2 = createRect(3,8,2,1,'E2');
let E3 = createRect(6,8,2,1,'E3');
let E4 = createRect(9,8,2,1,'E4');


    var midX=(start[0]+end[0])/2;
// -------------------------------------------------------------
    var midY=(start[1]+end[1])/2;
// Rechtecke für BAUTEILE (unten)
    var gap=0.25;
// -------------------------------------------------------------
    var p1=[midX-ux*gap, midY-uy*gap];
let B1 = createRect(0.5,3,2,1,'B1');
    var p2=[midX+ux*gap, midY+uy*gap];
let B2 = createRect(3.5,3,2,1,'B2');
let B3 = createRect(6.5,3,2,1,'B3');
let B4 = createRect(9.5,3,2,1,'B4');
let B5 = createRect(12.5,3,2,1,'B5');


    // Linie bis Kreis (keine Spitze)
// -------------------------------------------------------------
    brd.create('line',[start,p1],{
// Beispielkanten (wie von dir definiert)
        straightFirst:false,straightLast:false,
// Struktur:  E → Kreis → B
        strokeColor:'#000',strokeWidth:1.5,fixed:true
// -------------------------------------------------------------
     });
 
     // Linie vom Kreis bis zum Ziel (mit Spitze)
function makeConnection(E, B, amount, yMid){
    brd.create('arrow',[p2,end],{
    let cx = ()=> (E.centerX() + B.centerX())/2;
        strokeColor:'#000',strokeWidth:1.5,fixed:true
     let cy = yMid;
    });
 
    // Kreis + Beschriftung
     let circlePoint = createCircleNode( cx(), cy, amount );
     brd.create('circle',[[midX,midY],0.18],{
 
        fillColor:'white',strokeColor:'black',fixed:true
     connect( [()=>E.centerX(), ()=>E.centerY()-0.5], circlePoint, false );
    });
     connect( circlePoint, [()=>B.centerX(), ()=>B.centerY()+0.5], true );
     brd.create('text',[midX,midY,label],
        {anchorX:'middle',anchorY:'middle',fontSize:10,fixed:true});
}
}


// --- Kanten exakt verbunden und fixiert ---
// B1: E1 & E2
// B1: E1, E2
makeConnection(E1, B1, "2", 6);
edge(E1, B1, '2', -0.12);
makeConnection(E2, B1, "1", 6);
edge(E2, B1, '1', 0.12);


// B2: E1, E2
// B2: E1 & E2
edge(E1, B2, '2', -0.12);
makeConnection(E1, B2, "2", 6);
edge(E2, B2, '1', 0.12);
makeConnection(E2, B2, "1", 6);


// B3: E1, E2, E3
// B3: E1 & E2 & E3
edge(E1, B3, '1', -0.18);
makeConnection(E1, B3, "1", 6);
edge(E2, B3, '1', 0);
makeConnection(E2, B3, "1", 6);
edge(E3, B3, '1', 0.18);
makeConnection(E3, B3, "1", 6);


// B4: E1, E3, E4
// B4: E1 & E3 & E4
edge(E1, B4, '2', -0.18);
makeConnection(E1, B4, "2", 6);
edge(E3, B4, '1', 0);
makeConnection(E3, B4, "1", 6);
edge(E4, B4, '1', 0.18);
makeConnection(E4, B4, "1", 6);


// B5: E1, E4
// B5: E1 & E4
edge(E1, B5, '1', -0.12);
makeConnection(E1, B5, "1", 6);
edge(E4, B5, '2', 0.12);
makeConnection(E4, B5, "2", 6);


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