試圖優化算法中的某些顏色在畫布中的百分比

我有以下一小段代碼，我用它來確定畫布上顏色的百分比，在這種情況下，colorData.data返回的顏色是透明的作爲[0,0,0,0]試圖優化算法中的某些顏色在畫布中的百分比

由於我在mouseove上返回這個百分比，因此運行它非常昂貴，試圖優化它。還要記住畫布的顏色不斷變化，所以我需要每次抓取imageData並通過它迭代它。

瓶頸當然都是在scratchPercentage函數中，我需要一種方法來優化這個例子，比如每次只得到新的更改並且不運行所有的圖像數據。

scratchFunc: function(e, $this, event) 
{ 
    e.pageX = Math.floor(e.pageX - $this.canvas_offset.left); 
    e.pageY = Math.floor(e.pageY - $this.canvas_offset.top); 

    $this['scratch' + event](e, $this); 

    if($this.settings['scratch' + event]) 
     $this.settings['scratch' + event](e, $this.scratchPercentage($this)); 
}, 

scratchPercentage: function($this) 
{ 
    var hits = 0; 
    var imageData = $this.ctx.getImageData(0,0,$this.canvas.width,$this.canvas.height) 

    for(var i=0, ii=imageData.data.length; i<ii; i=i+4) 
    { 
     if(
      imageData.data[i] == 0 && 
      imageData.data[i+1] == 0 && 
      imageData.data[i+2] == 0 && 
      imageData.data[i+3] == 0 
     ) hits++; 
    } 

    return hits/($this.pixels) * 100; 
},

來源

2012-02-26 Rob

你可以把例子放在jsfiddle上嗎？ – elclanrs 2012-02-26 00:47:09

開始用這個修改：

scratchPercentage: function($this) 
{ 
    var hits = 0; 
    var imageData = $this.ctx.getImageData(0,0,$this.canvas.width,$this.canvas.height).data 
    var pixels = imageData.length; 

    for(var i=0, ii=pixels; i<ii; i=i+4) 
    { 
     if(
      imageData[i] == 0 && 
      imageData[i+1] == 0 && 
      imageData[i+2] == 0 && 
      imageData[i+3] == 0 
     ) hits++; 
    } 

    return hits/($this.pixels) * 100; 
}

我沒有引用鏈接方便這一點，但保持一個句柄，你的畫布數據陣列省去了解決的位置你的循環像素數據在每次迭代。這實際上會顯着提升性能。同樣，雖然不那麼重要，但您也可以爲數組的大小分配一個變量，以便在每次循環迭代後不必解析該值。

除了這兩個變化，我不認爲你可以讓scratchPercentage()任何精簡。在不知道畫布如何逐幀變化的細節的情況下，我無法爲計算變化提供任何優化建議。根據您的精度需求，您可能會考慮檢查其他所有像素。

我可以想到一個粗略的WebGL解決方案，但它不是直截了當的。最終，如果您沒有任何有關當前幀和之前幀之間變化的一致信息，您將無法真正預先計算該百分比或顯着提高速度。

編輯：根據您的畫布大小，你可以嘗試調整它在內存中拷貝到50％，對做你的計算。這不會是完美的，但它應該是相對準確的。

來源

2012-02-26 02:27:36 Xenethyl

1）降低採樣率。

不要叫，每次鼠標移動事件發生時計算，而是保存mouseX，mouseY的，然後調用一個函數示例中setInterval（實驗間隔值 - 其中，100％的準確，安全值是您的渲染循環的間隔）

，或者使用某種油門功能的像http://documentcloud.github.com/underscore/#throttle

2）如果這個功能沒有被超級準確跳過一些像素

讓我們說每2 for (...; i = i + 8)

來源

2012-02-27 16:02:40 rezoner

試圖優化算法中的某些顏色在畫布中的百分比

回答

相關問題