在 EaselJS 中创建刮刮卡

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

不管是哪种语言，这都是一个棘手的问题。简单的解决方案是跟踪用户在活动区域​​内“绘制”的路径的长度，然后在它们划得足够长时显示出来。这显然不是很准确，但相当简单，可能就足够了。

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