2016-07-21 1 views
0

Diese Anwendung wird mit Easeljs gemacht, um in HTML5 Canvas zu arbeiten.Easeljs zeichnen verschiedene Arten von Pfeilen

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:

Field to draw on

Feld auf

Dashed arrow

Wobbly arrow

zu ziehen

Straight arrow

Curved arrow

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?

+0

Unterstützt das EaselJS-Paket SVG-Bilder? Wenn ja, könnte das eine Lösung sein, die Sie ausprobieren sollten. SVG-Bilder skalieren und rotieren ohne die Hässlichkeit, von der ich annehme, dass Sie sie mit einem Bitmap-Bild erlebt haben. –

+0

Es unterstützt nur SVG als eine Bildquelle. Sie können das Vektorgrafikformat verwenden und einige Pfeiltypen aus Adobe Animate exportieren. – Lanny

Antwort

0

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

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.

+0

Danke! Ich werde versuchen, die Pfeile, die ich brauche, mit Ihrem Code zu erstellen. – BlackFayah

Verwandte Themen