javascript - 使用 Fabric.js 转换 CANVAS 中的鼠标坐标

Question

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

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

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