本文详解如何通过 Fabric.js 的 setControlsVisibility 方法精准隐藏顶部中间旋转控制点（mtr），并配合边框与角点配置，实现简洁无冗余的选中态样式。
本文详解如何通过 fabric.js 的 `setcontrolsvisibility` 方法精准隐藏顶部中间旋转控制点（mtr），并配合边框与角点配置，实现简洁无冗余的选中态样式。
在 Fabric.js 中，当对象被选中时，默认会显示 8 个控制点（4 个角点 + 4 个边中点）及一条矩形边框。其中，顶部中间的控制点（mtr，即 middle-top-rotate）默认用于触发旋转操作，但若你的设计不需要旋转功能，或希望 UI 更简洁（如图示中仅保留 4 个角点），就必须显式禁用它——仅靠修改 borderColor、cornerStyle 等视觉属性是无法移除该控制点的。
✅ 正确做法是调用 setControlsVisibility() 方法，并将对应控制点键设为 false：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
const activeObj = this.canvas.getActiveObject();
if (activeObj) {
activeObj.set({
borderColor: '#6B8BFF',
borderDashArray: [10, 5],
cornerColor: '#FFFFFF',
cornerStrokeColor: '#6B8BFF',
cornerSize: 10,
cornerStyle: 'circle',
transparentCorners: false,
});
// 关键：禁用顶部中间旋转控制点（mtr）
activeObj.setControlsVisibility({
mtr: false, // 隐藏顶部中间控制点（也是默认旋转手柄）
// 其他控制点可按需关闭，例如：
// mb: false, // 底部中点
// ml: false, // 左侧中点
// mr: false, // 右侧中点
// tl: true, // 左上角（默认 true，可省略）
// tr: true, // 右上角
// bl: true, // 左下角
// br: true // 右下角
});
this.canvas.renderAll();
}
? 注意事项：
- setControlsVisibility() 必须在对象已存在且被选中后调用（推荐在 selection:created 或 selection:updated 事件中执行）；
- 控制点键名严格区分大小写，mtr 是 Fabric.js 内置的标准标识符（middle-top-rotate），不可写作 mt 或 topMiddle；
- 若同时禁用了所有边中点（mt, mb, ml, mr）和旋转点（mtr），则仅保留 4 个角点，此时建议将 borderWidth 设为 0 或配合 hasControls = true 保持可操作性；
- 修改后务必调用 canvas.renderAll() 或 activeObj.setCoords() 确保视觉更新。
? 进阶提示：Fabric.js 支持完全自定义控制点布局，可通过重写 fabric.Object.prototype._addControl 或使用 controls 属性传入自定义控制点配置对象，适用于更复杂的交互需求（如仅允许缩放、禁止移动等）。但对于本例中的“去除顶部中间角点+虚线边框+圆角白点”效果，上述 mtr: false 配合视觉样式设置已完全满足。
