Fabric.js绘制直线时如何移除选定时的蓝色高亮矩形？

这个蓝色高亮框其实是Fabric.js对象的默认边框/选中状态提示，即使你设置了selectable: false，还有几个默认属性会导致它显示出来，咱们一步步解决：

方法一：完善临时直线的属性配置 #

你需要在创建temp_line时，额外添加几个属性来完全禁用对象的交互和边框显示：

var points = [pointer.x, pointer.y, pointer.x, pointer.y]; 
temp_line = new fabric.Line(points, { 
  strokeWidth: 1, 
  stroke: '#ff0000', 
  selectable: false,       // 禁止选中
  hasBorders: false,       // 隐藏对象边框
  hasControls: false,      // 隐藏控制手柄
  hasRotatingPoint: false, // 隐藏旋转控制点
  evented: false           // 禁止对象响应鼠标事件
}); 
$canvas.add(temp_line)

为什么这些属性有用： #

• selectable: false只是禁止对象被选中，但默认情况下对象仍会响应鼠标事件（evented: true），可能触发临时的高亮状态；
• hasBorders: false直接关闭对象的边框渲染，彻底消除蓝色框的来源；
• evented: false让对象完全不参与鼠标交互，从根源上避免触发任何选中/高亮逻辑。

方法二：临时禁用画布的选择功能 #

如果蓝色框是画布的全局选择框（而非直线对象自身的边框），你可以在绘制过程中临时关闭画布的选择功能，绘制完成后再恢复：

// 鼠标按下时：
$canvas.selection = false; // 关闭画布选择
// 然后添加temp_line的代码...

// 鼠标松开时（完成绘制）：
$canvas.selection = true; // 恢复画布选择
// 这里可以把temp_line转为正式对象，或者做其他收尾处理

这两种方法结合使用，就能彻底解决你遇到的蓝色高亮矩形问题啦！

内容的提问来源于stack exchange，提问作者Wai Yan Hein