EaselJS Triangle Stroke

Question

Я работаю с EaselJS, чтобы воссоздать то, что я видел в реальной жизни, и у меня небольшая проблема с штрихами треугольника.

На картинке выше вы можете увидеть мой треугольник. Я понимаю угол А и почему он не заполнен, как другие, но я хочу, чтобы он заполнился. Как я могу это сделать точно?

Потому что он не будет включать в свой фрагмент кода, мой JavaScript является:

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

и ссылку на CodePen: http://codepen.io/Spedwards/pen/hqvsc

Также в качестве небольшой подгруппы вопрос, почему мой этап только обновление в тикере?

Answer 1

Как ответил киху, вам нужно только добавить closePath к графике. Взгляните на документацию: http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_closePath

Для вашего дополнительного вопроса: сцена рисует предметы на экране по вызову stage.update(). В вашем примере этот вызов находится внутри функции, выполняемой каждым тиковым событием, то есть ~ 24 раза в секунду. Вам нужно только позвонить stage.update, когда у вас есть новые вещи для рисования (например, когда вы добавляете другой объект на сцену или когда вы перемещаете, вращаете или выполняете другие преобразования для объектов, уже находящихся на сцене). Таким образом, в вашем случае вам нужно только вызвать метод обновления после добавления формы на сцену и после события изменения размера окна.

Answer 2

Вы можете исправить проблему угла, используя 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

Что касается бегущей строки - это как CreateJS был разработан. Я думаю, что это связано с развитием игры. При анимации вы на 100% уверены, что все операции внутри обработчика «tick» были выполнены до того, как будет обработан следующий «тик».