本文介绍如何使用 Fabric.js 的 setControlsVisibility 方法精准隐藏对象的顶部中控点（mtr）并去除多余边框，实现自定义选择框样式。
本文介绍如何使用 fabric.js 的 `setcontrolsvisibility` 方法精准隐藏对象的顶部中控点（mtr）并去除多余边框，实现自定义选择框样式。
在 Fabric.js 中，当调用 getActiveObject() 获取当前选中对象后，默认会显示 8 个控制点（4 个角点 + 4 个边中点）以及一条矩形边框。其中，顶部中点控制点（即旋转手柄，标识符为 mtr）常被误认为是“多余边框的一部分”，但它实际独立于边框线存在——即使你已设置 borderColor: 'transparent' 或 hasBorder: false，只要 mtr 可见，用户仍能看到该位置的圆点及关联的旋转线。
要彻底移除顶部中间的控制点（即图中所示的“顶部中控点”），必须显式禁用其可见性。Fabric.js 提供了 setControlsVisibility 方法，支持按键名精细控制每个控制点的显示状态。关键控制点标识符如下：
- tl, tr, bl, br: 四个角点（top-left, top-right, bottom-left, bottom-right）
- mt, mb, ml, mr: 四条边的中点（middle-top, middle-bottom, middle-left, middle-right）
- mtr: 顶部中点旋转手柄（middle-top-rotate），正是你需要隐藏的目标
✅ 正确做法是：在设置对象样式后，紧接着调用 setControlsVisibility 并将 mtr 设为 false：
const activeObj = this.canvas.getActiveObject();
if (activeObj) {
activeObj.set({
borderColor: '#6B8BFF',
borderDashArray: [10, 5],
cornerColor: '#FFFFFF',
cornerStrokeColor: '#6B8BFF',
cornerSize: 10,
cornerStyle: 'circle',
transparentCorners: false,
// 可选：若还需隐藏其他控点（如侧边中点），可一并设置
// hasControls: true, // 确保整体控制点启用（默认 true）
});
// ? 关键：禁用顶部中控点（旋转手柄）
activeObj.setControlsVisibility({
mtr: false
});
// ⚠️ 注意：必须调用 renderAll() 或 requestRenderAll() 才能立即生效
this.canvas.requestRenderAll();
}
? 重要注意事项：
- setControlsVisibility 接收一个对象，键名为控制点缩写，值为布尔值；未指定的控点保持默认可见。
- 仅修改 borderColor 或 hasBorder 无法隐藏 mtr —— 它是独立控件，需单独控制。
- 修改后务必调用 canvas.requestRenderAll()（推荐）或 canvas.renderAll()，否则界面不会实时更新。
- 若需全局生效（所有新创建对象均无顶部旋转点），可在对象创建时统一配置：
fabric.Object.prototype.setControlsVisibility({ mtr: false });
通过以上方式，你就能精准实现如
