Ich suche Javascript-Code, damit der Benutzer eine Linie zeichnen kann (auf einem Bild).
Genauso wie das Linienwerkzeug in Photoshop (zB):
Der Benutzer klickt auf das Bild, zieht die Maus (während die Linie zwischen dem Startpunkt und dem Mauspunkt dynamisch gezogen wird).
Ich würde auch eine aufrufbare Funktion benötigen, um der Seite die Start- und Endkoordinaten zu senden.
Ich habe dieses sehr schöne Skript für die Bereichsauswahl gefunden: Ссылка
und ich habe viele Skripte zum Zeichnen von Linien (und anderen Formen in JS) gefunden, konnte aber nicht finden, wonach ich suche.
Danke
Da es keine Standardmethode zum Zeichnen gibt, wenn Sie ältere Browser und IE unterstützen möchten,
Sie müssen eine Bibliothek verwenden. Die Bibliothek wird die plattformübergreifenden Probleme des Zeichnens mit SVG oder Microsofts VML
Ich empfehle Raphael JS
raphael.js ist ein leichtgewichtiges Rendering-Tool für Javascript (MIT lizensiert), das in FF, Safari, Chrome und IE6 + funktioniert.
Es verwendet SVG für die ersten 3 und VML für IE, aber die API ist über Browser hinweg sehr ähnlich und sehr süß.
z.B.
%Vor%Ich habe es verwendet, um beim Ziehen eine Linie zu zeichnen und kann für seine Benutzerfreundlichkeit bürgen
Verwenden Sie das Element canvas , um das Bild anzuzeigen. Dann ist das Zeichnen einer Linie (oder irgendetwas anderes) trivial.
Wenn Ihre Mathematik gut genug ist, ist es möglich (obwohl verrückt), es ohne den Canvas-Tag für die meisten modernen Browser zu machen, die (falls zutreffend) eines verwenden:
Durch Erstellen von zB. ein 1px hohes div, mit z. ein Rahmen-Top für Ihre 'Linie', und mit der Maus ziehen Ereignis zu positionieren und zu drehen.
Wahnsinn liegt auf diese Weise , aber es wäre eine ziemlich lustige Übung. (Sie sollten etwas wie Raphael JS verwenden, das cross browser und sane ist - siehe oben)
Ich arbeite an etwas ähnlichem. Das Zeichnen einer Linie auf einer Leinwand ist ziemlich einfach. Sie können von meinem Code hier nehmen.
Folgen Sie einfach dem mousedown Listener.
Obwohl ich beim Laden von Bildern festgestellt habe, dass die Raphael-Bibliothek besser zu verwenden ist. Ich habe das gesehen, weil Canvas sich wie ein flaches Bild verhält. Wenn ich also ein Ziel hinzufügen möchte, dann erlaube es dem Benutzer, dieses Bild zu manipulieren, es lässt mich nicht (es sei denn, es gibt etwas, das ich vermisse).
Mit Raphael können Sie diese Zeichnungen und Bilder als Objekte zeichnen und verwenden.
Wenn Sie unterstützt werden, können Sie Canvas verwenden, in IE verwenden Sie die Funktion filter rotate. Wie hier funktioniert bei beiden:
Tags und Links javascript line draw