說到fabric.js的層級問題就要說到canvas的數(shù)據(jù)結(jié)構(gòu)了
canvas.objects是一個數(shù)組，里面存儲所有的text,image,rect,group等所有元素
首先canvas的層級是先加進(jìn)來就在下面，后加進(jìn)來的就在最上面
但是因?yàn)閳D片是異步加載，會因?yàn)榫W(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層級問題，因?yàn)橹挥袌D片會出現(xiàn)異步加載，所有只需要針對圖片特殊處理就好了，上面的寫法也解決了Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported等錯誤，設(shè)置img.crossOrigin='Anonymous'；即可解決這個問題。

希望大家喜歡，也希望大家指點(diǎn)錯誤，也可以加入qq群439667347，大家一起討論，一起進(jìn)步，后續(xù)更新中...
fabric.js