Removing a line created with the lineto CreateJS Api code snippet

[RenoToonen]

Hi all:)

I'm currently working on a project, and based on user input some lines between 2 objects is being drawn. Problem is, as soon as the user changes the input, the line should change. Now I succeeded in making the line change, but the old line is not being removed.

var stroke_color = "#0090e3";

var shape1 = new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(this.objectX.x, this.objectX.y).lineTo(this.abc.x, this.abc.y).endStroke());

this.addChild(shape1);

Simply using _this.shape1.visible = false doesn't seem to work, probably because the var name is not the same as the instance name. Any ideas? Maybe there is some command to create a new symbol and add an instance name to it, and then put this code inside of it?

Thanks very much!

[Mark Nijenhuis]

Hai Martijn,(Ben je Nederlands)?

I think you need to add:

_this.removeChild(shape1);

in the listener function (that listens for the change in user input).

Dropbox - demo.fla

Kind regards,

Mark Nijenhuis

[RenoToonen]

Hey Mark, (inderdaad haha:)

I did try the removeChild one, but that somehow was removing all line including the new one that was getting created. Anyway, I found the solution. Thanks for the help!

[ClayUUID]

Are you seriously intending to add a new shape to the display list every single time the user changes their selection?

Why don't you just clear the graphics in the shape you already made and reuse it?

[RenoToonen · Accepted solution]

Hi Clay,

Well the intention was to actually change the line, but I didn't know the code for that. Clearing all graphics wouldnt fit here because I only want that certain line to be removed, while there are others that should stay. Anyway, i found the solution. Thanks though!

Creation of the line between the position of 2 other objects:

var _this = this;

var line = new createjs.Shape();

line.graphics.beginStroke("red").setStrokeStyle(2);

line.pos1 = line.graphics.moveTo(this.objectX.x, this.objectX.y).command;

line.pos2 = line.graphics.lineTo(this.abc.x, this.abc.y).command;

stage.addChild(line);

Updating the line as per the input of the user:

$('#dom_overlay_container').on('change', '#Touchpoint1_Dropdown', function () {

     if (Touchpoint1_Dropdown.selectedIndex == 0) {

     this.objectX.x = 200;

     this.objectX.y = 700;

     line.pos1.x = this.objectX.x;

     line.pos1.y = this.objectX.y;

     line.pos2.x = this.abc.x;

     line.pos2.y = this.abc.y;

}.bind(_this));

[ClayUUID]

martijnv35880233  wrote

Hi Clay,

Well the intention was to actually change the line, but I didn't know the code for that. Clearing all graphics wouldnt fit here because I only want that certain line to be removed, while there are others that should stay.

In that case, setting the container shape to hidden would also have removed all these other lines that you never mentioned before. So apparently you described your problem in a way that was impossible for anyone here to actually solve.

You do understand that the clear command only clears the lines on a specific graphics instance, not ALL graphics instances, yes?