Обзор и основы работы с JS библиотекой bonsai

bonsai javascript
Метки: /

В этой статье будет обзор JavaScript библиотеки bonsai и также основы работы с ней, но если кратко, то она нужна для работы со SVG.

Ещё у нас есть уже подобная статья: Обзор и основы работа с JS библиотекой Snap.svg, там обзор подобной библиотеки.

Как установит bonsai.js:

Установить её очень простая, для этого надо просто создать тег script, и в нём прописать ссылку на скрипт.

Вот и всё, всё подключено.

Работа с bonsai.js:

Работать с ней тоже достаточно просто, давайте для начала создадим обычный синий квадрат, для этого в HTML надо создать тег в котором будем рисовать.

Теперь в JavaScript рисуем.

Давайте разберём этот код. Сначала мы получаем объект, где будет рисоваться нашу SVG картинка. Дальше идёт функция, которая настраивает и рисует квадрат, она принимает два параметра, первый это объект где будем рисовать и JSON данные.

В JSON первым параметрам code, функция которая и рисует квадрат, в ней задаётся объект класса Rect, с параметрами позиции по X и Y, также с шириной и высотой, после того как создали этот квадрат, ниже задаём ему цвет.

После параметра code, задаются размеры самого блока, в котором рисуется картинка, ширина 500 и высота 400.

Вот результат программы.

Квадрат на bonsai.js

Как видите всё достаточно просто, давайте ещё сделаем круг.

Как видите не чего ни поменялось, только теперь вместо класса Rect, который создаёт прямоугольник, используем класс Circle, который создаёт круг и вместо метода который добавляет цвет, используем метод для добавление атрибутов, через него добавляем атрибут цвета.

Вот результат.

Круг на bonsai.js

Как видите это просто круг красного цвета.

Анимация в bonsai.js:

Теперь пришло время анимации, с ней работать очень просто, суть в том, что вы просто меняете атрибуты, и меняется они плавно, вот пример.

Как видите ни чего особо не изменилось, разве что, появился новый метод circle.animate(), как раз его мы сейчас разберём.

Сначала мы в качестве параметра пишем время, сколько должна проигрыватся анимация, у нас одна секунда, но также можно и в миллисекундах, для этого надо написать после цифру вместо s, написать ms, например 650ms.

Дальше в качестве параметра идёт JSON данные с атрибутами которые нужно полинять, в нашем случае это позиция и цвет, и третьим не обязательным параметром может быть настройки самой анимации.

Вывод:

Как видите это достаточно простая JavaScript библиотека bonsai, но лично мне она не особо понравилась, та же библиотека Snap.svg, на мой взгляд не много лучше, но выбирать вам, чем пользоваться.

Если вас она заинтересовала, то смотрите документацию по ней и заходите на официальный сайт.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: