CODEWITHSUNDEEP
javascriptcanvaseaseljs
Spedwards
Spedwards

Reputation: 4492

EaselJS Triangle Stroke

I'm working with EaselJS to recreate something I've seen in real life and I'm having a slight issue with triangle strokes.

enter image description here

In the above image you can see my triangle. I understand corner A and why it isn't filled like the others but I want it filled. How can I do this exactly?

Because it won't include my code snippet, my JavaScript is:

var stage = new createjs.Stage('c'),
    poly = new createjs.Shape(),
    s = 400,
    h = s * (Math.sqrt(3)/2),
    x = stage.canvas.width/2+s,
    y = stage.canvas.height/2+s/2;

poly.graphics.beginStroke('#0da4d3').setStrokeStyle(75)
  .moveTo(x,y).lineTo(x+s/2,y+h).lineTo(x-s/2,y+h).lineTo(x,y);
stage.addChild(poly);
stage.update();

createjs.Ticker.addEventListener('tick', handleTick);

function handleTick(e) {
  stage.update();
}



window.onresize = function() {
  stage.canvas.width = $(window).width();
  stage.canvas.height = $(window).height();
}
stage.canvas.width = $(window).width();
stage.canvas.height = $(window).height();

and a link to CodePen: http://codepen.io/Spedwards/pen/hqvsc

Also as a small sub-question, why is my stage only updating in a Ticker?

Upvotes: 1

Views: 2120

Answers (2)

renatopp
renatopp

Reputation: 1315

As kihu answered, you only need to add closePath to the graphics. Take a look at the documentation: http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_closePath

For your sub question: the stage draw things on the screen on the stage.update() call. In your example, this call is inside a function executed every tick event, i.e., ~ 24 times per second. You only need to call stage.update when you have new things to draw (e.g., when you add other object to the stage or when you move, rotate or perform other transformations to the objects already in stage). Thus, in your case, you only need to call the update method after adding the shape to the stage and after the window resize event.

Upvotes: 2

kihu
kihu

Reputation: 852

You can fix the corner issue using closePath();

poly.graphics.beginStroke('#0da4d3').setStrokeStyle(75);
poly.graphics.moveTo(x,y).lineTo(x+s/2,y+h).lineTo(x-s/2,y+h).closePath();

http://codepen.io/anon/pen/fyxvI

As for the ticker - this is how CreateJS was designed. I think it's related to game development. When animating things, you are 100% sure that all the operations inside 'tick' handler have been executed before the next 'tick' is handled.

Upvotes: 2

Related Questions