FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

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


<html>
<html>
<div id="gozinto_exakt" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<div id="gozinto_fix" 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_exakt', {
var brd = JXG.JSXGraph.initBoard('gozinto_fix', {
     boundingbox: [-1, 9, 13, -1],
     boundingbox: [-1, 9, 13, -1],
     axis: false,
     axis: false,
Zeile 38: Zeile 38:
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]],{
         fillColor:'#3498db',fillOpacity:0.8,vertices:{visible:false},
         fillColor:'#3498db',
         borders:{strokeColor:'#1f4e78',strokeWidth:2}
        fillOpacity:0.85,
        vertices:{visible:false},
         borders:{strokeColor:'#1f4e78',strokeWidth:2},
        fixed:true
     });
     });
     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});
         {anchorX:'middle',anchorY:'middle',strokeColor:'black',fontSize:14,fixed:true});
     return {poly: poly, x1:x1, y1:y1, x2:x2, y2:y2};
     return {x1:x1,y1:y1,x2:x2,y2:y2};
}
}


Zeile 58: Zeile 61:
var B5=box(8,2,9.5,3,'B5');
var B5=box(8,2,9.5,3,'B5');


// Funktion: exakte Kante von Rand zu Rand mit Kreis
// Funktion: exakte Kante von Rechteckrand zu Rechteckrand
function edge(fromRect, toRect, label, offset){
function edge(fromRect,toRect,label,offset){
     // Startpunkt: Mitte der Unterkante des Einzelteils
     // Start: Mitte der 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;
     // Endpunkt: Mitte der Oberkante des Bauteils
     // Ende: Mitte der 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;
     // Richtung und senkrechter Offset
     // 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;
     var px = -uy, py = ux;
    // Senkrecht-Versatz
     fx += px*offset; fy += py*offset;
     var px=-uy, py=ux;
     tx += px*offset; ty += py*offset;
     fx+=px*offset; fy+=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
     // Mittelpunkt für Kreis
     var midX = (fx + tx)/2;
     var midX=(start[0]+end[0])/2;
     var midY = (fy + ty)/2;
     var midY=(start[1]+end[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];


     // Linie bis zum Kreis (keine Spitze)
     // Linie bis Kreis (keine Spitze)
     brd.create('line', [[fx, fy], p1], {
     brd.create('line',[start,p1],{
         straightFirst: false, straightLast: false,
         straightFirst:false,straightLast:false,
         strokeColor: '#000', strokeWidth: 1.5
         strokeColor:'#000',strokeWidth:1.5,fixed:true
     });
     });
     // Linie vom Kreis bis zum Ziel (mit Spitze)
     // Linie vom Kreis bis zum Ziel (mit Spitze)
     brd.create('arrow', [p2, [tx, ty]], {
     brd.create('arrow',[p2,end],{
         strokeColor: '#000', strokeWidth: 1.5
         strokeColor:'#000',strokeWidth:1.5,fixed:true
     });
     });
     // Kreis mit Beschriftung
     // Kreis mit Beschriftung
     brd.create('circle', [[midX, midY], 0.2], {
     brd.create('circle',[[midX,midY],0.2],{
         fillColor: 'white', strokeColor: 'black'
         fillColor:'white',strokeColor:'black',fixed:true
    });
    brd.create('text', [midX, midY, label], {
        anchorX: 'middle', anchorY: 'middle', fontSize: 11
     });
     });
    brd.create('text',[midX,midY,label],
        {anchorX:'middle',anchorY:'middle',fontSize:11,fixed:true});
}
}


// --- Kanten exakt zwischen Rechteckrändern ---
// --- Kanten (exakt an Rechteckrändern, fixiert) ---


// B1: E1,E2
// B1: E1,E2
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“