Search code examples
javascriptcanvaseaseljscreatejs

Draw a dashed curved with createjs

I have an issue with a javascript project. Something similar to a drawing tool. I would like to draw a dashed curved line.

  • I succed to draw a DASHED LINE like that:

    jsfiddle.net/lannymcnie/uQpdA/1/

  • Also succed to draw a QUADRATIC CURVE.

but can't draw a DASHED QUADRATIC CURVE. I tried a lot of things, also the ctx.setLineDash() but it change all my canvas elements into dashed instead of just the curve.

I'm using easeljs as js library to draw in canvas.

Thanks for your help.

Solution

  • LineDash support would be a great addition to EaselJS. I recommend you post a feature request in GitHub (http://github.com/CreateJS/EaselJS/issues). I might request it myself, since it is a logical addition (I didn't even know it existed, hence my earlier sample you referenced).

    Here is a quick implementation. I created a dash method, which sets the dash style on the context. Note that the stroke actually happens at the END of the instruction list (until another stroke call is applied), so you have to re-apply a stroke to begin drawing without the dash.

    http://jsfiddle.net/lannymcnie/2L7vaeeh/1/

    // Usage
var shape = new createjs.Shape().set({x:0.5,y:0.5});
shape.graphics.s("#f00").dash([10,5]).dr(10,10,100,100)
shape.graphics.s("#f00").dash().dr(20,20,100,100);

    Merry Christmas!