fabric.js添加多个线条并且都加上鼠标悬浮事件，层级原因导致不生效

Question

fabric.js 创建多个Line（线条）对象，这些线条是连接在一起的，并设置Line（线条）的鼠标悬浮事件失效，原因是Line（线条）的层级不在最上层，只有最后一次canvas.add的Line（线条）的悬浮事件是生效的。但是如果鼠标选中一条Line（线条），这条线就会到最上层，鼠标悬浮事件就生效了。这个问题该怎么解决

官方文档实在看不懂，焦头烂额的
下方代码是添加线条以及给线条增加鼠标悬浮和鼠标移出线条的事件

this.tree = new fabric.Line([1700, 371, 180, 371], {
  shadow:shadow2,
  stroke: '#FFFFCC',
  strokeWidth: 4
});
this.canvas.add(this.tree)
this.tree.on("mouseover", (opt)=> {
  this.tree.set('stroke','black')
  // tree.set('strokeDashArray',[5, 5])
  // tree.set('stroke','black')
  this.canvas.renderAll();
})
this.tree.on("mouseout", (opt)=> {
  this.tree.set('stroke','#FFFFFF')
  this.canvas.renderAll();
})

有没有懂哥可以给解答一下，万分感谢

Answer 1

这个问题是由于Line对象被其他对象覆盖，导致鼠标事件无法触发。

解决方法：

可以使用canvas.bringToFront()方法将Line对象置于最上层。

this.tree.on("mouseover", (opt)=> {
  this.tree.set('stroke','black')
  this.canvas.bringToFront(this.tree);
  this.canvas.renderAll();
})

可以使用canvas.sendToBack()方法将Line对象置于最下层。

this.tree.on("mouseout", (opt)=> {
  this.tree.set('stroke','#FFFFFF')
  this.canvas.sendToBack(this.tree);
  this.canvas.renderAll();
})

使用canvas.moveTo()方法可以将线条移动到特定的层级。

this.tree.on("mouseover", (opt)=> {
  this.tree.set('stroke','black')
  this.canvas.moveTo(this.tree, 1);
  this.canvas.renderAll();