캔버스에서 텍스처로 Pixi js 채우기

Question

캔버스에서 만든 텍스처를 사용하여 PIXI.js에서 도형을 채울 수있는 방법을 찾으려고합니다. 이유는 일반 html 캔버스에 그라디언트를 만들고 싶고, 텍스처를 만들어 pixi 스테이지에 추가하기 위해서입니다. 이제 그 일을 할 수 있습니다. 그것이 제가 테스트 한 첫 번째 일이었습니다. 그러나 최종 목표는 PIXI.js에서 Graphics 클래스를 사용하여 도형을 만든 다음 그라디언트로 채우는 것입니다. .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;