canvas坐标转换屏幕坐标,使用fabric.js转换CANVAS中的鼠标坐标

最新推荐文章于 2023-03-13 11:35:47 发布

胡千山

最新推荐文章于 2023-03-13 11:35:47 发布

阅读量590

点赞数

文章标签： canvas坐标转换屏幕坐标

在fabric.js中创建了一个尺子，当鼠标悬停在尺子的特定部分时，需要显示鼠标在尺子上的X坐标而非屏幕坐标。尺子从37开始到726，对应尺子上的1到4600。通过canvas.getPointer(options.e)获取相对于canvas的鼠标坐标。

摘要由CSDN通过智能技术生成

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