5

jquery と fabric.js ライブラリを使用してキャンバス ユーザー インターフェイスを構築しています。次のコードを使用して、透明なセクションでオーバーレイ png 画像を設定します。

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

また、オーバーレイの背後に画像を追加し、次のコードを使用してコンテナに合わせてサイズを変更しました

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();
});

期待どおりに機能しますが、画像をクリックして拡大縮小/サイズ変更すると、オーバーレイ画像の透明なスペースを除いて、コントロールが表示されません。コントロールはオーバーレイ画像の後ろにあります。画像全体をオーバーレイの前に配置することなく、画像コントロールを強制的に表示する方法はありますか?

4

3 に答える 3

14

ブール値を設定するだけcontrolsAboveOverlayです：

canvas.controlsAboveOverlay = true;
于 2013-05-02T12:22:05.110 に答える
3

ここでの問題は、オーバーレイ イメージがオブジェクトのコントロールの上にレンダリングされることです。これは予期される動作です。この wiki 記事を見てください。ファブリック キャンバス上のさまざまなものの z-index と、それらがレンダリングされる順序が示されています。

このチケットからわかるように、常に最上位にあるオブジェクト コントロールのサポートを追加する計画がありますが、それがいつになるかはわかりません。

「after:render」コールバックを使用して、手動でキャンバスに画像を描画することもできます。

于 2012-04-10T19:14:04.997 に答える