在前景中呈现静态对象/对象对鼠标事件不可见

Question

我试图渲染一帧总是在最前面，目的是为了一种静态剪裁到预定义的大小。您可以四处移动对象，框架会指示您的 canvas 在您点击保存时将被剪裁的区域。

没有前景功能，所以我采用的方法是渲染具有透明填充和单像素宽描边的矩形：

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

问题在于：尽管框架对象不能 selected 并且是透明的，但它会阻碍其下方的对象被鼠标操作。例如，您不能单击 select 框架下方的对象。当您尝试这样做时，框架对象不会 selected - 它不是 selectable 但下面的对象也不会。

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

Answer 1

使用属性 evented 设置为 false 然后矩形将是 "dead"。它将被绘制，并且不会发生任何其他事情。

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>

Answer 2

我已经有一段时间试图在 2022 年回答这个问题了。使用fabric.js 4.6.0，将“evented”设置为false是不够的，在canvas上添加另一个元素后它会失败，您可以将图像对象设置为function 向后发送

fabric.Image.fromURL(path, (image) => {
  const ch = this.editor?.canvas.getHeight();
  const cw = this.editor?.canvas.getWidth();
  image.backgroundColor = this.color;
  image.selectable = false;
  image.evented = false;

  if (ch !== undefined && cw !== undefined) {
    image.scaleToHeight(ch);
    image.setPositionByOrigin(
      new fabric.Point(cw / 2, ch / 2),
      'center',
      'center'
    );
  }
  this.editor?.canvas.sendBackwards(image, false);
});

在前景中呈现静态对象/对象对鼠标事件不可见

Render static object in foreground / object invisible to mouse events

fabricjs