在 Fabric.js 中为对象添加自定义控制点时，仅增大 cornerSize 或图标渲染尺寸无法扩展实际可点击区域；需显式设置 sizeX 和 sizeY 属性才能真正扩大交互热区。
在 fabric.js 中为对象添加自定义控制点时，仅增大 `cornersize` 或图标渲染尺寸无法扩展实际可点击区域；需显式设置 `sizex` 和 `sizey` 属性才能真正扩大交互热区。
Fabric.js 的自定义控制点（fabric.Control）默认点击区域由内部 hit-testing 逻辑决定，cornerSize 仅影响视觉渲染尺寸和旋转锚点偏移，并不改变事件捕获范围。许多开发者误以为调大 cornerSize 即可提升点击灵敏度，结果发现鼠标必须精准悬停在原始小区域（约 12×12 px）才触发交互——这正是本问题的核心症结。
正确解法是使用 sizeX 和 sizeY 属性显式声明控制点的交互热区尺寸。这两个属性专用于 hit detection，与渲染逻辑解耦，确保用户即使在图标外围也能稳定触发操作。
以下是修正后的完整示例（关键修改已高亮）：
const canvas = new fabric.Canvas('canvas', {
backgroundColor: "orange"
});
const textInstance = new fabric.IText('Write', {
fontSize: 20,
fill: "white"
});
canvas.centerObject(textInstance);
canvas.add(textInstance);
canvas.setActiveObject(textInstance);
const deleteIcon = "https://cdn-icons-png.flaticon.com/512/3687/3687412.png";
const deleteImg = document.createElement('img');
deleteImg.src = deleteIcon;
// ✅ 正确：使用 sizeX/sizeY 定义点击热区，cornerSize 仅控制渲染大小
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetX: 30,
offsetY: -30,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon(deleteImg),
cornerSize: 50, // 视觉图标大小（不影响点击）
sizeX: 50, // ✅ 真正的水平点击区域（px）
sizeY: 50 // ✅ 真正的垂直点击区域（px）
});
function renderIcon(icon) {
return function(ctx, left, top, styleOverride, fabricObject) {
const size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(icon, -size/2, -size/2, size, size);
ctx.restore();
};
}
function deleteObject(e, transform) {
const obj = transform.target;
canvas.remove(obj);
canvas.requestRenderAll();
}⚠️ 重要注意事项：
- sizeX/sizeY 单位为像素（px），独立于画布缩放或对象缩放比例；
- 若同时设置 cornerSize 与 sizeX/sizeY，前者仅作用于 render 函数中的绘制逻辑，后者专用于事件检测；
- 热区以控制点坐标（x, y 偏移后的位置）为中心对称分布，无需额外计算偏移；
- 在高 DPI 设备上，建议将 sizeX/sizeY 设置为 ≥40，以保障触控友好性。
通过该方案，你既能保持图标高清渲染（cornerSize: 50），又能获得宽裕的点击响应区域（sizeX: 50, sizeY: 50），彻底解决“图标变大但点不中”的常见痛点。
