Fabric JS实现鼠标悬停虚线边框、移出清除功能咨询

核心思路 #

不直接覆盖对象原有样式，先保存目标元素的原始边框属性，悬停时替换为虚线样式，移出时恢复原属性，避免破坏元素初始样式。

完整代码示例 #

canvas.on('mouse:over', function (opt) {
  const target = opt.target;
  if (!target) return;

  // 保存原始边框属性到自定义字段，避免覆盖原有配置
  target.originalStrokeProps = {
    stroke: target.stroke,
    strokeWidth: target.strokeWidth,
    strokeDashArray: target.strokeDashArray
  };

  // 设置悬停时的虚线边框样式
  target.set({
    stroke: 'red',
    strokeWidth: 3,
    strokeDashArray: [5, 3], // 数组第一个值是实线长度，第二个是间隔长度，可按需调整
    dirty: true
  });
  canvas.requestRenderAll();
});

canvas.on('mouse:out', function (opt) {
  const target = opt.target;
  if (!target || !target.originalStrokeProps) return;

  // 恢复原始边框属性
  target.set(target.originalStrokeProps);
  // 清理自定义字段，避免对象属性冗余
  delete target.originalStrokeProps;
  target.dirty = true;
  canvas.requestRenderAll();
});

关键说明 #

• strokeDashArray：Fabric JS中控制虚线样式的核心属性，可通过调整数组内的数值改变虚线的虚实比例，比如[8,4]会得到更粗长的虚线效果
• 保存原始属性：确保元素本身已有自定义边框样式时，鼠标移出后能完全恢复初始状态
• 清理自定义字段：移除临时存储的originalStrokeProps，避免对象属性残留冗余

内容的提问来源于stack exchange，提问作者Sha