EaselJS三角筆畫

我正在與EaselJS合作來重現我在現實生活中看到的一些東西，並且我對三角形筆觸有輕微的問題。EaselJS三角筆畫

enter image description here

在上面的圖片你可以看到我的三角形。我瞭解A角，爲什麼它不像其他人那樣充滿，但我希望它填滿。我怎樣才能做到這一點？

因爲它不包括我的代碼片段，我的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

另外，作爲一個小的子問題，爲什麼我的舞臺只更新在股票代碼？

來源

2014-10-04 Spedwards

由於kihu的回答，您只需要將closePath添加到圖形。看看文檔：http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_closePath

對於你的子問題：舞臺上的東西在屏幕上的stage.update()調用。在你的例子中，這個調用在每個tick事件中執行的函數內，即每秒約24次。當您需要繪製新東西時（例如，將其他對象添加到舞臺上或當您移動，旋轉或對已經處於舞臺中的對象執行其他轉換時），只需要撥打stage.update即可。因此，就你而言，只需在將形狀添加到舞臺和窗口大小調整事件之後調用更新方法即可。

來源

2014-10-07 00:12:45 renatopp

您可以使用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'處理器中的所有操作在處理下一個'tick'之前已經執行完畢。

來源

2014-10-06 13:15:15 kihu

EaselJS三角筆畫

回答

相關問題