Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

torrvic, возможно, Вам нужно добавить -lGLU
Извините за тупой вопрос. У меня при сборке Вашего примера выходит ошибка: "undefined reference to gluLookAt". Не могу найти в какой библиотеке находится эта функция. У меня задано: -lGL -lglut ... Искал в /usr/lib таким образом: nm lib*so* | grep...
Здравствуйте. Спасибо за проект. У меня вопрос, по какой причине определение принадлежности точки многоугольнику работает некорректно, если координаты из больших чисел состоят, например: int[] vertex = new int[] {...
Сейчас проверила нашла причину не запускания // Создание контекста воспроизведения OpenGL и привязка его к панели на форме OpenGLControl1:=TOpenGLControl.Create(Self); with OpenGLControl1 do begin Name:='OpenGLControl1'; //вот тут...
Ну..кажется что то пошло не так http://pp.usera...

Счетчики и рейтинг

Рейтинг@Mail.ru
Среда программирования: 
HTML 5 + JavaScript

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 предоставляет множество возможностей работы с векторной графикой, однако уже на этом этапе изучения можно создавать несложные изображения из геометрических фигур.