如何移除Fabric.js中可选对象的顶部中间控制点及多余边框？

要实现你想要的样式（移除顶部中间控制点、隐藏顶部边框），可以在现有代码基础上添加两个关键配置，修改后的代码如下：

const activeObj = this.canvas.getActiveObject();
if (activeObj) {
  activeObj.set({
    borderColor: '#6B8BFF',
    // 分边设置边框虚线，隐藏顶部边框，其余边保留原虚线样式
    borderDashArray: {
      mt: [0, 1000], // 顶部边框完全隐藏
      mb: [10, 5],   // 底部边框虚线
      ml: [10, 5],   // 左侧边框虚线
      mr: [10, 5]    // 右侧边框虚线
    },
    cornerColor: '#FFFFFF',
    cornerStrokeColor: '#6B8BFF',
    cornerSize: 10,
    cornerStyle: 'circle',
    transparentCorners: false,
    // 跳过渲染顶部中间的控制点
    cornerSkip: ['mt']
  });
  this.canvas.renderAll(); // 刷新画布生效
}

关键配置说明： #

• cornerSkip: ['mt']：Fabric.js用mt标识「顶部中间」的控制点，添加这个配置后，该控制点会被跳过渲染，直接隐藏。
• 分边设置borderDashArray：将原来的数组改为对象形式，针对四个边分别定义样式：
  • mt（顶部）设置[0, 1000]，表示显示0像素、隐藏1000像素（足够覆盖顶部边框长度），实现顶部边框完全隐藏；
  • mb（底部）、ml（左侧）、mr（右侧）保留你原来的[10,5]虚线样式，维持边框效果。

最后别忘了调用canvas.renderAll()，让修改后的样式立即在画布上生效。

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