CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvaseaseljs
dnwjn
dnwjn

Reputation: 171

Easeljs draw different kinds of arrows

This application is made with Easeljs, to work in HTML5 canvas.

I want to be able to draw different kinds of arrows on the board. I tried inserting arrows as images and then making them draggable and resizable, but that made these images pretty ugly.

To illustrate:

Field to draw on

Field to draw on

Dashed arrow

Wobbly arrow

Lightning arrow

Straight arrow

Curved arrow

Arrows to draw on the field

The functionality should be as follows:

How would I get this result?

Upvotes: 0

Views: 1249

Answers (1)

Lanny
Lanny

Reputation: 11294

You can fairly easily draw arrows using the Graphics API. I spent about 20 mins making this demo:

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;

Drawing it straight and rotating it is the easiest way to add effects to the line. The demo I posted draws a sort of sine-wave like one of your examples. There is some more magic in there to make it the right length, etc.

Upvotes: 1

Related Questions