kineticjs - createImageRegion對於不透明度> 0的像素不僅1

Question

所以createImageRegion方法會忽略所有像素略微的alpha /不透明度。

你怎麼能使這個函數，以便像素不透明度爲.5或東西將計數hitdetection？

我看着KineticJS。一個colorKey被添加到一個hitregion中，但它將該鍵轉換爲一個沒有alpha的十六進制鍵。我無法弄清楚如何讓這項工作成爲可能。

幫助非常appriciated！

這是魔術發生的地方。但我不理解如何我可以包括均可進行任何種類的transpanacy但0

createImageHitRegion: function (callback) { 
    var canvas = new Kinetic.Canvas(this.attrs.width, this.attrs.height); 
    var context = canvas.getContext(); 
    context.drawImage(this.attrs.image, 0, 0); 
    try { 
     var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight()); 
     var data = imageData.data; 
     var rgbColorKey = Kinetic.Type._hexToRgb(this.colorKey); 
     // replace non transparent pixels with color key 
     for (var i = 0, n = data.length; i < n; i += 4) { 
      data[i] = rgbColorKey.r; 
      data[i + 1] = rgbColorKey.g; 
      data[i + 2] = rgbColorKey.b; 
      // i+3 is alpha (the fourth element) 
     } 

     var that = this; 
     Kinetic.Type._getImage(imageData, function (imageObj) { 
      that.imageHitRegion = imageObj; 
      if (callback) { 
       callback(); 
      } 
     }); 
    } 
    catch (e) { 
     Kinetic.Global.warn('Unable to create image hit region. ' + e.message); 
    } 
} 

像素在i包括：數據第[i + 3] = 255（rgbColorKey.a）不excist，沒有imageevents的在工作了

Answer 1

我找到了答案：

 for (var i = 0, n = data.length; i < n; i += 4) { 
      data[i] = rgbColorKey.r; 
      data[i + 1] = rgbColorKey.g; 
      data[i + 2] = rgbColorKey.b; 
      if (!ignoreAlpha && data[i + 3] > 0) { 
       data[i + 3] = 255; 
      } 
     } 

這種方式，有一點transparancy留下的每一個像素，它會得到一個完整的顏色。所以，如果你原型這kinetixJS它應該工作：

Kinetic.Image.prototype.createImageHitRegion = function (callback, ignoreTransparantPixels) { 
var canvas = new Kinetic.Canvas(this.attrs.width, this.attrs.height); 
var context = canvas.getContext(); 
var _ignoreTransparantPixels; 
if(typeof ignoreTransparantPixels == 'undefined'){ 
    _ignoreTransparantPixels = false; 
} 

context.drawImage(this.attrs.image, 0, 0); 

try { 
    var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight()); 
    var data = imageData.data; 

    var rgbColorKey = Kinetic.Type._hexToRgb(this.colorKey); 
    // replace non transparent pixels with color key 
    for (var i = 0, n = data.length; i < n; i += 4) { 
     data[i] = rgbColorKey.r; 
     data[i + 1] = rgbColorKey.g; 
     data[i + 2] = rgbColorKey.b; 
     if (!_ignoreTransparantPixels && data[i + 3] > 0) { 
      data[i + 3] = 255; 
     } 

     //trace(data[i + 3]); 
     // i+3 is alpha (the fourth element) 
    } 

    var that = this; 
    Kinetic.Type._getImage(imageData, function (imageObj) { 
     that.imageHitRegion = imageObj; 
     if (callback) { 
      callback(); 
     } 
    }); 
} 
catch (e) { 
    Kinetic.Global.warn('Unable to create image hit region. ' + e.message); 
} 

}