How to create a texture from multiple graphics

问题

I'm new to PixiJS and I'm trying something simple like a painting application.

I'm having difficulty trying to capture a collection of shapes as a single grouping. I'm not interested in working code for this as I'd like to figure that out on my own; I'm simply interested in knowing whether I'm on the right track or if I need to explore some other PixiJS concepts to get what I need.

I have one canvas in which I can drag shapes such as rectangles, ellipse, and lines. These "strokes" are being stored as individual Graphics objects, for instance:

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

...

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

...

stage.addChild(shape);

...

renderer.render(stage);

I'm also holding onto these shapes in an array:

shapes.push(shape);

Now that I have these displayed as well as have the order of the strokes available, I'd like to be able to capture them somehow. Imagine maybe taking the drawing and saving it, or perhaps using it as a thumbnail in a gallery, or simply just storing it on the back-end in a database, preferably keeping all the raw strokes so that they can be scaled up or down as desired.

For now, I'm simply trying to take this collection of strokes and display them again by holding them, clearing the graphics from my canvas, and then plopping down what I have held.

Looking at this example, I've been able to get a texture that I can reliably reproduce wherever I click with the mouse:

http://jsfiddle.net/gzh14bcn/

This means I've been able to take the first part that creates the texture object, and I tweaked the second part to create and display the sprites when I click the mouse.

When I try to replace this example code with my own code to create the texture itself, I can't get that part to work.

So this example snippet works fine when I try to create a sprite from it:

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 to create sprites:

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

stage.addChild(sprite);

Since I have my shapes in the shapes array or on the stage, what is the preferred way I proceed to capture this as a single grouping from which I can create one or more sprites?

回答1:

So basicaly you've got how to make some PIXI.Graphics shape

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

(You can draw as many rects/circles/shapes as you want into one PIXI.Graphics)

But to convert it to texture you must tell renderer to create it

var texture = renderer.generateTexture(pixiRect);

Then you can easily create PIXI.Sprite from this texture

var spr = new PIXI.Sprite(texture);

And the last thing is to add it to your stage or array, but you can also make some empty PIXI.Container and then addChild to that and you've got your array

option - add sprite (created from graphics) to stage

stage.addChild(spr);
option - push it to your array

shapes.push(spr);
option - if you have var shapes = new PIXI.Container(); you can make a container for your sprites

shapes.addChild(spr);

Working example : https://jsfiddle.net/co7Lrbq1/3/

EDIT: to position your canvas above you have to addChild it later, it means first addChild has zIndex = 0 and every addChild adds a layer on top of last

回答2:

I figured it out. My stage is a container:

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

I changed this to the following:

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

Then, I replaced stage with canvas where appropriate and canvas with canvasRect where appropriate.

Finally, I got my texture with:

var texture = canvas.generateTexture(renderer);

At the moment, this grabbed the entire width/height of the stage, but I think I just need to tweak a bit on how I create my canvas above and I should be fine.

来源：https://stackoverflow.com/questions/46740171/how-to-create-a-texture-from-multiple-graphics

标签

javascript

pixi.js