FabricJSのキャンバスに空き領域があり、アラートが表示されていることを確認する必要があります。私はこれがキャンバス上のピクセルを検出することによって行うことができると思うが、私は考えていない。どうやってするか?FabricJSでキャンバス上の空き領域を検出する方法は?
答えて
ピクセルデータを取得するには、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からピクセルを取得する方法と、ピクセルアドレス(インデックス)を取得する方法を示しています。
@ MarkE私は、 'rgba = 0xffffffff'レンダリングの前に、firefox、chrome、edgeでそれを試してみました。' comp = "xor" '次に、すべての白いイメージを描画し、同じピクセルを読み込みました。' rgba = 0x00000000'標準では、ゼロアルファが他のすべてのチャネルについてゼロとマッチすることが必要である。 – Blindman67
私はおそらく間違っていたことを覚えていました。チェックしてくれてありがとう:-) – markE
- 1. Webページの空き領域を検出する方法
- 2. Blackberry - コードからデバイス上の空き領域を見つけ出す方法
- 3. キャンバス上でsvgの色を変更する方法 - Fabricjs
- 4. FabricJSキャンバス、スクロールする親コンテナが子ヒット領域を移動する
- 5. HTML5キャンバス上の複数のクリック領域?
- 6. スイングでキャンバス上の画像の特定の領域を拡大する方法
- 7. 通知領域の位置を検出する方法は?
- 8. ブラウザの空き領域にdivをレンダリングする方法
- 9. イメージ内の最小エネルギー領域を検出する方法
- 10. Aforge.Netの動き検出領域
- 11. Herokuの空き領域
- 12. キャンバス内の特定の領域を消去する方法
- 13. char変数から空き領域を削除する方法
- 14. mysql:空き領域(innodb)
- 15. カーブした領域でタッチイベントを検出/処理する方法は?
- 16. FAT32のデータ領域のディレクトリの終わりを検出する方法は?
- 17. JavascriptとJqueryでクリックアンドドラッグの "キャンバス"ユーザ領域を作成する方法は?
- 18. キャンバスの回転後のキャンバス上のポイントを検出する方法
- 19. オーバーフローメニューのAndroidの空き領域
- 20. テキスト領域の「unselect」イベントの検出
- 21. SQL Serverデータベースの空き領域を見つける最も良い方法は?
- 22. CKEditor領域の検出と操作
- 23. navigationBarHidden = NOのときに「空白」領域を修正する方法
- 24. キャンバスで透明なクリック可能な領域を削除する方法
- 25. ヘッド領域のカスタムフィールドを呼び出す方法は?
- 26. 高度な方形検出(接続された領域で)
- 27. キャンバス上の選択領域のクロップビットマップはどのようにしますか?
- 28. Javaのテキスト領域に出力を表示する方法
- 29. グラフ領域を色で塗る方法
- 30. 非表示のラベルの空き領域を無効にする
ご不明な点はあまりありません。 FabricJSは、ネイティブのhtml5キャンバスが 'getImageData'で行うようなピクセル情報を取得することはありません。基になるFabricJSキャンバス(ネイティブhtml5キャンバス)への参照を取得し、次に.getImageDataを実行する必要があります。 – markE