Question

在body标签中考虑以下代码：

<div id='div1'></div>
<canvas id='c1' width='1000px', height='400px'></canvas>

现在，在脚本标签下，

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

canvas.on('mouse:down', getMouse);
function getMouse(ev)
{
var pointer = canvas.getPointer(ev.e);
var origX = pointer.x;
var origY = pointer.y;
console.log(origX+', '+origY);
}

在样式标记下

#div1
{
float: right;
position: relative;
border-style: solid;
border-width: 1px;
height: 200px;
width: 200px;
display: inline;
}

每次我点击div元素边界框下面一行的上方时，控制台都会记录y的负值。为什么？有什么问题？

另外，我希望理想情况下画布位于页面中央，两侧各有两个元素，我遵循这里给出的CSS：http://alistapart.com/article/holygrail

发生的事情是div元素都被canvas包装器隐藏了。我该如何解决这个问题？

Answer 1

canvas.calcOffset()

是你需要的......

每当你重新定位canvas时调用上面的方法。

这会计算相对于文档的画布元素偏移量。

此方法也附加为窗口的“resize”事件处理程序。

同时更改位置/尺寸相关属性（左，顶部，比例，角度等）时的object set不会更新对象边框/控件的位置。

如果您需要更新，请致电：

setCoords()。

重新定位画布时，Fabric.js画布坐标的值会更改

1 个答案: