如何在织物对象上制作 div

Question

HTML:

<div  style='position:absolute; left:0px; width:100%; height:100px; 
background-color:red;z-order:9999;'>
</div>            
<canvas id="c" width="200" height="200"></canvas>

JS:

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

canvas.add(new fabric.Rect({
    left: 50,
    top: 50,
    fill: '#269926',
    width: 100,
    height: 100,
    originX: 'left',
    originY: 'top'
}));

var obj = new fabric.Rect({
    left: 20,
    top: 20,
    fill: '#555555',
    width: 100,
    height: 100,
    originX: 'left',
    originY: 'top'
});
canvas.add(obj).renderAll();
canvas.sendToBack(obj)

这是 jsfiddle

上的演示

如您在演示中所见，红色 div 在后面。

如何将它放在所有 fabricJS 对象前面？

如您所见，我尝试使用 sendToBack 并尝试更改 z 顺序，但没有成功。

Answer 1

这是 z-index 的演示：

demo

 <div  style='position:absolute; left:0px; width:100%; height:100px; background-color:red;z-order:9999; top:0'>
</div>     
<canvas id="c" width="200" height="200" style='z-index:-1'></canvas>

和 dom 操作演示：

demo

如何在织物对象上制作 div

How do I make a div on top of fabric objects

javascript

jquery

html5-canvas

fabricjs