Координаты холста в Fabric.js имеют смещение

Question

Я только начал с fabric.js, и у меня есть ошибка (вероятно, новичок):

Я использую ткань с jquery со следующим кодом:

$(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.выше.

Кто-нибудь знает, как это исправить или что я делаю не так?

Заранее спасибо, Макфарлейн

Answer 1

Вот ссылка на jsfiddle с некоторыми примерами http://jsfiddle.net/pukster/sdQ7U/2/

Я предполагаю, что fabric.js рассчитывает все от начала координат (средней точки), поскольку он рисует ровно одну четверть прямоугольника даже с холстом, в 10 раз превышающим размер прямоугольника. Я предполагаю, что top и left на самом деле относятся к началу координат, а не к верхней и левой сторонам воображаемой ограничительной рамки. Беда в том, что документации по фабрике очень мало. Есть ли причина, по которой вы используете fabricjs, а не easeljs

РЕДАКТИРОВАТЬ Вот та же скрипка, но с квадратами вместо прямоугольников (это более понятно) http://jsfiddle.net/pukster/sdQ7U/3/

РЕДАКТИРОВАТЬ ОК Теперь я почти абсолютно уверен, что fabric.js использует центр как top / left. Я сорвал их пример с их сайта и наложил его на прозрачную купер-часть, чтобы эти фигуры были закодированы в чистом холсте http://jsfiddle.net/pukster/uathZ/2/ (синяя рамка - это предел элемента canvas).

То, что вы видите, это то, что поля точно смещены наполовину, но круг (я нарисовал только полукруг, иначе он не был бы различим) совершенно перекрыт. Это б / к в HTML Canvas, координаты круга (x,y) относятся к началу координат, а не к верхнему левому углу. Я не беспокоился о треугольнике, потому что моя тригонометрия немного ржавая. Лично я считаю, что вводить в заблуждение термины top и left вводит в заблуждение, когда x и y были бы более представительными и более короткими.

Answer 2

Да, это очень неожиданно и еще более недокументировано.

Обход:

Установить

originX: "left"
originY: "top"

для каждого созданного объекта.

edit : или используйте более простое решение kangax в комментарии ниже.

Answer 3

Я хочу комментировать, но для этого не хватает репутации.Так или иначе, вот что происходит, когда я делаю следующее:

fabric.Object.prototype.originX = "left";
fabric.Object.prototype.originY = "top";

Форма отлично отрисовывается, но когда я выбираю ее для изменения размера или перемещения, она смещается в другое место.Наилучшим подходом, по-видимому, является установка координат для каждого объекта отдельно с помощью метода set ().