因此,createImageRegion方法忽略所有具有少量alpha/不透明度的像素。
如何使此功能也可用于命中检测,以便不透明度为 .5 或其他像素的像素也计入命中检测?
我研究了KineticJS。颜色键被添加到命中区域,但它会将键转换为没有字母的十六进制键。我想不出如何使这项工作的方法。
帮助非常感激!
这就是魔术发生的地方。但是我不明白我如何包含任何类型的跨性别的像素,但 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);
}
}
当我包括:data[i + 3] = 255 (rgbColorKey.a) 不删除时,所有图像事件都不再起作用
我找到了答案:
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;
}
}
这样,每个还剩下一点透明度的像素都会得到一个完整的颜色。因此,如果您将其原型化为 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);
}
}