I am trying to figure out a way I can fill a shape in PIXI.js using a texture created from a canvas. The reason for this is I wanna be able to create a gradient on a normal html canvas, and they make a texture out of it and add it to the pixi stage. Now I can do that, that was the first thing I tested, it works. But the end goal is to create shapes in PIXI.js using the Graphics class and then fill them with my gradient. I do not know how to accomplish this, as the .beginFill() method only accepts a color. How do I fill a shape with a texture? Here is my code. I know the auxillary canvas creation is a little verbose, but that is a problem for later.
$(document).ready(function() {
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);
//Aliases
var Sprite = PIXI.Sprite;
var TextureCache = PIXI.utils.TextureCache;
var resources = PIXI. loader.resources;
function AuxCanvas(id, w, h, color1, color2) {
this.id = id;
this.w = w;
this.h = h;
this.color1 = color1;
this.color2 = color2;
}
// create and append the canvas to body
AuxCanvas.prototype.create = function() {
$('body').append('<canvas id="'+
this.id+'" width="'+
this.w+'" height="'+
this.h+'"></canvas>');
}
// draw gradient
AuxCanvas.prototype.drawGradient = function() {
var canvas = document.getElementById(this.id);
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 800, 0);
gradient.addColorStop(0, this.color1);
gradient.addColorStop(1, this.color2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, this.w, this.h);
}
function setup() {
var graphics = new PIXI.Graphics();
graphics.beginFill(PIXI.Texture.fromCanvas(can1)); //This doesn't work obviously
graphics.drawCircle(60, 185, 40);
graphics.endFill();
stage.addChild(graphics);
renderer.render(stage);
}
var can1 = new AuxCanvas("can1", 800, 600, "green", "yellow");
can1.create();
can1.drawGradient();
var can2 = new AuxCanvas("can2", 800, 600, "blue", "red");
can2.create();
can2.drawGradient();
setup();
})
Allright I figured out a way, actually it was easy. Just make the Graphics object a mask for the sprite created from the html canvas.
function setup() {
var can2 = document.getElementById('can2');
var sprite = new Sprite(PIXI.Texture.fromCanvas(can2))
var graphics = new PIXI.Graphics();
graphics.beginFill();
graphics.drawCircle(300, 300, 200);
graphics.endFill();
sprite.mask = graphics;
stage.addChild(sprite);
renderer.render(stage);
}
Moreover, appending the graphic as a child of the sprite is the best way to go, just need to make sure that they are the same dimentions. With this done, I can move the sprite freely, and it's gradient texture doesn't change, or more precisely, it moves with the sprite. Of course everything has to be equal in dimentions.
var graphics = new PIXI.Graphics();
graphics.beginFill();
graphics.drawCircle(100, 100, 100);
graphics.endFill();
sprite.addChild(graphics);
sprite.mask = graphics;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.