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

时间:2015-06-16 11:26:23

标签: javascript fabricjs

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

我使用此代码开始绘制矩形,在scale = 1,它工作正常但是在我放大后例如点击我得到点的矩形起点而不是我点击,是什么原因造成的? / p>

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

1 个答案:

答案 0 :(得分:3)

您需要鼠标的真实坐标,而不是某些范围声明为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
    //...
}