如何从多个图形创建纹理答案

【问题标题】：How to create a texture from multiple graphics如何从多个图形创建纹理
【发布时间】：2017-10-14 02:11:08
【问题描述】：

我是 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/

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

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

所以当我尝试从中创建精灵时，这个示例 sn-p 工作正常：

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 中有我的形状，我继续将其捕获为一个可以创建一个或多个精灵的单个分组的首选方法是什么？

【问题讨论】：

标签： javascript pixi.js

【解决方案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 添加到其中，然后您就拥有了数组

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

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】：

我想通了。我的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 就可以了。

【讨论】：