Bonsai.js - это легковесная векторная графическая библиотека с интуитивно понятным API. В данном уроке рассматривается подключение библиотеки и рисование шести базовых геометрических фигур.
Для подключения данной библиотеки можно просто добавить следующую строку в ваш .html файл:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>
Однако тогда библиотека будет работать только при наличии интернета, поэтому лучше скачать её. Для этого переходим по данной ссылке и сохраняем открывшийся файл (правая кнопка мыши -> сохранить как, либо Ctrl+S, либо Command+S). После того, как файл загружен, мы можем подключить скрипт как обычно. В моем случае, файл библиотеки лежит в той же директории, что и мой скрипт, поэтому подключение выглядит следующим образом:
<script src="bonsai-0.4.1.min.js"></script>
Для начала, будем писать наш скрипт прямо внутри .html файла. При этом библиотека лежит в той же директории. "Каркас" будет выглядеть следующим образом:
<!DOCTYPE html> <html> <head> <script src="bonsai-0.4.1.min.js"></script> </head> <body> <div id="movie"></div> <script> /*здесь "movie" - идентификатор контейнера, который будет использоваться для рисования */ bonsai.run(document.getElementById('movie'), { code: function() { //Здесь мы будем пиcать наш код }, width: 600, //Задаем ширину сцены height: 600 //Задаем высоту сцены }); </script> </body> </html>
В bonsai существует 6 основных фигур для рисования: прямоугольник, дуга, окружность, эллипс, многоугольник и звезда. Также библиотека предоставляет универсальный класс Path для создания произвольных путей или кривых задав их координатами каждой точки, командами пути, либо же указанием строки пути согласно спецификации SVG Path. В этом уроке мы рассмотрим только 6 основных фигур.
Создание прямоугольника имеет следующий вид:
var figure1 = new Rect(x, y, width, height, cornerRadius);
где figure1 - произвольное название, x и y - координаты верхнего левого угла прямоугольника, width и height - ширина и высота соответственно, а cornerRadius - коэффициент скругления краёв прямоугольника. Все параметры должны быть целочисленными.
Создадим прямоугольник, покрасим его в красный цвет и отрисуем при помощи соответствующих методов:
var figure1 = new Rect(10, 10, 100, 100); figure1.fill('red'); //заполняем фигуру красным цветом figure1.addTo(stage); //отрисовка
Теперь наш html-файл выглядит так:
<!DOCTYPE html> <html> <head> <script src="bonsai-0.4.1.min.js"></script> </head> <body> <div id="movie"></div> <script> bonsai.run(document.getElementById('movie'), { code: function() { var figure1 = new Rect(10, 10, 100, 100); figure1.fill('red'); figure1.addTo(stage); }, width: 600, height: 600 }); </script> </body> </html>
Если его открыть в браузере, то видим результат:
Создание дуги имеет следующий вид:
var figure2 = new Arc(centerX, centerY, radius, startAngle, endAngle);
где centerX, centerY - координаты центра окружности, radius - радиус окружности, startAngle, endAngle - начальная и конечная точка дуги в радианах.
Добавим к нашему прямоугольнику красный сегмент:
<!DOCTYPE html> <html> <head> <script src="bonsai-0.4.1.min.js"></script> </head> <body> <div id="movie"></div> <script> bonsai.run(document.getElementById('movie'), { code: function() { var figure1 = new Rect(10, 10, 100, 100); figure1.fill('red'); figure1.addTo(stage); var figure2 = new Arc(110, 110, 50, 0, 2); figure2.fill('red'); figure2.addTo(stage); }, width: 600, height: 600 }); </script> </body> </html>
Для создания круга необходимо указать координаты центра и радиус:
var figure3 = new Circle(centerX, centerY, radius)
Аналогично, для эллипса вместо одного радиуса, надо указать два:
var figure4 = new Ellipse(centerX, centerY, radiusX, radiusY)
Добавим зеленые круг и овал в нашу сцену:
<!DOCTYPE html> <html> <head> <script src="bonsai-0.4.1.min.js"></script> </head> <body> <div id="movie"></div> <script> bonsai.run(document.getElementById('movie'), { code: function() { var figure1 = new Rect(10, 10, 100, 100); figure1.fill('red'); figure1.addTo(stage); var figure2 = new Arc(110, 110, 50, 0, 2); figure2.fill('red'); figure2.addTo(stage); var figure3 = new Circle(150, 60, 25); figure3.fill('green'); figure3.addTo(stage); var figure4 = new Ellipse(250, 60, 50, 25); figure4.fill('green'); figure4.addTo(stage); }, width: 600, height: 600 }); </script> </body> </html>
Для создания многоугольника указываем координаты центра, радиус окружности, которая его описывает, а также количество ребер(не менее трех):
var figure5 = new Polygon(centerX, centerY, radius, sides)
Создание звезды аналогично:
var figure6 = new Star(centerX, centerY, radius, rays)
Добавим треугольник и звезду синего цвета:
<!DOCTYPE html> <html> <head> <script src="bonsai-0.4.1.min.js"></script> </head> <body> <div id="movie"></div> <script> bonsai.run(document.getElementById('movie'), { code: function() { var figure1 = new Rect(10, 10, 100, 100); figure1.fill('red'); figure1.addTo(stage); var figure2 = new Arc(110, 110, 50, 0, 2); figure2.fill('red'); figure2.addTo(stage); var figure3 = new Circle(150, 60, 25); figure3.fill('green'); figure3.addTo(stage); var figure4 = new Ellipse(250, 60, 50, 25); figure4.fill('green'); figure4.addTo(stage); var figure5 = new Polygon(80, 220, 70, 3); figure5.fill('blue'); figure5.addTo(stage); var figure6 = new Star(210, 200, 70, 5); figure6.fill('blue'); figure6.addTo(stage); }, width: 600, height: 600 }); </script> </body> </html>
В итоге мы имеем следующее изображение:
Bonsai предоставляет множество возможностей работы с векторной графикой, однако уже на этом этапе изучения можно создавать несложные изображения из геометрических фигур.