0

私は次のケースを開発しています。

  1. JS で作成された HTML キャンバス。
  2. キャンバスには、星の画像 (アルファ = 0 の背景を持つ png から読み込まれる) とひし形の画像 (アルファ = 0 の背景を持つ png から読み込まれる) があります。
  3. ひし形のイメージが星のイメージに向かって動いています。
  4. 星の画像のみを表示し、ひし形の画像が完全に星の画像の後ろにある場合、alert("Hidden");
  5. ダイヤモンドの複数のピクセルが表示されている場合、アラートは表示されません。

星の背景のアルファ値は 0 であるため、星は長方形ではないため、星のイメージがダイヤモンドのイメージを完全に覆っているかどうかを検出することは困難です。

画像が他の画像で完全に覆われているかどうかを検出するライブラリまたは方法はありますか?

または、JSで実装できるように、このアルゴリズムの名前を知っている人はいますか?

助けてくれてありがとう！

4

1 に答える 1

1

形状が不明なオブジェクトの場合、ピクセル チェックを使用して、オブジェクトが背後にあるかどうかを確認できます。

これを行う方法の完全な例を次に示します。

オンラインデモはこちら

(GameAlchemist はここで修正版を提供しました)

/// basic allocations
var ctx = demo.getContext('2d'),
    os = document.createElement('canvas'),
    octx = os.getContext('2d'),
    w = os.width = demo.width,
    h = os.height = demo.height,

    /// the images
    urlD = 'http://i.imgur.com/U72xIMZ.png',
    urlS = 'http://i.imgur.com/n5rgo11.png',
    imgD = new Image(),
    imgS = new Image(),
    cnt = 2,

    /// check region (optimized)
    rect = [140, 140, 180, 60];

/// load images and when ready, start show    
imgD.crossOrigin = imgS.crossOrigin = 'anonymous';
imgD.onload = imgS.onload = function() {
    cnt--;
    if (cnt === 0) start();
}
imgD.src = urlD;
imgS.src = urlS;

メイン関数は、上で定義した領域内のピクセルをチェックします。最適化するために、検索領域を絞り込むことができます。画像が他のサイズで表示されるかどうかを確認する必要がある場合は、領域を拡張してその領域も確認します。

この関数は、背景と前景の両方が描画されている「ライブ」キャンバスに対して描画された最前面の画像とオフスクリーン キャンバスを比較します。

ライブ キャンバス = オフスクリーン キャンバスの場合、背景画像は表示されません。

function start() {

    octx.drawImage(imgS, (w - imgS.width) * 0.5, 20);

    var x = -50,
        buffer1 = octx.getImageData(rect[0], rect[1], rect[2], rect[3]).data,
        len = buffer1.length;

    loop();

    function loop() {
        ctx.clearRect(0, 0, w, h);
        ctx.drawImage(imgD, x, 130);
        ctx.drawImage(imgS, (w - imgS.width) * 0.5, 20);

        if (compare() === true) {
            info.innerHTML = 'Object is behind!';
            return;
        }

        x += 2;
        if (x < w) requestAnimationFrame(loop);
    }

    function compare() {
        var buffer2 = ctx.getImageData(rect[0], rect[1], rect[2], rect[3]).data,
            i = len - 1;

        while(i--) {
            if (buffer1[i] !== buffer2[i]) return false
        }
        return true;
    }
}
于 2013-09-26T08:47:22.963 に答える