检索HTML5画布上形状的属性

Retrieve properties of shapes on HTML5 canvas

本文关键字：属性 HTML5 检索      更新时间：2023-09-26

我已经在easeljs中使用循环绘制了几个矩形。它们没有填充任何颜色。如果我想稍后填充它们，我需要重新画一遍吗?我必须保存他们的坐标。接下来，如果我想知道是否有人被填满了，有什么函数可以做到吗?我是画布和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);

我认为最好的方法是创建一个自定义对象来为您保存这些值。

此自定义对象还可以包含在保持当前状态的情况下为您绘制或填充形状的函数。

我刚刚做了一个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);

相关文章：