Skip to main content
M
mp63178988
Inspiring
December 21, 2020
Question

line thickness problem

  • December 21, 2020
  • 2 replies
  • 602 views

 

Hello,
I have the following HTML5 code used in Animate that works very well but I can't change the line thickness. The line shapePt.graphics.setStrokeStyle(2); doesn't change anything. Where is my error? Did I forget something?

var myPoint = {x:500, y:250};
var g9 = tick.bind(this);
createjs.Ticker.addEventListener("tick", g9);
function tick()
{
var A1 = myPoint.x;
var B1 = myPoint.y;
var C1 = shapePt.x;
var D1 = A1 - C1;

shapePt.x+= -1.8;
shapePt.graphics.lineTo( D1, B1 );
this.addChild(shapePt);
};
var shapePt = new createjs.Shape();
shapePt.graphics.beginStroke("green");
shapePt.graphics.setStrokeStyle(2);
shapePt.graphics.moveTo( 500, 250 );

Thank you very much for any answer.

Translated with www.DeepL.com/Translator (free version)

    This topic has been closed for replies.

    2 replies

    C
    ClayUUID
    Legend
    December 21, 2020

    You say it works but I can't see how this would work at all. You're setting a start point in timeline code, but then finishing the line draw within an event handler. You should have all line-drawing code within the event handler.

     

    You're moving the shape instead of moving the coordinates of the lines drawn within the shape.

     

    You're using += to "increment" by a negative number. This isn't techincally wrong, but it's weird.

     

    It looks like you want to draw a line that grows to the left, but instead of clearing and redrawing the line every tick, you're adding dozens of shape instances. This is horribly inefficient. You could do the same thing much more simply like this:

     

    var startPoint = {x:500, y:250};
var endPoint   = {x:500, y:250};

var shapePt = new createjs.Shape();
this.addChild(shapePt);

createjs.Ticker.addEventListener("tick", tick);

function tick() {
	endPoint.x -= 1.8;
	shapePt.graphics.clear().
		setStrokeStyle(2).
		beginStroke("green").
		moveTo(startPoint.x, startPoint.y).
		lineTo(endPoint.x, endPoint.y);
};

     

    M
    mp63178988Author
    Inspiring
    December 22, 2020

    Thank you for your answer and it is true that your code is clear. You say: "You move the shape instead of moving the coordinates of the lines drawn inside the shape". I did this because I associated a tween to the point that draws the curve. So how do you integrate a tween like the code below?
    I give you the old code with the tween so that you have a visual.

     

    var myPoint = {x:500, y:250};
    var g9 = tick.bind(this);
    createjs.Ticker.addEventListener("tick", g9);
    function tick()
    {
    var A1 = myPoint.x;
    var B1 = myPoint.y;
    var C1 = shapePt.x;
    var D1 = A1 - C1;

    shapePt.x+= -1.8;
    shapePt.graphics.lineTo( D1, B1 );
    this.addChild(shapePt);
    };
    var shapePt = new createjs.Shape();
    shapePt.graphics.beginStroke("green");
    shapePt.graphics.moveTo( 500, 250 );


    createjs.Tween.get(myPoint, {loop: -1})
    .to({x:500, y: myPoint.y + 100},1200)
    .to({x:500, y: myPoint.y})

    C
    ClayUUID
    Legend
    December 21, 2020

    You think it's a good idea to set the stroke style AFTER beginning the stroke?

    M
    mp63178988Author
    Inspiring
    December 21, 2020

    Sorry, I don't understand. I'm an amateur, new to HTML5.

    M
    mp63178988Author
    Inspiring
    December 21, 2020

    Why do you refuse to simply answer the question asked? It does not seem to me to have been unpleasant in its formulation.

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