Экспорт KinteticJS для SVG?

Question

Можно ли экспортировать Kinetic JS объект в SVG?

Или обходным путем является преобразование холста Kintetic JS в SVG.

EDIT:

Лучше всего использовать fabricJS, поскольку он поддерживает холст рендеринга SVG при работе с объектами ткани.

Я принял ответ Фрогца, так как он также конвертирует холст в svg, не используя какую-либо другую библиотеку для рисования на холсте.

EDIT 2: ОК, я испорчен, библиотека Фрогца обертывает элемент холста, поэтому вы используете его методы для рисования на холсте (я думал, что он просто «прослушивает» на холсте и создает пути SVG). Поэтому лучшим решением является fabricJS.

Answer 1

Лучшим решением является использование Fabric.js!

Answer 2

основно вы можете конвертировать холст base64 PNG, а затем положить его на SVG

может быть, это может помочь вам

http://svgkit.sourceforge.net/tests/canvas_tests.html

Answer 3

Я создал an alpha version of a library, что позволяет расширить формат HTML5 Canvas Контекст такой, что он отслеживает все команды векторного рисования и сохраняет их как элементы SVG массива в свойстве контекста ctx.svgObjects.

Вы можете увидеть библиотеку в действии здесь: http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
Демонстрационная включается запись, рисует несколько фигур на HTML5 Canvas, а затем добавляет «записанные» объекты SVG к SVG контейнера по соседству.

В общем библиотеке:

1. Отслеживает текущей трансформации контекста через SVGMatrix объекта. (Это связано с тем, что HTML5 Context api позволяет установить текущее преобразование в матрицу, но не позволяет получить текущую матрицу.) Он делает это, перехватывая звонки, например translate() и rotate(), и соответственно обновляет матрицу.
2. Перехватывает beginPath() и создает новый элемент SVG Path, а затем перехватывает дополнительные команды, такие как moveTo() и lineTo(), чтобы добавить эквивалентные команды пути к пути SVG.
   • Примечание: не все команды пути поддерживаются или протестированы в библиотеке на момент написания этой статьи.
3. перехватывает fill() и stroke() добавить копию текущего SVG <path> в svgObjects массиву, устанавливая текущую матрицу преобразования, заливки и стили обводки.
   • Примечание: не все стили хода (lineCap, lineJoin, miterLimit) поддерживаются на момент написания этой статьи.
   • Примечание: вызов fill(), за которым следует stroke(), создает два отдельных элемента SVG; нет никакой оптимизации, чтобы отличать этот конкретный случай от инсульта/заполнения, или изменять преобразование или путь между вызовами.
4. перехватывает fillRect() и strokeRect() для создания SVG <rect> элемента.

В этой библиотеке можно выполнить дополнительную работу, чтобы отобразить все команды (а не только команды пути, но также такие вещи, как fillText()). Но это не то, что мне лично нужно, поэтому я не склонен тратить часы на финишную прямую.