Javascript 画布和对象

我正在试验canvas和javascript，想知道是否有一种方法可以将对象分组在一起，这样它们就可以作为一个canvas中的单个对象来处理。所以，作为一个非常简单的例子，假设我有一个被一个较大的未填充圆包围的填充圆。现在，假设我有10个。我想分别移动每个集合，所以有没有办法将每个集合作为单个对象分组？我不想打电话单独移动每个对象

我上面的例子有点简单，因为实际上每个集群中有10或11个对象分组在一起。单独移动集群中的每个对象是一件痛苦的事情，因此我希望能够将它们组合在一起，并进行一次调用以移动它们

---

如有任何建议，将不胜感激

正如评论中指出的，Canvas API中没有支持对象分组的内容。但是，有各种Canvas库，您可以查看哪些库支持这种类型的功能。这可能是开始调查的好地方

例如，支持对象的嵌套和分组。如果您熟悉ActionScript显示列表，您会发现它非常直观，因为API非常相似

您将一个外圆和一个内圆分组并将其作为单个对象进行操作的示例与画架类似：

// Create a stage by getting a reference to the canvas
var stage = new createjs.Stage("canvas");

// Create a container for the circle.
var circle = new createjs.Container();

// Create the outer circle
var outerCircle = new createjs.Shape();
outerCircle.graphics.beginFill("red").drawCircle(0, 0, 40);

// Create the inner circle
var innerCircle = new createjs.Shape();
innerCircle.graphics.beginFill('green').drawCircle(0, 0, 30);

// Add inner and outer circles instance to circle container
circle.addChild(outerCircle);
circle.addChild(innerCircle);

// Now we can move the circle container and its children as a single object
circle.x = circle.y = 40;

// Add circle container instance to stage display list.
stage.addChild(circle);

// Update stage will render next frame
stage.update();

---

您可以使用canvas的“translate”功能来绘制圆组，而无需重新计算

使用“tranlslate”时，组的位置会变得更简单

翻译只是“幕后”的数学，它会将整个团队拖到画布上的一个新位置

你不必为你的每个圆做单独的计算。相反，你只需做一个平移，然后画出你的圆，就好像它们在起始位置一样

以下是如何实现翻译：

      // do a translate to mouseX,mouseY
      // all draws will be now be done RELATIVE to mouseX,mouseY
      // so if we ctx.translate(100,100)
      // then a ctx.rect(0,0,10,10) will actually be drawn at 100,100

      ctx.translate(mouseX,mouseY);

      // draw the ball group
      // notice we didn't have to calculate ANY new positions!!

      drawBallGroup();

      // translate back after we're done

      ctx.translate(-mouseX,-mouseY);

下面是代码和小提琴：

---

我最近做了类似的事情，通过将对象组绘制到屏幕外的内存画布上解决了这个问题。移动此画布实质上是移动组

---

根据你的实际目标，这可能是不灵活的——但这是另一个考虑的选项。

< P>你可以把所有的对象放在一个数组中，然后做一个循环，像这样：

var objects = [
  {x: 200, y: 130, radius: 36, color: "red"}
  ,
  {x: 150, y: 80, radius: 31, color: "blue"}
  ,
  {x: 20, y: 210, radius: 22, color: "green"}
];

for (var i = 0; i < objects.length; i++) {
  context.beginPath();
  context.arc(objects[i].x, objects[i].y, objects[i].radius, 0, Math.PI * 2, false);
  context.fillStyle = objects[i].color;
  context.fill();
  context.closePath();
}

---

：D

不，canvas API没有提供如此高级别的内容。canvas本身不能真正处理对象，只能在其上绘制。您能告诉我们在当前代码中这些对象是如何分组/聚集的吗？

var objects = [
  {x: 200, y: 130, radius: 36, color: "red"}
  ,
  {x: 150, y: 80, radius: 31, color: "blue"}
  ,
  {x: 20, y: 210, radius: 22, color: "green"}
];

for (var i = 0; i < objects.length; i++) {
  context.beginPath();
  context.arc(objects[i].x, objects[i].y, objects[i].radius, 0, Math.PI * 2, false);
  context.fillStyle = objects[i].color;
  context.fill();
  context.closePath();
}