[英]Fabric.js: Image controls behind an overlay image
我正在使用 jquery 和 fabric.js 庫構建一個 canvas 用戶界面,並使用以下代碼設置一個帶有透明部分的疊加 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();
});
它按預期工作,但是,當我單擊圖像以對其進行縮放/調整大小時,除了通過覆蓋圖像的透明空間外,我看不到控件。 控件在疊加圖像后面,有沒有辦法強制顯示圖像控件而不必將整個圖像放在疊加圖像前面?
只需設置 boolean controlsAboveOverlay
:
canvas.controlsAboveOverlay = true;
這里的問題是疊加圖像呈現在對象的控件之上。 這是預期的行為。 看看這篇 wiki 文章,它顯示了 fabric canvas 上各種事物的 z-index 以及它們的呈現順序。
計划添加對始終位於頂部的 object 控件的支持,正如您從這張票中看到的那樣,但我無法告訴您何時會發生。
您也可以嘗試使用“after:render”回調並手動將圖像繪制到 canvas 上。
canvas.controlsAboveOverlay = true; //did the job... but:
我不想在覆蓋圖像上方渲染控件(因為覆蓋對我來說意味着覆蓋)。 我只想完全按照 Wiki 中的描述渲染堆棧(默認情況下)。
我只是想知道...如 Wiki 渲染堆棧中所述,控件應呈現在所有對象的頂部(默認情況下始終可見),但它們不會(查看kitchensink
演示)。
恕我直言,此行為應由canvas.controlsInStack = true
類的標志設置。
對了……那東西真的很漂亮!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.