3

したがって、createImageRegionメソッドは、わずかなアルファ/不透明度を持つすべてのピクセルを無視します。

不透明度が0.5程度のピクセルもヒット検出の対象となるように、この関数をどのように作成できますか？

KineticJSを調べました。colorKeyがヒット領域に追加されますが、キーがアルファなしの六角レンチに変換されます。どうすればこれを機能させることができるのかわかりません。

ヘルプは大いに活用されています！

ここで魔法が起こります。しかし、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を含めると：data [i + 3] = 255（rgbColorKey.a）が存在しない場合、どのimageeventも機能しなくなります

4

1 に答える 1

2

私は答えを見つけました：

       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);
}

}

于 2012-12-14T15:39:54.847 に答える