html canvas zindex

如何更改畫布內元素的zindex？html canvas zindex

示例代碼：

fabric.Image.fromURL('http://nocookie.net/bw.jpg', function(image) { 
    image.set('left', 200).set('top', 250); 
    canvas.add(image); 
}); 


var helloWorld = new fabric.Text('Hello world!', { 
    left: 0, 
    top: 0, 
    fontfamily: 'delicious_500', 
    zindex: 10 
}); 

canvas.add(helloWorld);

使用fabric.js庫。

以供將來參考：

fabric.Element.html＃bringForward

來源

2011-02-17 Mark

您可以發佈一個例子嗎？ [你真的在畫布上有元素嗎？]（http://www.youtube.com/watch?v=Guwvwp0uSU8） – sdleihssirhc

@sdleihssirhc發佈了一些示例代碼來展示我的意思。我希望能夠設置圖像上方的文字。 – Mark

哇，[fabric.js文檔]（http://kangax.github.com/fabric.js/docs/）是沒用的。 – sdleihssirhc

我不能讓黨的事情，在所有的工作，但這裏是我的猜測，發生了什麼事：

Fabric要求該圖像的URL。當圖像被返回時，結構已經被賦予回調方法，所以當它等待時，它將轉到下一個任務
結構創建Text對象並將其添加到畫布。
最後，它注意到圖像已經加載（您提供的具體示例實際上是404'd），並將其傳遞給回調方法。

由於圖像文本後添加到畫布，我假設面料的作用就像畫布通常會：這是後來添加的東西是對的事情，已經在那裏頂部排出。 ...即使你給了文本一個Z指數。

請記住，我無法讓它工作，只是放棄了。所以完全有可能我完全錯了。如果是這樣，我有另一種理論：

你確定zindex是正確的屬性？如果你是，那麼請嘗試將其在圖像上，還有：

image.set('left', 200).set('top', 250).set('zindex', 5);

如果你不肯定，那麼......你去那裏。

來源

2011-02-17 06:17:00 sdleihssirhc

zindex只是一個隨機猜測。嘗試zIndex以及無濟於事。不知道什麼是房地產。我也嘗試設置圖像。感謝您的幫助+1，我試着在谷歌上查找canvas API，但沒有去。 :( – Mark

@mark我的第一個想法是什麼？嘗試在圖像之前聲明'helloWorld'，然後在添加圖像後將其添加到畫布（即，移動'canvas.add（helloWorld）'，這樣它是*裏面的*圖像功能。） – sdleihssirhc

這樣做的伎倆！謝謝！對不起，我不明白你第一次說這是什麼意思。：P不幸的是仍然沒有想出canvas zindex的api命令，所以問題標題目前有點誤導。但它解決了我目前的問題，非常感謝 – Mark

由於1.1.4 fabric.js版本zIndex的操作的新方法可用：

canvas.moveTo(object, index); 
object.moveTo(index);

我希望這是你想要什麼：

http://jsfiddle.net/Kienz/RRv3g/

來源

2013-11-26 03:23:31 John

html canvas zindex

回答

相關問題