Pixi JS用画布的纹理填充形状

Question

我正在尝试使用从画布创建的纹理填充Pixi.js中的形状的方法。这样做的原因是我想能够在普通的HTML画布上创建一个梯度，并且它们会从中制成纹理并将其添加到Pixi阶段。现在我可以做到这一点，那是我测试的第一件事，它有效。但是最终目标是使用图形类在Pixi.js中创建形状，然后用我的渐变填充它们。我不知道如何完成此操作，因为.beginfill（）方法只接受颜色。如何用纹理填充形状？这是我的代码。我知道辅助帆布的创作有点冗长，但这是以后的问题。

$(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();
})

Answer 1

我想出了一种方法，实际上很容易。只需使图形对象成为由HTML画布创建的精灵的掩码。

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

此外，

在小时候附加图形是最好的方法，只需确保它们是相同的布置即可。完成此操作后，我可以自由移动精灵，并且它的梯度纹理不会改变，或者更确切地说，它与精灵一起移动。当然，安装中的一切都必须平等。

var graphics = new PIXI.Graphics();
    graphics.beginFill();
    graphics.drawCircle(100, 100, 100); 
    graphics.endFill();
    sprite.addChild(graphics);
    sprite.mask = graphics;