使用Pixi.js的划痕纸牌游戏

Question

我正在尝试使用PIXI.js 2D rendering库创建一个Scratch Card游戏。

我使用Web Canvas api创建了一个原型，创建了一个画布矩阵并使用此方法更改了像素颜色：

cavas2DContext.putImageData(new ImageData, positionX, positionY)

当我尝试使用PIXI.js执行此类操作时，我创建了一个PIXI.Container并使用PIXI.CanvasRenderer进行渲染。

在容器中，我使用PIXI.Stage创建一个阶段矩阵，并在每个阶段内使用PIXI.Sprite创建两个精灵（一个用于随机图像，一个用于覆盖图像）。

当我尝试使用PIXI的CanvasRenderContext2D.putImageData时，我发现了一些困难，甚至没有使封面图像透明。

原型应用透明的ImageData object并操纵某个指定空间（mouseX，mouseY）中的像素，并且它可以工作，但在PIXI.js中实现它时它还没有工作。 / p>

我有一种想法，任何人都可以给我？一些建议将帮助我实现这一目标。

非常感谢，非常感谢!!

干杯

如果Angular.js

中存在PIXI.js和index.html库脚本，这应该会完美运行

TypeScript Snippet

angular.module("App").directive("scratchbox", scratchbox);

function scratchbox(): Object { 

let directive: ng.IDirective = {
    restrict: 'E',
    template: '<div id="renderer"></div> ', //'<div id="scratch-box" style="background-color: #fd583f;"></div>', 
    replace: true,
    link: linkFn
};

return directive;

function linkFn(scope, element, attrs, ctrl): void {

    let scratchBox = element[0];
    let padding = Number(attrs.padding);
    let matrixX = Number(attrs.matrixx);
    let matrixY = Number(attrs.matrixy);
    let width = Number(attrs.width);
    let height = Number(attrs.height);
    let brushSize = Number(attrs.brushsize);
    let fullWidth = width + (matrixX * padding) + (padding * 3);
    let fullHeight = height + (matrixY * padding) + (padding * 3);
    let imgHeight = height / matrixY;
    let imgWidth = width / matrixX;
    let length = matrixX * matrixY;
    let images = [];
    let scratchImage;
    let posX, posY, jumpY, jumpX;   
    let brushImageData = new ImageData(brushSize, brushSize);
    brushImageData.data[0] = 1;
    brushImageData.data[1] = 1;
    brushImageData.data[2] = 1;
    brushImageData.data[3] = 1; // or 0 but should it like this

    images = JSON.parse(JSON.stringify(attrs.images)).split('-').map((current, index, arr) => {
        return current.split(',');
    });


    scratchImage = new Image();
    scratchImage.src = attrs.scratchimage;
    scratchImage.width = imgWidth;
    scratchImage.height = imgHeight;        

    posX = padding;
    posY = padding;
    jumpX = padding;
    jumpY = padding;


    let scratch = '/development/_public/images/scratch.png';
    //let canvas, ctx;      
    let sprite, scratchSprite;  

    let renderer = new PIXI.CanvasRenderer(fullWidth, fullHeight, { backgroundColor : 0xFD583F}); //orange
    console.log(PIXI);

    let stages = [[], [], []];

    let sprites = [[], [], []];

    let scratchSprites = [[], [], []];

    let mainCanvas;


    let stage =  new PIXI.Container();

    scratchBox.appendChild(renderer.view);

    renderer.interactive = true;

    stage.interactive = true;

    mainCanvas = angular.element(scratchBox).find('canvas')[0];

    createMatrix();

    animate();

    function createMatrix(): void {
        for (let row = 0; row < matrixX; ++row) {

            jumpX = padding;

            for (let col = 0; col < matrixY; ++col) {

                //IMAGES CONTAINERS 
                stages[row][col] = new PIXI.Container();
                stages[row][col].x = posX + jumpX;
                stages[row][col].y = posY + jumpY;;
                stages[row][col].height = imgHeight;
                stages[row][col].width = imgWidth;
                stages[row][col].interactive = true;
                stages[row][col].row = row;
                stages[row][col].col = col;
                //stages[row][col].bounds = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
                //stages[row][col].hitArea = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);

                //RANDOM PRIZES SPRITES
                sprites[row][col] = PIXI.Sprite.fromImage(images[row][col]);
                sprites[row][col].cacheAsBitmapboolean = true;
                sprites[row][col].interactive = true;
                sprites[row][col].height = imgHeight;
                sprites[row][col].width = imgWidth;
                sprites[row][col].row = row;
                sprites[row][col].col = col;
                sprites[row][col].position.set(0, 0);
                //sprites[row][col].bounds = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
                //sprites[row][col].hitArea = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);

                //THE SPRITE SCRATCH IMAGE: EACH PRIZE IMAGE HAS IT'S OWN SCRATCHING AREA
                scratchSprites[row][col] = PIXI.Sprite.fromImage(scratch);
                scratchSprites[row][col].cacheAsBitmapboolean = true;
                scratchSprites[row][col].interactive = true;
                scratchSprites[row][col].row = row;
                scratchSprites[row][col].col = col;
                scratchSprites[row][col].height = imgHeight;
                scratchSprites[row][col].width = imgWidth;
                scratchSprites[row][col].position.set(0, 0);
                //scratchSprites[row][col].bounds = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
                //scratchSprites[row][col].hitArea = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);

                stage.addChild(stages[row][col]);
                stages[row][col].addChild(sprites[row][col]);
                stages[row][col].addChild(scratchSprites[row][col]);

                stages[row][col].on('mouseover', mouseover);
                stages[row][col].on('mouseout', mouseout);

                jumpX += imgWidth + padding; 
            }

            jumpY += imgHeight + padding;
        }
    }

    function animate(): void {
        requestAnimationFrame(animate);

        renderer.render(stage);
    }


    let brushImg = '/development/_public/images/red.jpg';

    function brush(event): void {

        let mouseX = event.data.originalEvent.layerX;
        let mouseY = event.data.originalEvent.layerY;

        let row = event.target.row;
        let col = event.target.col;

        //Transparent image way

        // let brushSprite = PIXI.Sprite.fromImage(brushImg);
        // brushSprite.cacheAsBitmapboolean = true;
        // brushSprite.interactive = true;
        // brushSprite.height = 5;
        // brushSprite.width = 5;
        // brushSprite.position.set(mouseX, mouseY);
        //brushSprite._tint = 0x000000;
        //brushSprite.alpha = 1;

        // stage.addChild(brushSprite);


        //Graphics rectangle way

        // let graphics = new PIXI.Graphics();

        // graphics.beginFill(0,0.1);

        // // // set a fill and line style
        // //graphics.alpha = 1;
        // graphics.drawShape(new PIXI.Rectangle(mouseX - 25, mouseY - 25, 50, 50))
        // graphics.endFill();

        // stage.addChild(graphics);

        //Pixel manipulation
        var ctx = new Object(renderer.rootContext.__proto__);
        console.log(ctx)
        renderer.view.getContext('2d').beginPath();
        renderer.view.getContext('2d').putImageData(brushImageData, mouseX - (brushSize / 2), mouseY - (brushSize / 2));
        renderer.view.getContext('2d').fill();
    }

    function mouseover(event): void {
        let row = event.target.row;
        let col = event.target.col;
        stages[row][col].on('mousemove', brush);
    }

    function mouseout(event): void {
        let row = event.target.row;
        let col = event.target.col;

        stages[row][col]._events['mousemove'] = null;
    }
  }
}

HTML

<div id="main-page" class="pages" style="width: 100%;height: 100%;min-width: 100%;min-height: 100%;position: relative;">

<scratchbox 
    width="500" 
    height="500" 
    padding="20" 
    matrixX="3" 
    matrixY="3" 
    brushSize="50" 
    images="/development/_public/images/carr0.jpg,/development/_public/images/carr1.jpg,/development/_public/images/carr2.jpg-/development/_public/images/carr3.jpg,/development/_public/images/carr4.jpg,/development/_public/images/carr5.jpg-/development/_public/images/carr6.jpg,/development/_public/images/carr7.jpg,/development/_public/images/carr8.jpg"
    scratchimage="/development/_public/images/scratch.png"></scratchbox>