javascript - 如何从多个图形创建纹理

Question

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

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

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

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

...

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

...

stage.addChild(shape);

...

renderer.render(stage);

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

shapes.push(shape);

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

现在，我只是尝试获取这组笔画，并通过按住它们、清除 Canvas 上的图形，然后放下我所握住的内容来再次显示它们。

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

http://jsfiddle.net/gzh14bcn/

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

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

因此，当我尝试从中创建 Sprite 时，此示例代码片段工作正常:

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);

仅供引用，创建 Sprite :

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

stage.addChild(sprite);

由于我的形状位于 shapes 数组或 stage 中，因此我继续将其捕获为单个分组(我可以从中创建)的首选方式是什么一个或多个 Sprite ？

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. 选项 - 将 Sprite (从图形创建)添加到舞台

   stage.addChild(spr);

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

   shapes.push(spr);

3. 选项 - 如果您有var Shapes = new PIXI.Container();，您可以为 Sprite 创建一个容器

   shapes.addChild(spr);

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

编辑:要将 Canvas 放置在上方，您必须稍后添加 addChild 它，这意味着第一个 addChild 具有 zIndex = 0 并且每个 addChild > 在最后一层之上添加一层