Создание скретч-карты в EaselJS

Question

Я пытался разработать скретч-карту в EaselJS. До сих пор мне удалось получить экземпляр 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, а затем проверить значение альфа каждого пикселя, чтобы получить представление о том, сколько пикселей прозрачно (имеют низкую альфу). Вы можете значительно оптимизировать это, только проверяя каждый N пиксель (например, каждый пятый пиксель в каждой пятой строке будет работать быстрее на 25 раз).