如何处理在 HTML5 画布上绘制的形状并更改其属性？

Posted 2023-03-05

【中文标题】如何处理在 HTML5 画布上绘制的形状并更改其属性？

【英文标题】：How to address a shape drawn on a HTML5 canvas and change its properties?

【发布时间】：2016-04-10 20:47:58

【问题描述】：

我开始探索 html5 画布，对于我的问题的幼稚，我提前道歉。使用 Flash CC，我生成了一个带有矩形的画布：

(function (lib, img, cjs, ss) 
var p; // shortcut to reference prototypes
// library properties:
lib.properties = 
    width: 550,
    height: 400,
    fps: 24,
    color: "#FFFFFF",
    manifest: []
;
// symbols:
// stage content:
(lib.canvas_test = function() 
    this.initialize();
    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.beginFill().beginStroke("#669966")
    .setStrokeStyle(1,1,1).moveTo(-94,-62).lineTo(94,-62).lineTo(94,62).lineTo(-94,62).closePath();
    this.shape.setTransform(198,136);
    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.beginFill("#FF933C")
    .beginStroke().moveTo(-94,62).lineTo(-94,-62).lineTo(94,-62).lineTo(94,62).closePath();
    this.shape_1.setTransform(198,136);
    this.addChild(this.shape_1,this.shape);
).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(378,273,190,126);
)(lib = lib||, images = images||, createjs = createjs||, ss = ss||);
var lib, images, createjs, ss;

现在我被困住了。如何使用 javascript 函数检索（和更改）矩形的颜色？我曾希望这些形状只是画布的子对象，但事实似乎并非如此。

【问题讨论】：

画布上的东西只是图像数据——它们在任何地方都不作为实际实体存在，您需要自己跟踪它们。也就是说，生成的代码似乎正在使用CreateJS，它似乎可以为您执行一些对象跟踪（即new cjs.Shape()）。

【参考方案1】：

关于 Canvas 基本上是位图的早期答案是正确的，但 EaselJS 为您提供了保留的图形模式，因此您可以更改属性并更新舞台/画布以反映它们。

您正在使用 Flash 导出来生成内容，因此您应该能够通过在 HTML 中创建的 exportRoot 访问您的元素。这本质上是 Flash“阶段”，由导出库中的 canvas_test 定义的 EaselJS 容器表示。

exportRoot = new lib.canvas_test();

您可以在 canvas_test 代码中看到，定义了每个“子项”。任何图形都包含在 EaselJS Shape 实例中。还有用于处理组（容器）、位图、文本和动画（电影剪辑）的类。

这是您在上面添加到舞台的导出代码： http://jsfiddle.net/lannymcnie/b5me4xa2/

形状一旦创建就很容易修改，但您必须牢记这一点来定义它们。 Flash 导出并没有真正为您提供这种功能，因为它只是将所有内容导出为单个链接的图形指令列表。但是，您可以很容易地对其进行反省以找到要修改的命令。 警告：这需要 EaselJS 0.7.0+ 才能工作。早期版本不适用于这种方法

您提供的演示有一个矩形。不幸的是，当前版本的 Flash 中存在一个错误，将其导出为 2 个形状，一个用于描边，另一个用于填充。这个例子将修改笔画。

var shape = exportRoot.shape; // Access the shape instance that has the stroke
var stroke = shape.graphics._stroke;
stroke.style = "#ff0000"; // Set to red.

要进行填充，您可以在shape_1 上执行相同的操作，但会影响_fill。这是updated sample

您还可以访问任何指令，并影响它们的属性。您可以在Graphics docs 中看到完整的命令列表（完整列表请参见侧栏）。这是修改笔划上第一个moveTo 命令的快速示例：

var shape = exportRoot.shape;
shape.graphics._activeInstructions[0].x = -110;

您可以在此处查看该代码的示例：http://jsfiddle.net/lannymcnie/b5me4xa2/2/ -- 您必须同时修改填充和描边才能移动它们：)

【讨论】：

请注意，这不是推荐的方法，只是在这个例子中有效。如果您依赖它并更改您的导出，它可能会中断。例如，fill 和 _stroke _sometimes 指向您期望的填充和描边，但可能不是。

【参考方案2】：

Canvas 基本上是一个位图，它没有子级。 SVG 的工作方式更像您想象的那样，但画布只有像素。如果要更改画布，要么必须遍历它并找到像素，要么创建一个表示绘图对象（矩形）的 javascript 对象，将其与画布背景分开，然后重新绘制背景并在有任何更改时提出异议。

[添加] 我不熟悉 Flash CC，但正如评论中指出的那样，也许那里已经有一些能力可以做评论者和我自己所描述的 - 恐怕我不知道。

【讨论】：

你是对的，只是这个例子使用了 EaselJS（从 Flash CC 导出），这是你建议的 JavaScript 对象方法。