Ich arbeite an Concept Maps-Anwendung, die eine Reihe von Knoten und Links hat. Ich habe die Verbindungen zu Knoten verbunden, indem ich die Mitte des Knotens als Referenz verwende. Da ich Knoten mit unterschiedlicher Größe und Form habe, ist es nicht ratsam, einen Pfeilkopf für die Verbindung zu zeichnen, indem die Höhe oder Breite der Form angegeben wird. Meine Herangehensweise besteht darin, einen Link von einem Knotenpunkt zu erstellen, Pixel für Pixel, bis der nächste Knoten erreicht ist (hier haben die Knoten eine andere Farbe als der Hintergrund), und dann auf den Pixelwert, den ich erreichen möchte Entscheide den Schnittpunkt von Link und Knoten, der eigentlich die Koordinate zum Zeichnen der Pfeilspitze ist.
Es wäre großartig, wenn ich dabei helfen könnte.
Beispielcode: Ссылка
Hier sind die grünen Quadrate Knoten und die Linie, die vom linken Quadrat beginnt und in das rechte Quadrat eintritt, ist die Verbindung. Ich möchte, dass der Pfeil am Schnittpunkt von Link und rechtem Quadrat gezeichnet wird.
Ich habe ein Beispiel dafür erstellt. Ich benutze Bresenhams Linienalgorithmus , um die Linie von ganzen Leinwandpixeln zu durchlaufen und das Alpha an jedem Punkt zu überprüfen; Wann immer es einen Schwellenwert überschreitet, nehme ich das als Kandidat auf. Ich verwende dann die ersten und letzten solcher Punkte, um einen Pfeil (mit richtig gedrehter Pfeilspitze) zu zeichnen.
Hier ist das Beispiel: Ссылка
Aktualisieren Sie das Beispiel, um einen neuen zufälligen Testfall zu sehen. Es 'scheitert', wenn Sie eine andere 'Form' haben, die bereits einen der Endpunkte überlappt. Eine Möglichkeit, dies zu lösen, wäre, Ihre Formen zuerst auf eine leere Leinwand zu zeichnen und dann das Ergebnis ( %code% ) auf die endgültige Leinwand zu kopieren.
Für Stack-Überlauf-Nachfahren (für den Fall, dass meine Seite nicht erreichbar ist) ist hier der relevante Code:
%Vor%Ich arbeite an Concept Maps-Anwendung, die eine Reihe von Knoten und Links hat. Ich habe die Verbindungen zu Knoten verbunden, indem ich die Mitte des Knotens als Referenz verwende. Da ich Knoten mit unterschiedlicher Größe und Form habe, ist es nicht ratsam, einen Pfeilkopf für die Verbindung zu zeichnen, indem die Höhe oder Breite der Form angegeben wird. Meine Herangehensweise besteht darin, einen Link von einem Knotenpunkt zu erstellen, Pixel für Pixel, bis der nächste Knoten erreicht ist (hier haben die Knoten eine andere Farbe als der Hintergrund), und dann auf den Pixelwert, den ich erreichen möchte Entscheide den Schnittpunkt von Link und Knoten, der eigentlich die Koordinate zum Zeichnen der Pfeilspitze ist.
Es wäre großartig, wenn ich dabei helfen könnte.
Beispielcode: Ссылка
Hier sind die grünen Quadrate Knoten und die Linie, die vom linken Quadrat beginnt und in das rechte Quadrat eintritt, ist die Verbindung. Ich möchte, dass der Pfeil am Schnittpunkt von Link und rechtem Quadrat gezeichnet wird.
Ich habe ein Beispiel dafür erstellt. Ich benutze Bresenhams Linienalgorithmus , um die Linie von ganzen Leinwandpixeln zu durchlaufen und das Alpha an jedem Punkt zu überprüfen; Wann immer es einen Schwellenwert überschreitet, nehme ich das als Kandidat auf. Ich verwende dann die ersten und letzten solcher Punkte, um einen Pfeil (mit richtig gedrehter Pfeilspitze) zu zeichnen.
Hier ist das Beispiel: Ссылка
Aktualisieren Sie das Beispiel, um einen neuen zufälligen Testfall zu sehen. Es 'scheitert', wenn Sie eine andere 'Form' haben, die bereits einen der Endpunkte überlappt. Eine Möglichkeit, dies zu lösen, wäre, Ihre Formen zuerst auf eine leere Leinwand zu zeichnen und dann das Ergebnis ( drawImage ) auf die endgültige Leinwand zu kopieren.
Für Stack-Überlauf-Nachfahren (für den Fall, dass meine Seite nicht erreichbar ist) ist hier der relevante Code:
%Vor%Tags und Links javascript html5 canvas