使用fabric.js

Question

我使用fabric.js设计了一个标尺，当用户将鼠标悬停在标尺的特定部分上时，我想在屏幕上打印标尺的X坐标（即不是屏幕坐标）。现在，标尺画布从位置37开始，相对于标尺结束于726，但标尺从1变为4600（它始终从1开始，但标尺的长度可以改变）。如何变换鼠标坐标以准确反映它在标尺上的位置？这是代码：

var canvas = new fabric.Canvas('canvas');

line_length = input_len;

adjusted_length = (line_length / 666) * 100;

canvas.add(new fabric.Line([0, 0, adjusted_length, 0], {
    left: 30,
    top: 0,
    stroke: '#d89300',
    strokeWidth: 3
}));

$('#canvas_container').css('overflow-x', 'scroll');
$('#canvas_container').css('overflow-y', 'hidden');

drawRuler();


function drawRuler() {
    $("#ruler[data-items]").val(line_length / 200);

    $("#ruler[data-items]").each(function () {
        var ruler = $(this).empty(),
            len = Number($("#ruler[data-items]").val()) || 0,
            item = $(document.createElement("li")),
            i;
        ruler.append(item.clone().text(1));
        for (i = 1; i < len; i++) {
            ruler.append(item.clone().text(i * 200));
        }
        ruler.append(item.clone().text(i * 200));
    });
}


canvas.add(new fabric.Text('X-cord', {
    fontStyle: 'italic',
    fontFamily: 'Hoefler Text',
    fontSize: 12,
    left: 0,
    top: 0,
    hasControls: false,
    selectable: false
}));

canvas.on('mouse:move', function (options) {
    getMouse(options); 
});


function getMouse(options) {
    canvas.getObjects('text')[0].text =
        "X-coords: " + options.e.clientX  ; //+ " Y: " + options.e.clientY;
    canvas.renderAll();
}

Answer 1

在画布实例上使用getPointer merthod。 在你的情况下，它应该是canvas.getPointer(options.e)，它返回一个具有x和y属性的对象，这些属性表示相对于画布的指针坐标。