Fabric.js：重疊圖像

我建立與jquery畫布的用戶界面和文庫fabric.js和我使用以下代碼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(); 
});

爲適合容器和它的作品如預期，然而，當我點擊圖片縮放/調整它的大小，我沒有看到這些控件除了通過疊加圖像的透明空間之外。控件位於覆蓋圖像後面，是否有強制顯示圖像控件而不必將整個圖像放在覆蓋圖前面的方法？

來源

2012-04-10 user1323065

這裏的問題是疊加圖像被渲染在對象的控件之上。這是預期的行爲。看看this wiki article，它顯示了織物畫布上各種東西的z-index以及它們呈現的順序。

有計劃添加對始終位於頂部的對象控件的支持，正如您從this ticket可以看到的那樣，但我無法告訴您何時會發生這種情況。

您也可以嘗試使用「after：render」回調並將圖像手動繪製到畫布上。

來源

2012-04-10 19:14:04 kangax

剛剛成立的布爾controlsAboveOverlay：

canvas.controlsAboveOverlay = TRUE;

來源

2013-05-02 12:22:05

完美之一，我一直在尋找解決方案。你讓我的一天哥們:) – Innodel 2014-12-23 07:50:52

也爲我工作。非常感謝。 – 2015-05-26 16:46:07

呵呵，男孩，救世主2天后頭痛。感謝+1 – 2017-02-07 10:13:42

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

我不想在疊加圖像上面呈現控件（因爲疊加意味着疊加在我身上）。我只想按照Wiki中的描述完成渲染（默認情況下）。

我只是想知道......正如在Wiki渲染棧中所描述的那樣，控件應該在所有對象之上呈現（默認情況下總是可見），但他們不會（請看kitchensink演示）。

恕我直言，此行爲應該由像canvas.controlsInStack = true這樣的標誌設置。

順便說一句......那件事真的很美！

來源

2016-04-07 16:33:39 George

Fabric.js：重疊圖像

回答

相關問題