在 Fabric JS 上用鼠标绘制虚线边框

Question

当鼠标悬停在 Fabric js 组件上时，我需要添加这种破折号边框。我想用鼠标移出事件清除它

我该如何处理？有什么建议吗？

我尝试了罢工，它有效，但我需要破折号边框，有什么建议吗？

canvas.on('mouse:over', function (opt) {
  const t1 = opt.target;
  if (t1) {
    t1.set({
      stroke: 'red',
      strokeWidth: 3,
      dirty: true
    });
    canvas.requestRenderAll();
  }
});

canvas.on('mouse:out', function (opt) {
  const t1 = opt.target;
  if (t1) {
    t1.set({
      stroke: 'black',
      strokeWidth: 0,
      dirty: true
    });
    canvas.requestRenderAll();
  }
});

Answer 1

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

    canvas.on('mouse:out', function (opt) {
       canvas.clearContext(canvas.contextTop);
    });