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>

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

1 个答案: