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

【问题标题】：Render static object in foreground / object invisible to mouse events渲染前景中的静态对象/鼠标事件不可见的对象
【发布时间】：2016-03-08 12:37:05
【问题描述】：

我正在尝试始终在最前面渲染一个帧，以便将一种静态剪辑到预定义的大小。您可以四处移动对象，当您点击保存时，框架会指示您的画布将被剪切的区域。

没有前景功能，所以我这样做的方法是渲染具有透明填充和单个像素宽笔划的矩形：

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();
});

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

有什么建议可以解决这个问题，或者如何完全以其他方式解决这个问题？

【问题讨论】：

标签： fabricjs

【解决方案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>

【讨论】：