渲染前景对象中的静态对象/鼠标事件不可见的对象

Question

我试图始终将帧渲染在最前端，以进行一种静态剪裁到预定义大小的目的。您可以移动对象，并且边框指示您单击保存时画布将被裁剪到的区域。

没有前台功能，因此我要解决的方法是渲染具有透明填充和单个像素宽笔触的矩形：

var out_frame = new fabric.Rect({
    width: OUTPUT_WIDTH + 2,
    height: OUTPUT_HEIGHT + 2,
    fill: 'rgba(0, 0, 0, 0)',
    selectable: false,
    stroke: 'rgba(0,255,0,1)',
    strokeWidth: 1
});

并确保它停留在其他对象的前面：

canvas.on('object:added', function(e) {
    out_frame.bringToFront();
});

这就是问题所在：即使无法选择框架对象并且该框架对象是透明的，它也会阻止其下面的对象被鼠标操纵。例如，您无法通过单击选择框架下方的对象。尝试此操作时，不会选择框架对象-它是不可选择的，但下面的对象也不会被选择。

有什么建议如何解决这个问题，或者可能如何完全解决这个问题吗？

Answer 1

使用evented设置为false矩形的属性将被“死”。它会被绘制，并且不会发生其他任何事情。

var canvas = new fabric.Canvas('canvas');
var out_frame = new fabric.Rect({
width: 300 + 2,
height: 300 + 2,
fill: 'rgba(0, 0, 0, 0)',
selectable: false,
stroke: 'rgba(0,255,0,1)',
strokeWidth: 1,
evented: false
});

canvas.add(out_frame);

canvas.on('object:added', function(e) {
out_frame.bringToFront();
});

canvas.add(new fabric.Circle({radius: 20, fill:'blue'}));

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" ></script>
    <canvas id="canvas" width=500 height=200 style="height:500px;width:500px;"></canvas>