在 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），彻底解决“图标变大但点不中”的常见痛点。