說到fabric.js的層級問題就要說到canvas的數(shù)據(jù)結(jié)構(gòu)了
canvas.objects是一個數(shù)組主慰，里面存儲所有的text,image,rect,group等所有元素
首先canvas的層級是先加進(jìn)來就在下面，后加進(jìn)來的就在最上面
但是因為圖片是異步加載饺蔑，會因為網(wǎng)絡(luò)問題最后才加載橄登，然后就覆蓋在文字上面了，就出現(xiàn)了圖片層級問題
先來介紹fabric.js對于層級給出的方法，可以讓元素的層級發(fā)生改變
下移：canvas.sendBackwards(canvas.getActiveObject());
上移：canvas.bringForward(canvas.getActiveObject());
置頂：canvas.bringToFront(canvas.getActiveObject());
置底：canvas.sendToBack(canvas.getActiveObject());
先創(chuàng)建創(chuàng)建文字和image:
var canvas=new fabric.Canvas('canvas');
var img=document.createElement("img");
img.onload=function(){
var canvasImage=newfabric.Image(img,{
left:0,
top:0,
width:0,
height:0
})
canvas.add(canvasImage)
}
img.crossOrigin='Anonymous';
img.src= 'http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png';
var text=new fabric.IText('hello',{
left:0,
top:0,
width:20,
height:20,
fill:'#000',
fontSize:20
})
canvas.add(text)
開始對上面的代碼進(jìn)行修改
var canvas=new fabric.Canvas('canvas');
var img=document.createElement("img");
img.onload=function(){
var canvasImage=newfabric.Image(img,{
left:0,
top:0,
width:0,
height:0歹河，
zIndex:1
})
canvas.add(canvasImage)
for(var b=0;b< canvas._objects.length;b++) {
if(canvasImage.zIndex> canvas._objects[b].zIndex) {
canvas.bringForward(canvasImage); //上移
}else{
canvas.sendBackwards(canvasImage); //下移
}
}
})
img.crossOrigin='Anonymous'; //記得加上齿椅，不然會出現(xiàn)畫布污染（Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported）等錯誤
img.src= 'http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png';
var text=new fabric.IText('hello',{
left:0,
top:0,
width:20,
height:20,
fill:'#000',
fontSize:20,
zIndex:2
})
canvas.add(text)
這樣就解決了image層級問題，因為只有圖片會出現(xiàn)異步加載启泣，所有只需要針對圖片特殊處理就好了涣脚，上面的寫法也解決了Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported等錯誤，設(shè)置img.crossOrigin='Anonymous'寥茫；即可解決這個問題遣蚀。
希望大家喜歡，也希望大家指點錯誤纱耻，也可以加入qq群439667347芭梯，大家一起討論，一起進(jìn)步弄喘，后續(xù)更新中...
fabric.js
