如何从多个图形创建纹理

问题描述 投票：0回答：3

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

javascript pixi.js
3个回答
8
投票

所以基本上你已经知道如何制作一些

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
都会在最后一个

之上添加一层
0
投票

我想通了。我的

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
就可以了。

0
投票

更新了新的 PIXI v8

container: Container = new Container()
var pixiRect = new Graphics()
for(let i=0; i<100; i++) {
   let x = Math.random() * screenSize.width - screenSize.width
   let y = Math.random() * screenSize.height - screenSize.height
   pixiRect.circle( x, y, 5 ).fill( 0xff0000 )
}
this.container.addChild( pixiRect )
var texture: Texture = game.pixiApp.renderer.generateTexture( pixiRect )

this.sprite = new Sprite( texture )
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.