fabric.js 中的自定义控件有一个小的可点击区域

Question

我正在尝试在fabric.js中创建自定义控件，但是当我使图标变大时，可点击区域保持不变。

<canvas id="canvas"></canvas>

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;

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
})

function renderIcon(icon) {
    return function renderIcon(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){
    console.log('delete object');
}

我尝试更改图标大小，增加角大小，但没有任何帮助。我在 renderIcon 函数中将图标变大，但可点击区域保持不变，就像我增加cornerSize时一样。

Answer 1

您可以使用 sizeX 和 sizeY。

new fabric.Control({ sizeX: 28, sizeY: 28 });

参考