Question

我是PixiJS的新手，我尝试过简单的绘画应用程序。

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

我有一个画布，我可以在其中拖动矩形，椭圆和线条等形状。这些＆＃34;笔画＆＃34;被存储为单独的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);

FYI创造精灵：

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

stage.addChild(sprite);

由于我在shapes数组或stage中有我的形状，我首先将其作为单个分组捕获它的首选方法是什么，我可以从中创建一个或多个精灵？< / p>

Answer 1

我明白了。我的stage是一个容器：

var stage = new PIXI.Container();
var canvas = new PIXI.Graphics();
canvas.lineStyle(4, 0xffffff, 1);
canvas.beginFill(0xffffff);
canvas.drawRect(canvasStartX, canvasStartY, 500, 600);
canvas.endFill();
stage.addChild(canvas);

我将此更改为以下内容：

var canvas = new PIXI.Container();
var canvasRect = new PIXI.Graphics();
canvasRect.lineStyle(4, 0xffffff, 1);
canvasRect.beginFill(0xffffff);
canvasRect.drawRect(canvasStartX, canvasStartY, 500, 600);
canvasRect.endFill();
canvas.addChild(canvasRect);
stage.addChild(canvas);

然后，我将stage替换为适当的canvas，canvas替换为canvasRect。

最后，我得到了我的纹理：

var texture = canvas.generateTexture(renderer);

目前，这抓住了stage的整个宽度/高度，但我想我只需要调整一下如何在上面创建我的canvas，我应该没事。< / p>

Answer 2

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

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

（您可以根据需要将多个rects / circles / shapes绘制成一个PIXI.Graphics）

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

var texture = renderer.generateTexture(pixiRect);

然后，您可以轻松地从此纹理

创建PIXI.Sprite

var spr = new PIXI.Sprite(texture);

最后一件事就是将它添加到你的舞台或阵列中，但你也可以制作一些空的PIXI.Container，然后将addChild添加到那个并且你已经获得了你的数组

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

stage.addChild(spr);
选项 - 将其推送到您的数组

shapes.push(spr);
选项 - 如果您有var shapes = new PIXI.Container();，则可以为精灵制作容器

shapes.addChild(spr);

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

编辑：要将您的画布定位在上方，您必须addChild稍后，这意味着首先addChild有zIndex = 0，而每addChild都会在最后添加一个

如何从多个图形创建纹理

2 个答案: