FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Keine Bearbeitungszusammenfassung
Zeile 29: Zeile 29:


<script>
<script>
// JSXGraph erst starten, wenn MediaWiki das DOM fertig aufgebaut hat
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {


Zeile 39: Zeile 38:


     // -------------------------------------------------------------
     // -------------------------------------------------------------
     // Rechteck als Polygon
    // Hilfsfunktion: Schnittpunkt mit einem Rechteckrand
    // -------------------------------------------------------------
    function edgePointRect(rect, targetPoint) {
        return brd.create('intersection', [
            brd.create('line', [
                ()=>rect.centerX(),
                ()=>rect.centerY(),
                targetPoint
            ], {visible:false}),
 
            // Die vier Polygonkanten
            brd.create('segment', [rect.p1, rect.p2], {visible:false}),
            brd.create('segment', [rect.p2, rect.p3], {visible:false}),
            brd.create('segment', [rect.p3, rect.p4], {visible:false}),
            brd.create('segment', [rect.p4, rect.p1], {visible:false})
        ], {visible:false});
    }
 
    // -------------------------------------------------------------
    // Hilfsfunktion: Punkt am Kreisrand (statt im Zentrum)
    // -------------------------------------------------------------
    function edgePointCircle(pCenter, R, targetPoint) {
        return brd.create('point', [
            ()=> pCenter.X() + R * (targetPoint.X() - pCenter.X()) /
                  Math.sqrt( (targetPoint.X()-pCenter.X())**2 + (targetPoint.Y()-pCenter.Y())**2 ),
 
            ()=> pCenter.Y() + R * (targetPoint.Y() - pCenter.Y()) /
                  Math.sqrt( (targetPoint.X()-pCenter.X())**2 + (targetPoint.Y()-pCenter.Y())**2 )
        ], {visible:false, fixed:true});
    }
 
    // -------------------------------------------------------------
     // Rechteck (nicht skalierbar, nur verschiebbar)
     // -------------------------------------------------------------
     // -------------------------------------------------------------
     function createRect(x,y,w,h,labelText) {
     function createRect(x,y,w,h,labelText) {
        let p1 = brd.create('point', [x, y],      {visible:false});
        let p2 = brd.create('point', [x+w, y],    {visible:false});
        let p3 = brd.create('point', [x+w, y-h],  {visible:false});
        let p4 = brd.create('point', [x, y-h],    {visible:false});


         let poly = brd.create('polygon', [p1,p2,p3,p4], {
        let p1 = brd.create('point',[x,y],      {visible:false, fixed:true});
        let p2 = brd.create('point',[x+w,y],    {visible:false, fixed:true});
        let p3 = brd.create('point',[x+w,y-h],  {visible:false, fixed:true});
        let p4 = brd.create('point',[x,y-h],    {visible:false, fixed:true});
 
         let poly = brd.create('polygon',[p1,p2,p3,p4], {
             fillColor:'#3498db',
             fillColor:'#3498db',
             fillOpacity:0.8,
             fillOpacity:0.8,
             vertices:{visible:false},
             vertices:{visible:false},
             borders:{strokeWidth:2, strokeColor:'#1f4e78'}
             borders:{strokeWidth:2},
            withLines:false
         });
         });
        // Gruppe verschiebbar machen?
        poly.draggable = true;


         brd.create('text',
         brd.create('text',
             [ ()=>(p1.X()+p3.X())/2,
             [ ()=> (p1.X()+p3.X())/2,
               ()=>(p1.Y()+p3.Y())/2,
               ()=> (p1.Y()+p3.Y())/2,
               labelText ],
               labelText ],
             {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14}
             {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14}
         );
         );


         return {p1:p1,p3:p3,
         return {
                centerX:()=> (p1.X()+p3.X())/2,
            p1:p1, p2:p2, p3:p3, p4:p4,
                centerY:()=> (p1.Y()+p3.Y())/2};
            centerX:()=> (p1.X()+p3.X())/2,
            centerY:()=> (p1.Y()+p3.Y())/2
        };
     }
     }


     // -------------------------------------------------------------
     // -------------------------------------------------------------
     // Kreis-Knoten
     // Kreis-Knoten (mit Randverbindung)
     // -------------------------------------------------------------
     // -------------------------------------------------------------
     function createCircleNode(x,y,labelText){
     function createCircleNode(x,y,labelText){
         let p = brd.create('point', [x,y], {visible:false});
         let p = brd.create('point', [x,y], {visible:false});
         brd.create('circle', [p, 0.35], {
        let R = 0.35;
 
         brd.create('circle', [p, R], {
             strokeColor:'black',
             strokeColor:'black',
             fillColor:'white'
             fillColor:'white'
         });
         });
         brd.create('text',[()=>p.X(), ()=>p.Y(), labelText],
         brd.create('text',[()=>p.X(), ()=>p.Y(), labelText],
             {anchorX:'middle', anchorY:'middle', fontSize:12});
             {anchorX:'middle', anchorY:'middle', fontSize:12});
        p.radius = R;
         return p;
         return p;
     }
     }


     // -------------------------------------------------------------
     // -------------------------------------------------------------
     // Linien
     // Verbindung: Rechteckrand → Kreisrand → Rechteckrand
    // mit leichten Offsets damit Spitzen nicht überlappen
     // -------------------------------------------------------------
     // -------------------------------------------------------------
     function connect(A, B, arrow){
     function makeConnection(E, B, amount, yMid, offsetX){
         if(arrow){
 
             return brd.create('arrow', [A, B], {strokeWidth:2});
         // Kreis
         }
        let c = createCircleNode(
         return brd.create('line', [A, B], {straightFirst:false, straightLast:false, strokeWidth:2});
            ()=> (E.centerX()+B.centerX())/2 + offsetX,
            yMid,
             amount
        );
 
        // Punkte am Rand
        let pE = edgePointRect(E, c);
        let pC1 = edgePointCircle(c, c.radius, pE);
 
        let pC2 = edgePointCircle(c, c.radius, B);
        let pB = edgePointRect(B, c);
 
        // Linien: E → Kreis
        brd.create('line', [pE, pC1], {
            straightFirst:false, straightLast:false,
            strokeWidth:2
        });
 
         // Linien: Kreis → B
         brd.create('arrow', [pC2, pB], {
            strokeWidth:2
        });
     }
     }


Zeile 108: Zeile 173:


     // -------------------------------------------------------------
     // -------------------------------------------------------------
     // Verbindung
     // Verbindungen mit Offsets damit nichts überlappt
     // -------------------------------------------------------------
     // -------------------------------------------------------------
     function makeConnection(E, B, amount, yMid){
     makeConnection(E1, B1, "2", 6, -0.2);
        let cx = ()=> (E.centerX() + B.centerX())/2;
    makeConnection(E2, B1, "1", 6, +0.2);
        let cy = yMid;


        let circlePoint = createCircleNode( cx(), cy, amount );
    makeConnection(E1, B2, "2", 6, -0.3);
    makeConnection(E2, B2, "1", 6, +0.3);


        connect([()=>E.centerX(), ()=>E.centerY()-0.5], circlePoint, false);
    makeConnection(E1, B3, "1", 6, -0.4);
        connect(circlePoint, [()=>B.centerX(), ()=>B.centerY()+0.5], true);
     makeConnection(E2, B3, "1", 6, 0);
    }
     makeConnection(E3, B3, "1", 6, +0.4);
 
    // -------------------------------------------------------------
    // Kanten
    // -------------------------------------------------------------
     makeConnection(E1, B1, "2", 6);
     makeConnection(E2, B1, "1", 6);


     makeConnection(E1, B2, "2", 6);
     makeConnection(E1, B4, "2", 6, -0.4);
     makeConnection(E2, B2, "1", 6);
    makeConnection(E3, B4, "1", 6, 0);
     makeConnection(E4, B4, "1", 6, +0.4);


     makeConnection(E1, B3, "1", 6);
     makeConnection(E1, B5, "1", 6, -0.2);
    makeConnection(E2, B3, "1", 6);
     makeConnection(E4, B5, "2", 6, +0.2);
    makeConnection(E3, B3, "1", 6);
 
    makeConnection(E1, B4, "2", 6);
    makeConnection(E3, B4, "1", 6);
     makeConnection(E4, B4, "1", 6);
 
    makeConnection(E1, B5, "1", 6);
    makeConnection(E4, B5, "2", 6);


});
});
</script>
</script>
</html>
</html>


== Beispiel 2: Rezeptstruktur eines Gerichts ==
== Beispiel 2: Rezeptstruktur eines Gerichts ==
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“