Implementierung eines Drag-and-Drop-Objekts in der erweiterten Pfadoperation von Canvas

Um den Überblick darüber zu behalten, was gezeichnet wird, führen viele Anwendungen, wie z. B. Zeichenanwendungen, computergestützte Designsysteme (CAD-Systeme) und Spiele, eine Liste der aktuell angezeigten Objekte. Typischerweise ermöglichen diese Anwendungen Benutzern die Manipulation von aktuell auf dem Bildschirm angezeigten Objekten. Beispielsweise können wir in einer CAD-Anwendung Elemente im Design auswählen, verschieben, zoomen usw

- „HTML5 Canvas Core-Technologie“

Das Gleiche gilt 实现拖拽in Canvas. Canvas bietet eine API namens isPointInPath(x, y) um zu bestimmen, ob sich 点(x, y) im Pfad befindet. Gibt true zurück, wenn es innerhalb des Pfads liegt. Wir können also folgende Ideen haben:

Pflegen Sie ein 数组, das jeden Pfad beschreiben kann, und verwenden Sie ispointInPath(x, y) um zu bestimmen, ob sich die angeklickte Position in einem bestimmten Pfad befindet. Wählen Sie diesen Pfad aus und führen Sie Vorgänge aus (Verschieben, Zoomen usw.). , und zeichnen Sie dann die Grafiken

In diesem Artikel verwende ich 多边形拖拽为例进行说明. Die Demo lautet wie folgt (der Grund für das Impressum ist die Bildschirmaufzeichnungssoftware: Japanese_ogre:).

CodePen wird geöffnet

Das Zeichnen von Polygonen in der Demo wurde bereits zusammengefasst, daher werde ich nicht noch einmal auf Details eingehen: ghost:: Canvas-Polygonzeichnung

Die folgende Abbildung gibt eine grobe Beschreibung und einen Pseudocode. Die Idee ist nicht schwierig, aber es gibt einige Details, die behandelt werden müssen.

Die Codestruktur ist hier aufgelistet und ihre Ideen sind in CodePen markiert.

Da sich dieser Artikel auf das Ziehen konzentriert, wird der Zeichnungsteil weniger beschrieben.

 //Funktion zum Zeichnen eines Polygonpfads function drawPolygonPath//Definition der Polygonklasse class Polygon{ ...}//Gibt die Position in der Leinwand gemäß der Klickereignisfunktion positoinInCanvas zurück//Ermitteln Sie den geradlinigen Abstand zwischen zwei Punkten, Funktion getDistance// Zeichnen Sie in der Anfangsphase das Ziehen des Objekts auf

Beginnen Sie als Nächstes mit der Verarbeitung der wichtigsten Teile und Details des Codes

Während der Programminitialisierung definieren wir ein PolygonArray-Array

 polygonArray = []

Jedes Mal, wenn ein neues Polygon gezeichnet wird, wird ein neues Polygonobjekt zur Wartung in das Array verschoben.

 const polygon = new Polygon(mouseStart.get('x'), mouseStart.get('y'), sideNum, radius);polygonArray.push(polygon);//Pfadobjekt aufzeichnen

Bei nachfolgenden Klickvorgängen muss anhand der entsprechenden Informationen ermittelt werden, ob sich die Klickposition im Pfad befindet.

Ermitteln Sie zunächst die entsprechende Position canvas中, wenn Sie darauf klicken. Mein Code verwendet mouseStart um x und y

Durchlaufen Sie dann polygon im polygonArray , rufen Sie während des Durchlaufs polygon.createPath() auf und ermitteln Sie mit isPointInPath() ob an der angeklickten Position ein Pfad vorhanden ist. Wenn ja, beendet draggingPolygon = polygon die Funktion.

 const pos = positionInCanvas(e, canvasLeft, canvasTop);//Ermitteln Sie die Pixelposition im Canvas//Zeichnen Sie den Startpunkt der Maus auf smouseStart.set('x', pos.x);mouseStart.set('y', pos. y);...for (let polygon of polygonArray) { polygon.createPath(); if (ctx.isPointInPath(mouseStart.get('x'), mouseStart.get('y'))) { draggingPolygon = polygon return;

Dieser Teil muss vollständig verstanden werden. Es wird empfohlen, dass Sie das Debugging anhand der beiden console.log(draggingPolygon) und des Codes in der Demo durchführen, da wir uns in der mousemove befinden und die Funktionen in dieser Phase sehr häufig ausgelöst werden.

Ich versuche es klar in Worte zu fassen

Berechnen Sie zunächst den Abstand vom mouseStart beim move , der als diff aufgezeichnet wird. Auf der x-Achse gibt es offsetX und auf der y-Achse offsetY .

 const pos = positionInCanvas(e, canvasLeft, canvasTop), diff = new Map([ ['offsetX', pos.x - mouseStart.get('x')], ['offsetY', pos.y - mouseStart.get( 'y')] ]);

Zeichnen Sie dann centerX und centerY des aktuellen Ziehobjekts auf, aufgezeichnet als Temperatur

 let tempCenterX = draggingPolygon.centerX, tempCenterY = draggingPolygon.centerY;

Das ist der schwer zu verstehende Punkt. Warum sollten wir es aufzeichnen? Lesen Sie weiter, Sie werden es später verwenden.

Legen Sie die neue Mittelposition von draggingPolygon entsprechend dem Offset im diff fest

 DraggingPolygon.centerX += diff.get('offsetX'); DraggingPolygon.centerY += diff.get('OffsetY');

Räumen Sie dann die Leinwand frei und zeichnen Sie neue Pfade und Striche

 ctx.clearRect(0, 0, canvas.width, canvas.height);for (let polygon of polygonArray) { drawPolygonPath(polygon.sideNum, polygon.radius, polygon.centerX, polygon.centerY, ctx); );}

Schließlich werden tempCenterX und tempCenterY verwendet:

 DraggingPolygon.centerX = tempCenterX; DraggingPolygon.centerY = TempCenterY;

Warum müssen wir das tun?

Da unser Ziehen 基于多边形的原位置und mousemove 不能确定函数的最终位置, kommt es zu 漂移Der Effekt ist wie folgt:

Wenn ich es nicht klar ausgedrückt habe, empfehle ich jedem, den Code zu ändern und zu debuggen.

Nachdem das Ziehen abgeschlossen ist, befindet es sich in der mouseup -Phase. Zu diesem Zeitpunkt haben wir die endgültige Position des DragginPolygons bestimmt und können es schließlich auf Null setzen, um 在没有拖拽多边形情况下，鼠标在画布上移动触发对应代码

 const pos = positionInCanvas(e, canvasLeft, canvasTop), offsetMap = new Map([ ['offsetX', pos.x - mouseStart.get('x')], ['offsetY', pos.y - mouseStart.get( 'y')]]); draggingPolygon.centerX += offsetMap.get('offsetX'); offsetMap.get('offsetY'); draggingPolygon = null;

Tatsächlich ist es nicht schwierig, diese Funktion zu implementieren. Der Schlüssel liegt darin, ein Konzept zu verstehen: Die Verfolgung wird durch die Verwaltung einer Liste der aktuell angezeigten Objekte und die Beurteilung mit isPointInPath erreicht.

Abschließend heißt es alle zum Austausch und Lernen willkommen

„HTML5 Canvas Core-Technologie“

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.