Как BonsaiJS может загружать внешние файлы SVG?

Я учусь работать с BonsaiJS и хотел бы импортировать внешнее изображение SVG на сцене.

На http://docs.bonsaijs.org/overview/Path.html я узнал, что существует три способа создания new Path() отправка путей SVG, команд пути или точек пути в качестве аргументов, но для более сложных файлов SVG это слишком хлопотно, чтобы заставить эту работу работать.

Как я могу анимировать мои файлы SVG с помощью библиотеки JS - идеально ли для этого подходит бонсай? Я читал, можно использовать new Bitmap() метод, но SVG превращаются в... растровые изображения.

Я что-то пропустил? Заранее спасибо!

Источник

2 ответа

Решение

В то время кажется, что для BonsaiJS невозможно загрузить внешние SVG, как это возможно для загрузки внешних растровых изображений. Документы BonsaiJS ( http://docs.bonsaijs.org/overview/Path.html) предоставляют три метода для ручной обработки путей из файла SVG отдельно.

Узлы пути

Если ваш SVG содержит <path> узлы (теги), получить значение d Приписать и применить заливку вручную:

SVG

<path id="pathId" fill="#ff6600" d="M54.651,316.878c9.098,19.302,3.208,46.085,11.193,67.117 c0.687,2.48-4.441-0.06-2.581,5.486c9.171,20.188,10.61,52.755,17.331,79.04l-1.88-0.961c1.652,5.139,7.946,8.864,10.469,13.37">

BonsaiJS

var myShape1 = new Path("M54.651,316.878c9.098,19.302,3.208,46.085,11.193,67.117 c0.687,2.48-4.441-0.06-2.581,5.486c9.171,20.188,10.61,52.755,17.331,79.04l-1.88-0.961c1.652,5.139,7.946,8.864,10.469,13.37");
myShape1.fill('#ff6600');

Узлы многоугольника

Если ваш SVG т.е. содержит <polygon> узлы, получить строковое значение points атрибут, разбить эту строку на массив и превратить все строковые элементы в float. Снова также примените заливку вручную:

SVG

<polygon id="polygonId" fill="#FFFFFF" points="76.5,253.5 94.5,165.5 108.5,125.5 128.5,93.5 164.5,66.5 195.891,44.719 254.5,36.5 299.656,36.5 348.5,41.5 414,66 459,102 488,150.5 505.5,218.5 508,331.5 508,390 504.5,424.5 480,463.5 450,509.5 378,554.5 300,566 226,556.5 168,535.5 109.5,476 87,419.5 76.5,339.5 "/>

BonsaiJS

var points = "76.5,253.5 94.5,165.5 108.5,125.5 128.5,93.5 164.5,66.5 195.891,44.719 254.5,36.5 299.656,36.5 348.5,41.5 414,66 459,102 488,150.5 505.5,218.5 508,331.5 508,390 504.5,424.5 480,463.5 450,509.5 378,554.5 300,566 226,556.5 168,535.5 109.5,476 87,419.5 76.5,339.5";
points = points.split(/[\s,]+/).map(function(point) {
  return parseFloat(point);
});
var myShape2 = new Path(points).fill('#ffffff');

Затем...

Определив все детали, можно создать группу и добавить все детали, чтобы "восстановить" исходный образ SVG, т.е.

var myGroup = new Group().addTo(stage);
myShape1.addTo(myGroup);
myShape2.addTo(myGroup);
Источник

На http://docs.bonsaijs.org/overview/Path.html я узнал, что существует три способа создания нового Path(), отправляющего пути SVG, команды пути или точки пути в качестве аргументов, но для более сложных файлов SVG это слишком много хлопот, чтобы сделать эту работу.

Да, Бонсай позволяет вам импортировать SVG (как) Пути.

Как я могу анимировать мои файлы SVG с помощью библиотеки JS - идеально ли для этого подходит бонсай? Я читал, что можно использовать новый метод Bitmap(), но SVG превращаются в... растровые изображения.

Бонсай не позволяет вам импортировать SVG в целом. Только дорожки. Это означает, что Bonsai не предоставляет вам API для доступа к внутренним узлам вашего SVG-файла.

Использование Bitmap API не является способом импорта SVG. Файл SVG рассматривается как любой обычный формат изображения. Это зависит от платформы и средства визуализации, будет ли оно растровым или нет. Это можно сравнить с использованием HTMLImageElement DOM.

Источник
Другие вопросы по тегам