Когда таскаешь по холсту, всё это дело перерисовывается на каждое движение мыши. На десктопных современных браузерах даже такая сложная фигура «работает» довольно быстро. Сам движок я стараюсь писать как можно эффективней; производительность штука важная :)
Есть ещё идеи по некоторым оптимизациям на будущее.
Как раз только что закончил работу над тем чтобы можно было указать точку трансформации. До этого она всегда была в центре объекта. Вот подключил branch с гитхаба, посмотрите как работает — jsfiddle.net/PNb8Y/27/
Да, есть поддержка свободного рисования. Если откроете fabricjs.com/kitchensink/ и нажмёте «Enter drawing mode» внизу справа, можно начинать рисовать — цвет и диаметр кисти меняется. После завершения, кривые автоматически конвертируются в Path объекты, с которыми можно делать всё тоже что и с другими объектами. В будущем планирую добавить дополнительные кисти, и наверное так чтобы легко можно было свои добавлять.
Сохранение/загрузка — это вообще отдельная тема :) У нас довольно серьёзный фокус именно на это; можно сохранять в разные форматы — SVG, object, JSON, data URL. И соответственно подгружать обратно. Об этом — в следующих частях.
Все объекты имеют «type» аттрибут: «rect», «circle», «path», «path-group», и т.д.
А если нужна именно информация о кривых, то конечно её легко можно вытащить из одного из аттрибутов объекта.
Да, конечно. Есть 4 метода для «перемещения» объектов по z-index — bringForward(), sendBackwards(), bringToFront(), sendToBack().
А вообще canvas.getObjects() массив собственно и является стэком видимости объектов. То есть первый добавленный объект будет перекрываться вторым, второй — третьим, и т.д. Так что можно даже вручную поменять порядок как надо.
Когда начинал работать над Fabric 3 года назад, производительность SVG оставляла желать лучшего. Особенно когда имеешь дело со сложными фигурами, их анимацией, и т.д. В SVG всё-таки каждый элемент — это node в документе. DOM всегда был медленным. Сейчас ситуация получше но не намного.
А в Fabric фигуры — это просто Javascript объекты в памяти. Очень лёгкие, не сравнить с элементами. К тому же объекты используют prototypal inheritance; большинство методов вообще только на классах-потомках. Это делает их супер лёгкими — только, по сути дела, набор простых параметров как цвет, ширина, высота, координаты, и т.д.
Мы немного уступаем по документации и демкам Kinetic, Paper, Easel. Но зато строго следим за качеством кода, модулярностью, простотой, и конечно же тестами. А ещё широкая поддержка браузеров из-за того, что используем базовые фичи и избегаем вынюхивания браузеров (browser sniffing).
Я сейчас работаю полностью над отечественным printio.ru — это мой стартап, он русский и направлен на русскую аудиторию :)
Именно для принтио, кстати, я разработал fabric.js. Наш редактор (http://printio.ru/tees/new) на нём полностью основан. Нужна была интерактивность которую (два года назад) только во flash делали. Но вот сделал с помощью canvas и вроде неплохо получилось.
Спасибо за приглашение! А я вот только пытался понять кто же это мог инвайт прислать :)
Насчет непрактичности теста, я в какой то мере согласен. Делал в основном «for fun», но тем не менее, многие вопросы проверяют знание базовых, и довольно важных аспектов — function expressions vs. function declarations, hoisting, scoping, deletion, references, etc.
Если не понимать эти вещи, то в какой то момент скорее всего столкнёшся с проблемами.
Вот посмотрите как мы рендерим знаменитую фигуру тигра состоящую из ~2500 кривых — fabricjs.com/raphael-vs-fabric-complex/
Когда таскаешь по холсту, всё это дело перерисовывается на каждое движение мыши. На десктопных современных браузерах даже такая сложная фигура «работает» довольно быстро. Сам движок я стараюсь писать как можно эффективней; производительность штука важная :)
Есть ещё идеи по некоторым оптимизациям на будущее.
Сохранение/загрузка — это вообще отдельная тема :) У нас довольно серьёзный фокус именно на это; можно сохранять в разные форматы — SVG, object, JSON, data URL. И соответственно подгружать обратно. Об этом — в следующих частях.
Все объекты имеют «type» аттрибут: «rect», «circle», «path», «path-group», и т.д.
А если нужна именно информация о кривых, то конечно её легко можно вытащить из одного из аттрибутов объекта.
Да, конечно. Есть 4 метода для «перемещения» объектов по z-index — bringForward(), sendBackwards(), bringToFront(), sendToBack().
А вообще canvas.getObjects() массив собственно и является стэком видимости объектов. То есть первый добавленный объект будет перекрываться вторым, второй — третьим, и т.д. Так что можно даже вручную поменять порядок как надо.
А в Fabric фигуры — это просто Javascript объекты в памяти. Очень лёгкие, не сравнить с элементами. К тому же объекты используют prototypal inheritance; большинство методов вообще только на классах-потомках. Это делает их супер лёгкими — только, по сути дела, набор простых параметров как цвет, ширина, высота, координаты, и т.д.
Мы немного уступаем по документации и демкам Kinetic, Paper, Easel. Но зато строго следим за качеством кода, модулярностью, простотой, и конечно же тестами. А ещё широкая поддержка браузеров из-за того, что используем базовые фичи и избегаем вынюхивания браузеров (browser sniffing).
Именно для принтио, кстати, я разработал fabric.js. Наш редактор (http://printio.ru/tees/new) на нём полностью основан. Нужна была интерактивность которую (два года назад) только во flash делали. Но вот сделал с помощью canvas и вроде неплохо получилось.
Насчет непрактичности теста, я в какой то мере согласен. Делал в основном «for fun», но тем не менее, многие вопросы проверяют знание базовых, и довольно важных аспектов — function expressions vs. function declarations, hoisting, scoping, deletion, references, etc.
Если не понимать эти вещи, то в какой то момент скорее всего столкнёшся с проблемами.