• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

212

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
LEGEND ,
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?

Votes

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.

Votes

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.

Votes

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

 

Votes

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

Votes

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