在HTML5畫布上檢索形狀的屬性

Question

我已經在easyljs中使用循環繪制了幾個矩形。 它們沒有任何顏色。 如果以后要填充它們，是否需要重新繪制？ 那我得保存他們的坐標。 接下來，如果我想知道是否有任何一個被填充，是否有任何函數可以這樣做？ 我是第一次接觸canvas和easyljs。

 optionChecks[oIndex] = new createjs.Shape();
 optionChecks[oIndex].graphics.beginStroke("blue");
 optionChecks[oIndex].graphics.setStrokeStyle(2);
 optionChecks[oIndex].graphics.drawRect( canvas2.width*0.05 ,pHeight+20 ,20 ,20);

該循環持續5個oIndex值。

Answer 1

我認為，最好的方法是創建自定義對象，該對象將為您保留這些值。

此自定義對象還可以包含在保持當前狀態的同時為您繪制或填充形狀的函數。

我只是做了一個jsfiddle來演示這一點。

在此示例中，您可以創建如下對象：

obj1 = new canvasObj(0, 0, 10, 10); //x, y, width, height

並調用如下函數：

obj1.draw(); //This will set isDrawn value to true

因此，現在您可以像這樣檢查對象是否繪制：

alert("is obj1 drawn: " + obj1.isDrawn);

希望有幫助！

---

Edit

---

在您的情況下，可以使用optionChecks[oIndex] = new canvasObj...代替obj1 = new canvasObj...

然后，您可以在“構造函數”中添加this.shape = new createjs.Shape(); 。

現在， this.shape將在每個canvasObj函數中可用。 因此，在名為draw的函數中，您可以替換為：

ctx.rect(this.x, this.y, this.width, this.height);
ctx.stroke();

這樣：

this.shape.graphics.beginStroke("blue");
this.shape.graphics.setStrokeStyle(2);
this.shape.graphics.drawRect( canvas2.width*0.05 ,pHeight+20 ,20 ,20);

看到這個更新的jsfiddle ，現在使用easeljs。