Copy link to clipboard
Copied
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)
Copy link to clipboard
Copied
You think it's a good idea to set the stroke style AFTER beginning the stroke?
Copy link to clipboard
Copied
Sorry, I don't understand. I'm an amateur, new to HTML5.
Copy link to clipboard
Copied
Why do you refuse to simply answer the question asked? It does not seem to me to have been unpleasant in its formulation.
Copy link to clipboard
Copied
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);
};
Copy link to clipboard
Copied
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})