Skip to main content
RenoToonen
RenoToonen
Inspiring
December 7, 2018
Answered

Removing a line created with the lineto CreateJS Api code snippet

  • December 7, 2018
  • 2 replies
  • 1035 views

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!

    This topic has been closed for replies.
    Correct answer RenoToonen

    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));

    2 replies

    C
    ClayUUID
    Legend
    December 7, 2018

    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
    RenoToonenAuthorCorrect answer
    Inspiring
    December 8, 2018

    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));

    C
    ClayUUID
    Legend
    December 8, 2018

    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?

    M
    Mark Nijenhuis
    Participant
    December 7, 2018

    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
    RenoToonenAuthor
    Inspiring
    December 8, 2018

    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!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices