Fabric.js中的画布坐标具有偏移 [英] Canvas coordinates in Fabric.js have offset

问题描述

我刚刚开始使用fabric.js，我有一个（可能是初学者）错误：

我使用jquery的fabric使用下面的代码：

  $（document）.ready（function（）{
 
 canvas = new fabric.StaticCanvas（'scroller'） ; 
 
 canvas.add（
 new fabric.Rect（{top：0，left：0，width：140，height：100，fill：'＃f55'}）
）; 
 
}）; 
  

此代码应在画布上绘制一个140x100的矩形。
很遗憾，只有四分之一的矩形出现。
如果我将顶部和左边的值改为更高的数字，更多的矩形出现在画布上。

所以看来，画布的起源不是在0/0，但在sth。更高。

有人知道如何解决这个问题或我做错了什么？

McFarlane

解决方案

这里是一个jsfiddle链接，包含一些例子 http://jsfiddle.net/pukster/sdQ7U/2/

我的猜测是fabric.js从原点（中间点）计算一切，因为它正在绘制一个矩形的四分之一，即使是一个画布的矩形的大小的10倍。我的猜测是 top 和 left 实际上是指原点，而不是虚拟边界框的顶部和左侧。麻烦的是在fabricjs有非常少的文档。

编辑这里是同样的小提琴，但是使用正方形而不是矩形（更清楚） http://jsfiddle.net/pukster/sdQ7U/3/

EDIT OK我现在几乎绝对肯定fabric.js使用中心作为 top / left 。我从他们的网站示例中删除了，并用透明couterpart覆盖它们形状已编码在纯画布中 http://jsfiddle.net/pukster/uathZ/2/ （蓝色边框是canvas元素的限制）。

您看到的是盒子完全偏移一半，绘制一个半圆，否则它将不可辨别）完全重叠。这是HTML Canvas中的b / c，圆形坐标（x，y）是指原点而不是左上角。我没有打扰三角形b / c我的三角学是有点生锈。我个人认为 x top 和 left c $ c>和 y 会更具代表性和更短。

I just started with fabric.js and I have a (probably beginner) error:

I am using fabric with jquery with the following code:

$(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.

So it seems, that the canvas origin is not at 0/0, but at sth. higher.

Does someone know how to fix this or what I am doing wrong?

Thanks in advance, McFarlane

解决方案

Here is a jsfiddle link with some examples 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 top and left actually 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

EDIT Here's the same fiddle but with squares instead of rectangles (it is more clear) http://jsfiddle.net/pukster/sdQ7U/3/

EDIT OK I am now almost absolutely certain that fabric.js uses the center as the top/left. I ripped their example off of their site and 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).

What you see is that the boxes are exactly offset 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 top and left, when x and y would have been more representative and shorter.

这篇关于Fabric.js中的画布坐标具有偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！