graphics - 如何在 OpenFL 中对图形应用变换

Question

我正在将 JavaScript 库转换为 Haxe。在这个库中，有一个由许多形状构成的动画效果。所以我用了OpenFL渲染形状的库。

但现在我在转换方面遇到了技术问题。 某些形状具有子形状，因此它的变换也应该应用于子形状。 例如，请假设 shapeC 附加到 shapeB 上，并且 shapeB 和 shapeD 也附加到 shapeA 上。在这种情况下，shapeB，shapeD应该由transformA和它们自己的变换两者进行变换，shapeC也应该由transformA，transformB和transformC进行变换。

为了实现这一目标，在一个图形中渲染相同级别的形状并将父级的变换应用于该图形是否是一个好的解决方案？ (在上面的示例中，将 shapeB 和 shapeD 渲染到一个图形，然后将 TransformA 应用于该图形)

我认为从所有父变换计算最终变换并将其应用于该形状的所有顶点并不是一个好的优化解决方案。请给我提供最佳的渲染优化解决方案。 欢迎任何建议。

如果这个问题有任何困惑，请原谅我并让我检查一下。

Answer 1

您可以使用Sprite类:

var parentShape = new Sprite ();
parentShape.graphics.beginFill (0xFF0000);
parentShape.graphics.drawRect (0, 0, 100, 100);

var childShape = new Sprite ();
childShape.graphics.beginFill (0x00FF00);
childShape.graphics.drawCircle (0, 0, 50);
childShape.x = 200;
childShape.y = 200;

parentShape.addChild (childShape);
addChild (parentShape);

每个形状都将使用自己的 Canvas 元素，因此如果您创建了很多形状，您可能会决定在准备好时将其展平为单个图像。这可以使用 cacheAsBitmap 或 bitmapData.draw

parentShape.cacheAsBitmap = true;

...或

removeChild (parentShape);

var bitmapData = new BitmapData (Math.ceil (parentShape.width), Math.ceil (parentShape.height), true, 0);
bitmapData.draw (parentShape);
var bitmap = new Bitmap (bitmapData);
addChild (bitmap);