Есть ли способ экспортировать элемент canvas с несколькими объектами в html с кодом javascript с использованием fabricjs? Я знаю, что могу экспортировать в JSON или toObject, но это не HTML.Как экспортировать холст в HTML в Fabric.js?
Я обнаружил, что http://canvimation.github.com/ имеет функцию (файл> canvas canvas to html), чтобы экспортировать холст-рисунок в собственный HTML-код. Это возможно с помощью fabricjs?
ткань поддерживает только экспорт в (свой собственный) объект представление, JSON (в основном сериализации этого объекта представления), и SVG.
Если ваша цель - создать что-то в ткани, а затем экспортировать его для использования в среде, которая не поддерживает холст, тогда, возможно, вы можете использовать SVG - до тех пор, пока SVG поддерживается в этой среде.
Вы также должны понимать, что нет такой вещи, как «собственный HTML-код». Существуют разные версии HTML - HTML4, HTML5 и т. Д. Холст считается part of current HTML standard (HTML5). Так что рисовать что-то на холсте можно было определенно «с использованием собственного html-кода»;)
Если вы хотите воссоздать рендеринг ткани без холста и без SVG, тогда в действительности нет ничего, с чем может помочь ткань. Было бы излишне сложно попытаться обеспечить рендеринг без холста сложных форм SVG, изображений (при различных преобразованиях, таких как масштабирование/вращение) и других объектов.
Предположим, я создаю новый многоугольник и поставлю его на переменную. var arrow = fabric.Polygon (points, {fill: "red", left: 1, top: 1}). Затем я могу использовать arrow.set (fill: "green"), чтобы изменить цвет заливки. Проблема в том, когда Я запускаю var js = JSON.stringify (canvas); \t \t canvas.clear(); \t \t canvas.loadFromJSON (js); после очистки холста и загрузки строки JSON я больше не могу изменить цвет с помощью стрелки.set (fill: «green»). – vkefallinos
Так что я могу сохранить переменную, связанную с объектом в строке json? Как я могу передать «id» внутри репозитория json объекта, поэтому я могу вспомнить его после загрузки json для адресации определенных объектов на перезагруженный холст? – vkefallinos
Да, 'arrow' больше не ссылается на объект на холсте после повторного загрузки холста из JSON. В этот момент ткань создала новый набор объектов. Если это единственный элемент на холсте - если вы знаете его «индекс» - вы можете получить его через 'canvas.item (0)' (или 'canvas.item (index)'). В противном случае, я думаю, вам нужно будет расширить вывод 'toJSON' ([см. Как] (https://github.com/kangax/fabric.js/wiki/Adding-extra-object-properties-to-serialized-JSON)), чтобы вернуть какой-то уникальный идентификатор. – kangax
Я не понимаю, что вы подразумеваете под «экспортировать холст в html»: '
перейдите по адресу http://canvimation.github.com/ и попробуйте его. Вы рисуете что-то на canvimation, затем щелкните файл> «export canvas to html» и откроет новое окно, которое отображает рисунок в собственном HTML-коде без библиотеки canvimation. – vkefallinos
Я вижу! Недавно я сделал несколько трюков с экспортом холста. Что вы хотите сделать * с * «экспорт html» после его экспорта: сохранить его, вставить в другую веб-страницу и т. Д.? Редактировать: Я спрашиваю, потому что все, что Экспорт как функция HTML делает в приведенном выше примере, захватывает объект '