Fabric.js：オーバーレイ画像

Question

の背後にあるイメージ・コントロールは、私はjQueryとfabric.jsライブラリとキャンバスのユーザーインターフェイスを構築していると私は、次のコード

var bgImgSrc = bgImg.attr('src'); 
canvas.setOverlayImage(bgImgSrc, function(img){ 
    canvas.renderAll(); 
}); 

を用いた透明部分で画像をPNG形式オーバーレイを設定します私は/それをリサイズ拡大するには画像をクリックすると、私は見ていない、しかし、私はまた、

var photoImg = $('#img-photo'); 
var photoImgSrc = photoImg.attr('src'); 
fabric.Image.fromURL(photoImgSrc, function(img) { 
    var photoImgWidth = photoImg.width(); 
    var photoImgHeight = photoImg.height(); 
    var hRatio = 380/photoImgWidth; 
    var vRatio = 300/photoImgHeight; 
    var ratio = Math.min(hRatio, vRatio); 
    pImg = img.set({left: 380/2, top: 300/2, angle: 0}) 
    img.scale(ratio).setCoords();  
    canvas.add(pImg); 
    canvas.sendToBack(pImg); 
    canvas.renderAll(); 
}); 

を次のコードを使用してコンテナに合うように、オーバーレイやリサイズした背後に画像を追加し、期待どおりに動作しますオーバーレイ画像の透明なスペースを除いて、コントロール。コントロールはオーバーレイ画像の背後にあります。画像全体をオーバーレイの前に置かなくても、画像コントロールを強制的に表示する方法はありますか？

Answer 1

ここでの問題は、オーバーレイイメージがオブジェクトのコントロールの上にレンダリングされることです。これは予想される動作です。 this wiki articleを見てください。これは、ファブリックキャンバス上のさまざまな物のZ-インデックスとレンダリングの順番を示しています。

this ticketからわかるように、常に上にあるオブジェクトコントロールのサポートを追加する予定ですが、いつ起こるかはわかりません。

"after：render"コールバックを使用して、キャンバスに手動でイメージを描画することもできます。 ;

canvas.controlsAboveOverlay =真：ちょうどブールcontrolsAboveOverlayを設定

Answer 2

Answer 3

canvas.controlsAboveOverlay = true; //did the job... but: 

オーバレイ画像の上にコントロールを表示したくない（オーバレイは私にオーバーレイを意味するため）。私はちょうどWiki（デフォルト）で説明されているように正確にスタックをレンダリングしたいと思います。

Wiki rendering-stackで説明したように、コントロールはすべてのオブジェクトの上にレンダリングする必要があります（デフォルトでは常に表示されますが、デモはkitchensink参照）。

IMHOこの動作は、canvas.controlsInStack = trueのようなフラグで設定する必要があります。

ところで...そのことは本当に美しいです！