放射状のピクセルを検出

Question

放射状の要素からの衝突を確認することはできません。

問題は、現在のところ、他の画像がHTML要素でネイティブであるため、ピクセルのみを四角形としてチェックします。

境界線の背景を描いてアルファ透明度を確認するためにキャンバスを使用しています。ここで

this.checkCollision = function checkCollision() { 
    var width = 34; 
    var height = 32; 
    var image = _context.getImageData(_position.x - (height/2), _position.y - (width/2), width, height); 
    var pixels = image.data; 
    var size = image.data.length; 

    // HERE I WANT TO CHECK A RADIAL AREA 
    for(var index = 0; index < size; index += 4) { 
     var RED  = image.data[index]; 
     var GREEN = image.data[index + 1]; 
     var BLUE = image.data[index + 2]; 
     var ALPHA = image.data[index + 3]; 

     if(_debug) { 
      document.querySelector('#debug').innerHTML = JSON.stringify({ 
       POSITION: _position, 
       INDEX:  index, 
       COLOR: { 
        R: RED, 
        G: GREEN, 
        B: BLUE, 
        A: ALPHA 
       } 
      }, 0, 1); 
     } 

     if(ALPHA !== 0) { 
      return true; 
     } 
    } 
    _context.putImageData(image, 0, 0); 
    return false; 
}; 

プレビュー

作業フィドルです：

https://jsfiddle.net/2bLfd6xp/

私はとの衝突をチェックするgetImageDataに放射状の画素範囲を選択することができますどのようにからのアルファ透明度？

var image = _context.getImageData(_position.x - (height/2), _position.y - (width/2), width, height); 

と目に見えないedgesを削除します。

私の考えはここからピクセルデータの配列を変更することです。しかし、これらの不要なピクセルを取り除くために、矩形ベースのピクセル配列から放射状の領域を計算するのがベストプラクティスですか？私は論理的な思考と答え見つけた

var image = _context.getImageData(_position.x - (height/2), _position.y - (width/2), width, height); 

var radial_area = selectRadialArea(image, radius); 

function selectRadialArea(pixelArray, radius) { 
    /* 
     Modify `pixelArray` with given `radius`... 
     All pixels outside the `radius` filled with `null`... 
    */ 
    return theNewArray; 
} 

Answer 1

：サンプルについて

：

まず、我々は2 elemengtsを一時的に描画可能なコンテキストを作成し、この新しい領域に描きます

• 赤矩形
• 透明円/円が先 -composite

はザはUint8ClampedArrayを元Uint8ClampedArrayとを比較するもたらしました。面積がREDであれば、我々はヌル -entriesでピクセルを隠す：

this.rectangleToRadial = function rectangleToRadial(source, width, height) { 
    var test  = document.createElement('canvas'); 
    var context  = test.getContext('2d'); 

    // Create an transparent circle and a red removeable area 
    context.beginPath(); 
    context.fillStyle = 'rgba(255, 0, 0, 1)'; 
    context.fillRect(0, 0, width, height); 
    context.globalCompositeOperation = 'destination-out'; 
    context.arc(width/2, height/2, width/2, 0, 2 * Math.PI); 
    context.fillStyle = 'rgba(0, 0, 0, 1)'; 
    context.fill(); 

    // get the data 
    var destination = context.getImageData(0, 0, width, height); 
    var size  = destination.data.length; 

    // check the pixels 
    for(var index = 0; index < size; index += 4) { 
     var RED  = destination.data[index]; 
     var GREEN = destination.data[index + 1]; 
     var BLUE = destination.data[index + 2]; 
     var ALPHA = destination.data[index + 3]; 

     /* 
      if the >>red removeable area<< is given, null the pixel from the source 
     */ 
     if(RED == 255 && GREEN == 0 && BLUE == 0) { 
      // Remove this from source 
      source.data[index]  = null; 
      source.data[index + 1] = null; 
      source.data[index + 2] = null; 
      source.data[index + 3] = null; 
     } 
    } 

    // Return the source `Uint8ClampedArray` 
    return source; 
}; 

それは簡単だった、私たちが考えるように:)

var image = _context.getImageData(_position.x - (height/2), _position.y - (width/2), width, height); 
    var pixels = this.rectangleToRadial(image, width, height); 

しようとすると、