Skip to main content
R
rvl10159074
Inspiring
October 5, 2017
Answered

Draw elastic curve in Canvas?

  • October 5, 2017
  • 2 replies
  • 693 views

I want to draw a curve that starts at a set location and the endpoint follows the mouse coordinates.  I want the simulate connecting a wire from one point to another. My code does this but it draws multiple curves on the canvas. I need to find a way to clear each curve before the next one is drawn. It breaks when I use graphics.clear(); stage.update();

var startX=150;
var startY=150;
this.addEventListener('tick', drawCurve.bind(this));
function drawCurve(){
var cptX=(stage.mouseX-startX)/3;
var cptY=(stage.mouseY-startY)*4;
    
var cord1 = new createjs.Shape();
stage.addChild(cord1);
cord1.graphics.setStrokeStyle(4).beginStroke("#ff0000");    
cord1.graphics.moveTo(startX, startY);
cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
cord1.graphics.endStroke();
cord1.graphics.clear();
stage.update();
}
    This topic has been closed for replies.
    Correct answer kglad

    use:

    var startX=150;
    var startY=150;

    this.addEventListener('tick', drawCurve.bind(this));

    function drawCurve(){

    var cptX=(stage.mouseX-startX)/3;
    var cptY=(stage.mouseY-startY)*4;
        
    var cord1 = new createjs.Shape();
    stage.addChild(cord1);
    cord1.graphics.setStrokeStyle(4).beginStroke("#ff0000");    
    cord1.graphics.moveTo(startX, startY);
    cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
    cord1.graphics.endStroke();

    cord1.graphics.clear();
    stage.update();

    }
    var startX=150;
    var startY=150;

    var cord1 = new createjs.Shape();
    stage.addChild(cord1);
    cord1.graphics.setStrokeStyle(4).


    this.addEventListener('tick', drawCurve.bind(this));

    function drawCurve(){

    var cptX=(stage.mouseX-startX)/3;  // these don't look like they'd be correct.
    var cptY=(stage.mouseY-startY)*4;
        /*
    these are more likely what you want:
    var cptX = startX+(stage.mouseX - startX) / 2;
    var cptY = startY+Math.abs(stage.mouseY - startY) * 4;
    */
    cord1.graphics.clear();

    cord1.graphics.beginStroke("#ff0000");    
    cord1.graphics.moveTo(startX, startY);
    cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
    cord1.graphics.endStroke();

    }

    2 replies

    R
    rvl10159074Author
    Inspiring
    October 5, 2017

    It does work! Your changes for the control point is a nice improvement too. Thanks!

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 5, 2017

    you're welcome.

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    October 5, 2017

    use:

    var startX=150;
    var startY=150;

    this.addEventListener('tick', drawCurve.bind(this));

    function drawCurve(){

    var cptX=(stage.mouseX-startX)/3;
    var cptY=(stage.mouseY-startY)*4;
        
    var cord1 = new createjs.Shape();
    stage.addChild(cord1);
    cord1.graphics.setStrokeStyle(4).beginStroke("#ff0000");    
    cord1.graphics.moveTo(startX, startY);
    cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
    cord1.graphics.endStroke();

    cord1.graphics.clear();
    stage.update();

    }
    var startX=150;
    var startY=150;

    var cord1 = new createjs.Shape();
    stage.addChild(cord1);
    cord1.graphics.setStrokeStyle(4).


    this.addEventListener('tick', drawCurve.bind(this));

    function drawCurve(){

    var cptX=(stage.mouseX-startX)/3;  // these don't look like they'd be correct.
    var cptY=(stage.mouseY-startY)*4;
        /*
    these are more likely what you want:
    var cptX = startX+(stage.mouseX - startX) / 2;
    var cptY = startY+Math.abs(stage.mouseY - startY) * 4;
    */
    cord1.graphics.clear();

    cord1.graphics.beginStroke("#ff0000");    
    cord1.graphics.moveTo(startX, startY);
    cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
    cord1.graphics.endStroke();

    }
    R
    rvl10159074Author
    Inspiring
    October 5, 2017

    Thanks for your reply.  Did you try this?  It didn't work for me.  No curves were drawn,

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 5, 2017

    remove the typo:

    var startX=150;

    var startY=150;

    var cord1 = new createjs.Shape();

    stage.addChild(cord1);

    cord1.graphics.setStrokeStyle(4);

    this.addEventListener('tick', drawCurve.bind(this));

    function drawCurve(){

    var cptX=(stage.mouseX-startX)/3;  // these don't look like they'd be correct.

    var cptY=(stage.mouseY-startY)*4;

        /*

    these are more likely what you want:

    var cptX = startX+(stage.mouseX - startX) / 2;

    var cptY = startY+Math.abs(stage.mouseY - startY) * 4;

    */

    cord1.graphics.clear();

    cord1.graphics.beginStroke("#ff0000");   

    cord1.graphics.moveTo(startX, startY);

    cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);

    cord1.graphics.endStroke();

    }

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