キャンバスからのテクスチャを使った形状の塗りつぶし

Question

キャンバスから作成したテクスチャを使用して、PIXI.jsの図形を塗りつぶす方法を理解しようとしています。 これは、通常のhtmlキャンバスにグラデーションを作成したいのですが、その中からテクスチャを作成してpixiステージに追加するためです。今私はそれを行うことができます、それは私がテストした最初のものでした、それは動作します。しかし最終的な目標はGraphicsクラスを使って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

私は方法を考え出しましたが、実際は簡単でした。 Graphicsオブジェクトを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); 
} 

さらに、スプライトの子としてグラフィックを追加することは行くための最善の方法である、ちょうど彼らが同じdimentionsであることを確認する必要があります。これで、スプライトを自由に動かすことができます。グラデーションのテクスチャは変化しません。より正確には、スプライトとともに動きます。もちろん、すべては次元が同じでなければなりません。

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