Ich möchte ein Zeichnungsfenster (ähnlich, aber eine kleinere Version als visio für Flussdiagramme) in mozilla canvas implementieren.
Gibt es irgendeine Unterstützung dafür?
Ich habe jQuery bis jetzt verwendet, um die Rechtecke zu erstellen und sie zu verschieben. Während das hier einfach ist, ist das Erzeugen von Linien (Verbindungen zwischen Objekten) ein echter Schmerz. Ich benutze eine grobe Methode, Pixel für Pixel in Javascript zu färben, und es sieht weder gut noch skalierbar aus und ich muss auch eine Menge Funktionen einbauen, um die Verbindungen an einer Menge von Objekten etc. festzuhalten.
Weiß jemand, ob die Leinwand und die dort verfügbaren Funktionen mein Leben leichter machen werden.
Irgendwelche Hinweise darauf, was in diesem Fall eine bessere Lösung ist. (Ich hoffe, es ist kein Applet)
Vielen Dank im Voraus.
Ja, Sie können Canvas dafür verwenden. Einfache Formen zeichnen und skalieren ist ziemlich einfach.
Aber wenn Sie die Formen bearbeiten müssen, nachdem Sie sie gezeichnet haben, müssen Sie etwas mehr Arbeit investieren. Canvas zeichnet in einem sogenannten "Sofort-Modus" auf, was bedeutet, dass es nicht weiß, was du gemalt hast, nachdem du es gemalt hast. Es behält keine gemalten Formen im Auge. Wenn Sie das brauchen, müssen Sie das selbst implementieren.
Ich habe dies mit der Funktion isPointInPath() getan, mit der getestet werden kann, ob ein Benutzer auf einen bestimmten Punkt klickt. Ich behalte meine gemalten Objekte mit dem MVC-Pattern (Model-View-Controller) im Auge, so dass ich herausfinden kann, auf welche Shape geklickt wurde.
Eine andere Alternative könnte sein, dass sie sehr nahe an dem sein soll, was Sie brauchen.
Bitte folgen Sie diesem Link: Ссылка
LMK, wenn es hilft!
Folgende Schritte können helfen:
1. Erstellen und fügen Sie eine Leinwand zum DOM hinzu:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Legen Sie Breite und Höhe des Canvas fest:
myCanvas.width=200;
myCanvas.height=200;
3. Holen Sie sich den Kontext der Zeichenfläche und beginnen Sie, darauf zu zeichnen:
var gc = myCanvas.getContext('2d');
4. Code zum Zeichnen eines Rechtecks:
gc.strokeRect(50,50,50,50);
5. Fügen Sie danach Mauszeiger (mouse-down, mouse move, mouse-up) / Touchhandler (Touchdown, Touchmove, Touchup) auf die Leinwand und behandeln Sie die Bewegung entsprechend.
Tags und Links javascript jquery user-interface html5 canvas