javascript Fabric.js 中的画布坐标有偏移
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8812086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Canvas coordinates in Fabric.js have offset
提问by McFarlane
I just started with fabric.js and I have a (probably beginner) error:
我刚开始使用fabric.js，我有一个（可能是初学者）错误：
I am using fabric with jquery with the following code:
我正在使用带有 jquery 的结构和以下代码：
$(document).ready(function () {
canvas = new fabric.StaticCanvas('scroller');
canvas.add(
new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' })
);
});
This code should draw a 140x100 Rectangle on the canvas. Sadly, only a quarter of the Rectangle appears. If I change the top and left values to higher numbers, more of the Rectangle appears on the canvas.
这段代码应该在画布上绘制一个 140x100 的矩形。遗憾的是，矩形只出现了四分之一。如果我将顶部和左侧的值更改为更高的数字，则画布上会出现更多的矩形。
So it seems, that the canvas origin is not at 0/0, but at sth. higher.
所以看起来，画布原点不是在 0/0，而是在 sth。更高。
Does someone know how to fix this or what I am doing wrong?
有人知道如何解决这个问题或我做错了什么吗？
Thanks in advance, McFarlane
提前致谢，麦克法兰
回答by puk
Here is a jsfiddle link with some examples http://jsfiddle.net/pukster/sdQ7U/2/
这是一个带有一些示例的 jsfiddle 链接http://jsfiddle.net/pukster/sdQ7U/2/
My guess is that fabric.js calculates everything from the origin (middle point) since it is drawing exactly one quarter of a rectangle even with a canvas 10 times the size of the rectangle. My guess is that topand leftactually refer to the origin and not the top and left sides of the imaginary bounding box. Trouble is there is very little documentation on fabricjs. Is there any reason you are using fabricjs and not easeljs
我的猜测是，fabric.js 从原点（中点）计算所有内容，因为即使画布是矩形大小的 10 倍，它也正好绘制了矩形的四分之一。我的猜测是，top和left实际上是指到原点，而不是顶部和虚边框的左右两侧。问题是关于fabricjs 的文档很少。你有什么理由使用fabricjs而不是easeljs
EDITHere's the same fiddle but with squares instead of rectangles (it is more clear) http://jsfiddle.net/pukster/sdQ7U/3/
编辑这是相同的小提琴，但用正方形而不是矩形（更清楚）http://jsfiddle.net/pukster/sdQ7U/3/
EDITOK I am now almost absolutely certain that fabric.js uses the center as the top/left. I ripped their example off of their siteand overlayed it with the transparent couterpart to those shapes had they been coded in pure canvas http://jsfiddle.net/pukster/uathZ/2/(blue border is the limit of the canvas element).
编辑好的我现在几乎可以肯定fabric.js 使用中心作为top/ left。我从他们的网站上撕下他们的例子，并用透明的 couterpart 将它们覆盖在那些形状上，如果它们是用纯画布编码的http://jsfiddle.net/pukster/uathZ/2/（蓝色边框是画布元素的限制） .
What you see is that the boxes are exactlyoffset by half but the circle (I only drew a semi circle otherwise it would not have been discernable) is perfectly overlapped. This is b/c in HTML Canvas, the circle coordinates (x,y)refer to the origin and not the top left. I did not bother with the triangle b/c my trigonometry is a bit rusty. I personally think it's misleading to use the terms topand left, when xand ywould have been more representative and shorter.
您看到的是，这些框正好偏移了一半，但圆圈（我只画了一个半圆，否则无法辨别）是完全重叠的。这是 HTML Canvas 中的 b/c，圆坐标(x,y)是指原点而不是左上角。我没有打扰三角形 b/c 我的三角学有点生疏。我个人认为使用top和left、何时x和y会更具代表性和更短的术语具有误导性。
回答by citykid
Yes, this is highly unexpected and even more undocumented.
是的，这是非常出乎意料的，甚至更多没有记录。
Workaround:
解决方法：
Set
放
originX: "left"
originY: "top"
for each created object.
对于每个创建的对象。
edit: or use kangax simpler solution in the comment below.
编辑：或在下面的评论中使用 kangax 更简单的解决方案。
回答by StAR_161
I want to comment but lack the reputation to do so. So anyway, here is what happens when I do the following:
我想发表评论，但缺乏这样做的声誉。所以无论如何，当我执行以下操作时会发生以下情况：
fabric.Object.prototype.originX = "left";
fabric.Object.prototype.originY = "top";
The shape gets rendered fine but when I select it for resizing or moving, it gets offset to a different location. The best approach seems to be to set the coordinates for every object separately using the set() method.
形状渲染得很好，但是当我选择它来调整大小或移动时，它会偏移到不同的位置。最好的方法似乎是使用 set() 方法分别为每个对象设置坐标。
