Auf Thema antworten

Beitrag

[QUOTE="GeoTeach, post: 14519, member: 4989"]
Hallo allerseits

Ich nutze in meinem Geografie-Unterricht gerne Wirkungsgefüge um komplexe Systeme zu visualisieren.
Wirkungsgefüge verbinden Elemente durch Beziehungen:
[ATTACH type="full" width="463px"]493[/ATTACH]

In einem Anflug von Selbstüberschätzung habe ich versucht, das Erstellen von Wirkungsgefügen zu digitalisieren (und eine Art Simulation hinzufügen). 
Viele Probleme konnte ich ausmerzen, doch jetzt scheitere ich an den Textboxen:
[ATTACH type="full" width="403px"]496[/ATTACH]
Die Kreise repräsentieren die Elemente. Das Rechteck repräsentiert die Beziehung zwischen den Elementen (in der ersten Abbildung als weisser Pfeil dargestellt).  Momentan werden Beziehungen nur als Rechteck zwischen die Elemente gezwängt (in der Abbildung weiss). Ziel ist, dass die Beziehung als Pfeil dargestellt wird, vom Quell-Element-Kreis zum Ziel-Element-Kreis (in der Abbildung schwarz, hab' ich von Hand reingezeichnet).
Aber das kriege ich nicht hin. Meine Idee war, die Mittelpunkte der Element-Kreise als Vektor zu interpretieren. Die Textboxen müssen dann parallel zu diesem Vektor sein. Das hat aber nicht geklappt.

Hat jemand Ideen wie ich die Texte mitsamt der Rechtecke dynamisch so drehen lassen kann, dass sie passend zwischen 2 Elementen stehen? 
Ich habe von html sehr wenig Ahnung und von Javascript ein bisschen. Daher wär's für mich besser, wenn es eher mittels Javascript umsetzbar wäre.

Ich bin für jeden Vorschlag dankbar!
Vielen Dank im Voraus!

Liebe Grüsse aus der Schweiz
Adrian

PS: Ich habe absichtlich ALLES in eine einzige html-Datei geschrieben. Dann müssen die Schüler nur runterladen und draufklicken. Alles andere führt oft zu Komplikationen...
Hier der vermutlich relevante Javascript-Code, der die Beziehungen zeichnen soll. Der restliche Code steht in der Zipdatei.

[CODE=javascript]            function drawRelations() {
                const svg = document.getElementById('visualisierung').querySelector('svg');

relations.forEach((relation, index) => {
                    const sourceElement = elements.find(el => el.beschreibung === relation.quelle.beschreibung);
                    const targetElement = elements.find(el => el.beschreibung === relation.ziel.beschreibung);

if (!sourceElement || !targetElement) return;

const sourceAngle = elements.indexOf(sourceElement) * angleIncrement - Math.PI / 2;
                    const targetAngle = elements.indexOf(targetElement) * angleIncrement - Math.PI / 2;

const sourceX = centerX + polygonRadius * Math.cos(sourceAngle);
                    const sourceY = centerY + polygonRadius * Math.sin(sourceAngle);
                    const targetX = centerX + polygonRadius * Math.cos(targetAngle);
                    const targetY = centerY + polygonRadius * Math.sin(targetAngle);

const distance = Math.sqrt((targetX - sourceX) ** 2 + (targetY - sourceY) ** 2);

// Berechnung der Mitte zwischen den beiden Elementen
                    const midX = (sourceX + targetX) / 2;
                    const midY = (sourceY + targetY) / 2;

// Berechnung des Winkels zwischen den beiden Elementen
                    const angle = Math.atan2(targetY - sourceY, targetX - sourceX);

// Berechnung der Breite und Höhe des Rechtecks
                    const rectWidth = distance - elementRadius * 2;
                    const rectHeight = elementRadius * 1.6; // 80% des Element-Kreis-Durchmessers

// Erstellen eines Rechtecks
                    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    rect.setAttribute('x', midX - rectWidth / 2);
                    rect.setAttribute('y', midY - rectHeight / 2);
                    rect.setAttribute('width', rectWidth);
                    rect.setAttribute('height', rectHeight);
                    rect.setAttribute('fill', 'white');
                    rect.setAttribute('stroke', 'black');

// Text für die Beziehung im Rechteck
                    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                    text.textContent = relation.quelle.beschreibung + ' wirkt ' + relation.operator + ' ' + relation.operand + ' auf ' + relation.ziel.beschreibung + ' ein';
                    
                    let fontSize = getMaxFontSize4Relations(text.textContent, rectWidth, rectHeight);
                
                    text.setAttribute('font-size', fontSize);
                    text.setAttribute('x', midX);
                    text.setAttribute('y', midY);
                    text.setAttribute('text-anchor', 'middle');
                    text.setAttribute('dominant-baseline', 'middle');

svg.appendChild(rect);
                    svg.appendChild(text);
                });
            }[/CODE]
[/QUOTE]

Authentifizierung