重新定位画布时，Fabric.js画布坐标的值会更改 [英] Values of Fabric.js canvas coordinates change when canvas is repositioned

问题描述

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

Consider the following code in the body tag:

<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的负值.为什么?解决办法是什么?

The console logs negative values of y every time I click above the lower line of the bounding box of the div element. Why? What is the fix?

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

Also, I would like to ideally have the canvas in the center of the page flanked by two elements on both sides I followed the CSS given here: http://alistapart.com/article/holygrail

发生的事情是div元素都被画布包装器隐藏了.我该如何解决?

What happens is that the div elements are both hidden by the canvas wrapper. How do I fix this?

推荐答案

canvas.calcOffset() 

是您所需要的..

每当您重新定位画布时，请调用上述方法.

Whenever you reposition canvas call the above method.

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

This calculates canvas element offset relative to the document.

此方法还作为窗口的调整大小"事件处理程序附加.

This method is also attached as "resize" event handler of window.

在更改与位置/尺寸相关的属性(左，上，比例，角度等)时，也用于对象 set 不会更新对象边框/控件的位置.

Also for an object when changing position/dimension -related properties (left, top, scale, angle, etc.) set does not update position of object's borders/controls.

如果您需要更新这些内容，请致电:

If you need to update those, call:

setCoords().

这篇关于重新定位画布时，Fabric.js画布坐标的值会更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！