使用fabric.js转换CANVAS中的鼠标坐标

问题描述

我设计了一个使用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]）每个（function（）{
 var ruler = $（this）.empty（），
 len = Number （$（＃ruler [data-items]）。val（））|| 0，
 item = $（document.createElement（li）），
i; 
 .append（item.clone（）.text（1））; 
 for（i = 1; i< len; i ++）{
 ruler.append（item.clone * 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（）; 
} 
  

解决方案

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

I have designed a ruler using fabric.js and when the user mouses over the specific part of the ruler I want to print to the screen the X-coordinate of the ruler (i.e. not the screen coordinate). Right now the ruler canvas starts at position 37 and ends at 726 relative to the ruler, but the ruler goes from 1 to 4600 (it will always start at 1 but the length of the ruler can change). How to transform the mouse coordinates to accurately reflect it's position on the ruler? Here is the code:

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

解决方案

Use the getPointer merthod on canvas Instance.In your case it should be canvas.getPointer(options.e)which returns an object with x and y properties which represent pointer coordinates relative to canvas.

这篇关于使用fabric.js转换CANVAS中的鼠标坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！