在 HTML5 画布上检索形状的属性答案

【问题标题】：Retrieve properties of shapes on HTML5 canvas在 HTML5 画布上检索形状的属性
【发布时间】：2014-06-17 23:04:46
【问题描述】：

我已经在easeljs 中使用循环绘制了几个矩形。它们没有填充任何颜色。如果我想稍后填充它们，我是否必须重新绘制它们？那我必须保存他们的坐标。接下来如果我想知道是否有任何人被填满，这样做有什么功能吗？我是画布和画架的新手。

 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 值。

【问题讨论】：

如果可以解决您的问题，请查看我编辑的答案。

标签： javascript html easeljs

【解决方案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。

【讨论】：

实际上我被要求只使用easeljs。我已经写好的代码有没有办法解决？
@user3722844 我刚刚编辑了我的答案，以便更具体地处理您的情况。