我使用fabricJs并希望在缩放时获得鼠标位置

Question

我正在使用fabricJs 库创建矩形并希望在缩放后获得鼠标位置

我使用此代码开始绘制矩形，比例 = 1，它可以正常工作，但是在我放大并单击之后，我得到矩形起点，而不是我单击的点，这是什么原因？

// Create new rectangle
canvas.on('mouse:down', function (options) {
    if (canvas.getActiveObject()) {
        return false;
    }

    started = true;

    ex = (posx);
    ey = (posy);

    var colors = ['#FF8080', '#D5D5E6', '#C0F2C0', '#8080E4', '#CCCCAA'];
    var rectangle_color = colors[Math.floor(Math.random() * colors.length)];

    var square = new fabric.Rect({
        width: 0,
        height: 0,
        left: ex,
        top: ey,
        fill: rectangle_color
    });
    var square = new fabric.Rect({ width: 0, height: 0, left: ex, top: ey, fill: rectangle_color });

    canvas.add(square);
    canvas.setActiveObject(square);
});

Answer 1

您需要鼠标的真实坐标，而不是声明的 posx 和 posy：

canvas.on('mouse:down', function (event) {
    if (canvas.getActiveObject()) {
        return false;
    }
    var pointer = canvas.getPointer(event.e);
    var posx = pointer.x;
    var posy = pointer.y;
    //... 
    //your code
    //...
}