如何从多个图形创建纹理

Question

我是 PixiJS 的新手，我正在尝试一些简单的东西，比如绘画应用程序。

我很难尝试将一组形状捕获为一个分组。我对为此工作的代码不感兴趣，因为我想自己解决这个问题；我只是想知道我是否走在正确的道路上，或者我是否需要探索其他一些 PixiJS 概念来获得我需要的东西。

我有一张画布，可以在其中拖动矩形、椭圆形和直线等形状。这些“笔画”被存储为单独的Graphics对象，例如：

var shape = new PIXI.Graphics();
shape.position.set(...);

...

shape.lineStyle(...)
     .beginFill(...)
     .drawRect(...)
     .endFill();

...

stage.addChild(shape);

...

renderer.render(stage);

我还将这些形状保存在数组中：

shapes.push(shape);

现在我已经显示了这些以及可用的笔划顺序，我希望能够以某种方式捕获它们。想象一下，可能会绘制并保存它，或者可能将其用作图库中的缩略图，或者只是将其存储在数据库的后端，最好保留所有原始笔画，以便它们可以按比例放大或缩小想要的。

现在，我只是尝试通过握住这些笔画并再次显示它们，从画布上清除图形，然后放下我所握住的东西。

看看这个例子，我已经能够获得一个纹理，无论我在哪里用鼠标单击，都可以可靠地重现该纹理：

http://jsfiddle.net/gzh14bcn/

这意味着我已经能够使用创建纹理对象的第一部分，并调整第二部分以在单击鼠标时创建和显示精灵。

当我尝试用我自己的代码替换此示例代码来创建纹理本身时，我无法让该部分工作。

所以当我尝试从中创建一个精灵时，这个示例片段工作得很好：

var texture = new PIXI.RenderTexture(renderer, 16, 16);
var graphics = new PIXI.Graphics();
graphics.beginFill(0x44FFFF);
graphics.drawCircle(8, 8, 8);
graphics.endFill();
texture.render(graphics);

仅供参考创建精灵：

var sprite = new PIXI.Sprite(texture);
sprite.position.set(xPos, yPos);

stage.addChild(sprite);

由于我的形状位于shapes数组或 上stage，那么我继续将其捕获为单个分组并从中创建一个或多个精灵的首选方法是什么？

Answer 1

所以基本上你已经知道了如何制作一些PIXI.Graphics形状

var pixiRect = new PIXI.Graphics();
pixiRect.lineStyle(..);
pixiRect.beginFill(..);
pixiRect.drawRect(..);
pixiRect.endFill(..);

（您可以将任意数量的矩形/圆形/形状绘制成一个PIXI.Graphics）

但要将其转换为纹理，您必须告诉渲染器创建它

var texture = renderer.generateTexture(pixiRect);

PIXI.Sprite然后你可以轻松地用这个纹理 创建

var spr = new PIXI.Sprite(texture);

最后一件事是将它添加到你的舞台或数组中，但你也可以做一些空的PIXI.Container，然后添加Child到它，你就得到了你的数组

1. 选项 - 将精灵（从图形创建）添加到舞台

   stage.addChild(spr);

2. 选项 - 将其推送到您的数组

   shapes.push(spr);

3. 选项 - 如果你有的话，var shapes = new PIXI.Container();你可以为你的精灵制作一个容器

   shapes.addChild(spr);

工作示例： https: //jsfiddle.net/co7Lrbq1/3/

编辑：要将画布放置在addChild稍后的上方，这意味着第一个addChild具有zIndex = 0并且每个addChild在最后一个之上添加一个层