How to change line coordinates in Easel.js without clearing?

Question

In Easel.js you draw a line like this:

lineE.graphics
    .moveTo(x1,y1)
    .setStrokeStyle(3)
    .beginStroke("black")
    .lineTo(x2,y2);

But to change its coordinates I am having to erase everything:

lineE.graphics
    .clear() <-----------Why??????
    .moveTo(newX1,newY1)
    .setStrokeStyle(3)
    .beginStroke("black")
    .lineTo(newX2,newY2);

How can I keep other properties like stroke color while changing the coordinates of the line. I am drawing a line between to moving objects. There should be a more elegant way.

Lanny Lanny · Accepted Answer · 2014-04-30T19:55:32

This is how EaselJS works. You have to redraw the Shape to change it. This has a minimal impact on performance because the shape has to be drawn again any time the Stage updates.

The best way to do this is to have a redraw routine which clears and draws the shape when it changes.

You could check out the Graphics.inject method, which is a way to inject variable instructions into a Graphics path. There is a sample on GitHub called "Graphics_inject.html"

How to change line coordinates in Easel.js without clearing?

1 Answers