在EaselJS中創建刮刮卡

我一直在試圖在EaselJS中開發刮刮卡。到目前爲止，我已經設法在一個位圖上獲得一個Shape實例，並使用點擊和拖動事件來刪除它，以便下面的圖像變得可見。在EaselJS中創建刮刮卡

我用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"); 
    }; 
}

任何想法？

來源

2015-09-04 uaite

這是一個棘手的問題，無論語言如何。天真的解決方案只是跟蹤用戶在活動區域內「繪製」的路徑的長度，然後揭示它們什麼時候足夠長。這顯然不是很準確，但相當簡單，可能會足夠好。

更準確的方法是獲取cacheCanvas的像素數據，然後檢查每個像素的Alpha值，以瞭解有多少像素是透明的（具有低alpha）。您可以通過僅檢查每N像素（例如，每第5行中的每5個像素將快25倍）來顯着優化這一點。

來源

2015-09-06 00:17:52 gskinner

感謝您的快速回答，gskinner。（：第二種方法似乎是一個好主意，但我有一個問題：當我使用'destination-out'選項從形狀中「擦除」時，「形狀」對象中的點是否改變或僅僅是像素的alpha值（我真正的意思是我可以在不改變我已經擁有的程序的情況下執行'cacheCanvas'的分析，還是應該改變它？） – uaite

從外觀上看，你應該只需分析一下cacheCanvas就行， – gskinner

對，我會試試看，非常感謝！ – uaite

在EaselJS中創建刮刮卡

回答

相關問題