时间戳

首页 > 解决方案 > 处理鼠标移过线条对象时的Fabric JS奇怪问题

javascript - 处理鼠标移过线条对象时的Fabric JS奇怪问题

问题描述

我正在开发一个使用 Fabric.js 的对象绘图画布，并且在尝试处理线条时遇到了一些奇怪的问题。为了清楚起见，我创建了一个非常简单的 jsfiddle 来显示我所看到的。它是一个事件检查器，用于检查鼠标是否在一条线上、一个正方形上或任何地方。如果您愿意，对象是可移动的，与固定对象相同。如您所见，如果您尝试将鼠标放在正方形周围，它只会在您实际将指针放在正方形上时触发一个事件。当您尝试靠近线路时，情况会发生变化，我们会看到一个更大的区域会触发此事件。我是否犯了一些微不足道的错误，它是一个错误还是我没有想到的其他东西？谢谢大家的关注

var canvas = new fabric.Canvas('c');

var square = new fabric.Rect({
                    left: 200,
                    top: 100,
                    width: 20,
                    height: 20,
                });

var line = new fabric.Line([0,0,100,100], {
  stroke: 'red',
  strokeWidth: 1,
});
    
canvas.add(square);
canvas.add(line);
    
canvas.on('mouse:move', (e)=>{
    switch (e.target){
    case line:
    {
        console.log("Pointer over a line");
      canvas.backgroundColor="green";
        break;
    }
    case square:
    {
        console.log("Pointer over a square");
      canvas.backgroundColor="blue";
        break;
    }
    default:
    {
        canvas.backgroundColor="white";
        break;
    }
  }
  
  canvas.renderAll();
});

https://jsfiddle.net/arozgkct/3/

标签： javascriptcanvashtml5-canvasfabricjs

解决方案

除了 melchiar 所说的之外，我了解到还有另一种方法可以仅从线路捕获事件，而不是从它周围的边界框捕获事件。如果将来有其他人需要，我会在此处记录。您只需在将行添加到画布后添加这两行

line.perPixelTargetFind = true;
line.targetFindTolerance = 4;

更新后的 jsfiddle 中的完整代码 https://jsfiddle.net/gmto0h58/

推荐阅读