В этой статье будет обзор JavaScript библиотеки bonsai и также основы работы с ней, но если кратко, то она нужна для работы со SVG.
Ещё у нас есть уже подобная статья: Обзор и основы работа с JS библиотекой Snap.svg, там обзор подобной библиотеки.
Как установит bonsai.js:
Установить её очень простая, для этого надо просто создать тег script, и в нём прописать ссылку на скрипт.
1 | <script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script> |
Вот и всё, всё подключено.
Работа с bonsai.js:
Работать с ней тоже достаточно просто, давайте для начала создадим обычный синий квадрат, для этого в HTML надо создать тег в котором будем рисовать.
1 | <div id="svg"></div> |
Теперь в JavaScript рисуем.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Берём элемент, где будим рисовать SVG let svg = document.getElementById("svg"); // Запускаем код для создания SVG картинки bonsai.run(svg, { // Функция для создания квадрата code: function () { // Создаём квадрат let r = new Rect(0, 0, 100, 100).addTo(stage); // Красим квадрат синим r.fill('blue'); }, // Ширина width: 500, // Высота height: 400 }); |
Давайте разберём этот код. Сначала мы получаем объект, где будет рисоваться нашу SVG картинка. Дальше идёт функция, которая настраивает и рисует квадрат, она принимает два параметра, первый это объект где будем рисовать и JSON данные.
В JSON первым параметрам code, функция которая и рисует квадрат, в ней задаётся объект класса Rect, с параметрами позиции по X и Y, также с шириной и высотой, после того как создали этот квадрат, ниже задаём ему цвет.
После параметра code, задаются размеры самого блока, в котором рисуется картинка, ширина 500 и высота 400.
Вот результат программы.
Как видите всё достаточно просто, давайте ещё сделаем круг.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Берём элемент, где будим рисовать SVG let svg = document.getElementById("svg"); // Запускаем код для создания SVG картинки bonsai.run(svg, { // Функция для создания круга code: function () { // Создаём круг let circle = new Circle(100, 100, 50).addTo(stage); // Задаём кругу атрибут цвета circle.attr('fillColor', 'red'); }, // Ширина width: 500, // Высота height: 400 }); |
Как видите не чего ни поменялось, только теперь вместо класса Rect, который создаёт прямоугольник, используем класс Circle, который создаёт круг и вместо метода который добавляет цвет, используем метод для добавление атрибутов, через него добавляем атрибут цвета.
Вот результат.
Как видите это просто круг красного цвета.
Анимация в bonsai.js:
Теперь пришло время анимации, с ней работать очень просто, суть в том, что вы просто меняете атрибуты, и меняется они плавно, вот пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Берём элемент, где будим рисовать SVG let svg = document.getElementById("svg"); // Запускаем код для создания SVG картинки bonsai.run(svg, { // Функция для создания круга code: function () { // Создаём круг let circle = new Circle(100, 100, 50).addTo(stage); // Задаём кругу атрибут цвета circle.attr('fillColor', 'red'); // Делаем анимацию circle.animate('1s', { x: 350, // Меняем позицию по X y: 250, // Меняем позицию по Y fillColor: 'blue', // Меняем цвет }); }, // Ширина width: 500, // Высота height: 400 }); |
Как видите ни чего особо не изменилось, разве что, появился новый метод circle.animate(), как раз его мы сейчас разберём.
Сначала мы в качестве параметра пишем время, сколько должна проигрыватся анимация, у нас одна секунда, но также можно и в миллисекундах, для этого надо написать после цифру вместо s, написать ms, например 650ms.
Дальше в качестве параметра идёт JSON данные с атрибутами которые нужно полинять, в нашем случае это позиция и цвет, и третьим не обязательным параметром может быть настройки самой анимации.
Вывод:
Как видите это достаточно простая JavaScript библиотека bonsai, но лично мне она не особо понравилась, та же библиотека Snap.svg, на мой взгляд не много лучше, но выбирать вам, чем пользоваться.
Если вас она заинтересовала, то смотрите документацию по ней и заходите на официальный сайт.
Подписываетесь на соц-сети:
Оценка:
Загрузка...