Easeljs zeichnen verschiedene Arten von Pfeilen

Question

Diese Anwendung wird mit Easeljs gemacht, um in HTML5 Canvas zu arbeiten.

Ich möchte in der Lage sein, verschiedene Arten von Pfeilen auf dem Brett zu zeichnen. Ich habe versucht, Pfeile als Bilder einzufügen und sie dann ziehbar und größenveränderbar zu machen, aber das machte diese Bilder ziemlich hässlich.

Zur Veranschaulichung:

Feld auf

zu ziehen

Pfeile auf dem Feld zu ziehen

Die Funktionalität sollte wie folgt lauten:

• Klicken Sie auf die Schaltfläche
• eine Linie zeichnen
• Bei mouseup Ereignisse: convert Linie in Pfeil entsprechenden
• Pfeil sollte ziehbar und veränderbaren

Wie würde ich dieses Ergebnis zu bekommen?

Answer 1

Mit der Graphics API können Sie relativ einfach Pfeile zeichnen. Ich verbrachte etwa 20 Minuten mit dieser Demo machen:

• http://jsfiddle.net/lannymcnie/ukjb1g2g/2/
• http://jsfiddle.net/lannymcnie/ukjb1g2g/3/

Code:

var w = startX - endX; 
var h = startY - endY; 
var lineLength = Math.sqrt(w*w+h*h); 

arrow.graphics.clear().setStrokeStyle(3).beginStroke("#000").moveTo(0,0); 
// Logic to draw to the end. This is just a straight line 
arrow.lineTo(lineLength-arrowHeadSize, 0); 

arrow.graphics.beginFill("#000"); 
arrow.graphics.drawPolyStar(lineLength, 0, arrowHeadSize, 3); 

// Rotate 
arrow.rotation = Math.atan2(h, w) * 180/Math.PI; 

es gerade Zeichnung und Drehen ist es der einfachste Weg, Auswirkungen auf die hinzufügen Linie. Die Demo, die ich gepostet habe, zeichnet eine Art Sinuswelle, wie eines deiner Beispiele. Es gibt noch mehr Magie drin, um es auf die richtige Länge zu bringen, usw.