Координаты холста в 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"

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

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

Answer 3

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

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

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