在 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

不管是哪种语言，这都是一个棘手的问题。天真的解决方案是简单地跟踪用户 "draws" 在活动区域内的路径长度，然后在他们刮擦足够长的时间时显示。这显然不是很准确，但相当简单并且可能已经足够好了。

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

在 EaselJS 中创建刮刮卡

Creating a scratch card in EaselJS

javascript

html

html5-canvas

easeljs