在使用 Fabric.js 处理偏移时 - 最好的方法是什么？
我基本上允许用户绘制一个框，并且我想确保在拖动操作的准确开始和结束坐标处绘制框。
http://jsfiddle.net/mojo5000/P7gAC/4/
...
left: x + width/2 - 8,
top: y + height/2 - 8,
...
我基本上必须对左侧和顶部的值进行一些调整。似乎有效。有更好的方法吗？
最佳答案
您没有考虑 Canvas 元素的位置。 使用以下内容:
var canvas = new fabric.Canvas('c');
canvas.on("after:render", function(){canvas.calcOffset();});
var started = false;
var x = 0;
var y = 0;
var width = 0;
var height = 0;
canvas.on('mouse:down', function(options) {
//console.log(options.e.clientX, options.e.clientY);
x = options.e.clientX;
y = options.e.clientY;
canvas.on('mouse:up', function(options) {
width = options.e.clientX - x;
height = options.e.clientY - y;
var square = new fabric.Rect({
width: width,
height: height,
left: x + width/2 - canvas._offset.left,
top: y + height/2 - canvas._offset.top,
fill: 'red',
opacity: .2
});
canvas.add(square);
canvas.off('mouse:up');
$('#list').append('<p>Test</p>');
});
});
正如您在代码中看到的，canvas 元素的坐标由以下方式给出:canvas._offset.left 和 canvas._offset.top
关于javascript - Fabric.js 偏移解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17328675/