Fabric JS 处理鼠标移过行时出现的奇怪问题 object

Question

I'm developing an object drawing canvas that uses Fabric.js and i'm encountering some strange issues when trying to deal with lines. To make things clear, i've created a very simple jsfiddle that show what i'm seeing. It's an event inspector that checks if the mouse is over a line, over a square or nowhere. The objects are movable if you want, it's the same with fixed objects. As you can see, if you try to position your mouse around the square, it only fires an event when you actually put the pointer on the square. When you try to go near the line things change and we see a bigger area that fires this event. Am I making some trivial mistake, its a bug or something else that i didn't think of? Thank you all for your interest

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/

Answer 1

Mouse events in FabricJS are always triggered within the bounding box of the object, which means that the bounding dimensions of your line are actually determined by the width and height of your line object. If you'd rather the events be confined to the line itself, draw the line on just one axis and then rotate it by setting an angle value of 45 degrees.

var line = new fabric.Line([0,100,100,100], {
  stroke: 'red',
  strokeWidth: 1,
  angle: 45,
  left: 50
});

https://jsfiddle.net/melchiar/puwgeb02/

Answer 2

In addition to what melchiar said, i learnt that there is another method to capture the event from the line only and not also from the bounding box around it. I document it here if anyone else need in the future. You just have to add these two lines after adding the line to the canvas

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

Complete code in the updated jsfiddle https://jsfiddle.net/gmto0h58/