Question

我一直在尝试在EaselJS中开发刮刮卡。到目前为止，我已经设法在Bitmap上面获得一个Shape实例，并启用了点击和拖动事件来擦除它，因此下面的图像变得可见。

我已经updateCache()使用compositeOperation方法，这很容易，但这是我的问题：

如何知道用户已从Shape实例中删除了多少，因此我可以设置一个回调函数，例如，下面90％的图像可见？

以下是我正在追求的一个有效例子：http://codecanyon.net/item/html5-scratch-card/full_screen_preview/8721110?ref=jqueryrain&ref=jqueryrain&clickthrough_id=471288428&redirect_back=true

到目前为止，这是我的代码：

function Lottery(stageId) {
    this.Stage_constructor(stageId);

    var self = this;

    var isDrawing = false;
    var x, y;

    this.autoClear = true;      
    this.enableMouseOver();

    self.on("stagemousedown", startDrawing);
    self.on("stagemouseup", stopDrawing);
    self.on("stagemousemove", draw);

    var rectWidth = self.canvas.width;
    var rectHeight = self.canvas.height;

    // Image
    var background = new createjs.Bitmap("http://www.taxjusticeblog.org/lottery.jpg");
    self.addChild(background);

    // Layer above image
    var overlay = new createjs.Shape();
    overlay.graphics
        .f("#55BB55")
        .r(0, 0, rectWidth, rectHeight);
    self.addChild(overlay);
    overlay.cache(0, 0, self.canvas.width, self.canvas.height);

    // Cursor
    self.brush = new createjs.Shape();
    self.brush.graphics
        .f("#DD1111")
        .dc(0, 0, 5);
    self.brush.cache(-10, -10, 25, 25);
    self.cursor = "none";

    self.addChild(self.brush);

    function startDrawing(evt) {
        x = evt.stageX-0.001;
        y = evt.stageY-0.001;
        isDrawing = true;
        draw(evt);
    };

    function stopDrawing() {
        isDrawing = false;
    };

    function draw(evt) {

        self.brush.x = self.mouseX;
        self.brush.y = self.mouseY;

        if (!isDrawing) {
            self.update();
            return;
        }

        overlay.graphics.clear();

        // Eraser line
        overlay.graphics
            .ss(15, 1)
            .s("rgba(30,30,30,1)")
            .mt(x, y)
            .lt(evt.stageX, evt.stageY);

        overlay.updateCache("destination-out");

        x = evt.stageX;
        y = evt.stageY;

        self.update();

        $rootScope.$broadcast("LotteryChangeEvent");
    };
}

有什么想法吗？

Answer 1

无论语言如何，这都是一个棘手的问题。天真的解决方案只是跟踪用户＆＃34;绘制的路径的长度。在活动区域内，然后在它们刮得足够长时显露出来。这显然不是很准确，但相当简单并且可能足够好。

更精确的方法是获取cacheCanvas的像素数据，然后检查每个像素的alpha值以了解有多少像素是透明的（具有低alpha值）。您可以通过仅检查每N个像素来显着优化这一点（例如，每第5行中的每第5个像素运行速度将快25倍）。

在EaselJS中创建一张刮刮卡

1 个答案: