line thickness problem

Explorer ,
Dec 21, 2020 Dec 21, 2020

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)

Views

128

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 21, 2020 Dec 21, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 21, 2020 Dec 21, 2020

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 22, 2020 Dec 22, 2020

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines