2017-03-08 78 views
0

我生成一個4x4正方形網格,下面的代碼。它們都在stage.update()的畫布上繪製正確的位置,行和列。但是,所有十六個檢查中的x,y座標是0,0。爲什麼?每個形狀都有它自己的x,y座標系嗎?如果是這樣,如果我得到一個形狀的句柄,我該如何確定它最初繪製在畫布上的位置?EaselJS形狀x,y屬性混淆

EaselJS文檔對此主題保持沉默;-)。也許你必須知道Flash。

var stage = new createjs.Stage("demoCanvas"); 
    for (i = 0; i < 4; i++) { 
     for (j = 0; j < 4; j++) { 
      var square = new createjs.Shape();            
      square.graphics.drawRect(i*100, j*100, 100, 100); 
      console.log("Created square + square.x + "," + square.y); 
      stage.addChild(square); 
     } 
    } 

回答

1

您正在繪製所需座標的圖形,而不是在0,0處繪製它們,並使用x/y座標移動它們。如果您自己未設置x/y,則它將爲0. EaselJS不會根據圖形內容推斷x/y或寬度/高度(more info)。

這裏是一個更新的小提琴,其中圖形的繪製都在[0,0],然後利用定位X/Y代替:http://jsfiddle.net/0o63ty96/

相關代碼:

square.graphics.beginStroke("red").drawRect(0,0,100,100); 
square.x = i * 100; 
square.y = j * 100; 
+0

謝謝!在我輸入這個問題後,我懷疑這可能是答案 - 我假設繪製矩形調用會以某種方式設置方形實例的x/y是錯誤的。它看起來像一個有點令人困惑的API - 完全面向對象的(即新的矩形(x,y,寬度,高度)) - 但現在我明白它在做什麼應該沒有問題。 –