FabricJSでキャンバス上の空き領域を検出する方法は？

Question

FabricJSのキャンバスに空き領域があり、アラートが表示されていることを確認する必要があります。私はこれがキャンバス上のピクセルを検出することによって行うことができると思うが、私は考えていない。どうやってするか？

Answer 1

ピクセルデータを取得するには、2Dコンテキストにアクセスする必要があります。 FabricJSでこれを行うには、StaticCanvas.getContext();に電話する必要があります。標準のファブリックキャンバスにプロトタイプチェーンがあります。そこからFabric StaticCanvas doc

は、ピクセルデータを使用して、緑、赤のピクセル、1バイトごとをする4バイトを取得し、インデックスを計算し、する必要があり、単一のピクセルにアクセスするには

var ctx = yourCanvas.getContext(); // your canvas is the Fabric canvas 
var pixelData = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height); 

を使用して取得します青、アルファ。

pixelDataを取得したら、ピクセルを取得する機能。

// pixelData is the pixel data, x and y are the pixel location 
function getPixel(pixelData,x,y){ 
    // make sure the coordinate is in bounds 
    if(x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height){ 
     return { 
      r : 0, 
      g : 0, 
      b : 0, 
      a : 0 
     }; 
    } 
    // get the index of the pixel. Floor the x and y just in case they are not ints 
    var index = Math.floor(x) * 4 + Math.floor(y) * 4 * pixelData.width; 
    // return the pixel data 
    return { 
     r : pixelData.data[index++], 
     g : pixelData.data[index++], 
     b : pixelData.data[index++], 
     a : pixelData.data[index++] 
    }; 
} 

これは、空の領域を見つけるのに役立ちます。アルファがゼロの場合、赤、緑、青もゼロになることに注意してください。上記の関数は非常に遅いので、あなたの問題での使用を意図したものではなく、単にpixelDataからピクセルを取得する方法と、ピクセルアドレス（インデックス）を取得する方法を示しています。