Drawing on canvas

Введение. ◄ Содержание ► Многогранник октагон Часть Ⅰ.

Черчение на холсте при помощи библиотеки canvas2D

Для отображения объектов на холсте создана специальная библиотека canvas2D, которая позволяет использовать на нем прямоугольную декартову систему координат с привычным направлением осей X и Y.

В стандартной системе координат принятой в HTML5 для холста (canvas) координаты отсчитываются от точки находящейся в левом верхнем углу, которая принята за начало координат. Координаты увеличиваются в горизонтальном направлении вдоль оси X и в вертикальном - вниз вдоль оси Y. Такой выбор направления осей отличается от выбора осей в аналитической геометрии в которой ось Y направлена вверх.

Так как в дальнейшем мы предполагаем отображать на холсте проекции геометрических объектов (моделей) на плоскость OXY, то необходимо согласовать систему координат в которой производится расчет положения вершин этих объектов со стандартной системой координат холста HTML5. Все расчеты координат вершин геометрических объектов в дальнейшем будут производиться при помощи JS библиотеки WebGeometry (сокращенно - WG) в которой используется система координат совпадающая с системой координат принятой в аналитической геометрии. Поэтому при выводе изображений на холст требуется направить ось Y не вниз как в стандартной системе координат холста HTML5, а вверх.

Численные значения координат в HTML5 Canvas выражаются в пикселах. В расчетах координат вершин моделей, которые мы создадим, будут получаться как положительные так и отрицательные значения. Поэтому потребуется поместить начало координат скорее всего не в левый верхний угол холста, а в какое-то другое место на холсте.

Предположим, что в нашей декартовой системе координат значения лежат в интервале от -3 до 3, а холст имеет размеры 700 x 400 пикселов. Поэтому потребуется привести в соответствие (масштабировать) эти величины. Сам холст, который имеет фиксированные размеры, можно рассматривать просто как некоторое окно, через которое мы рассматриваем изображения объектов на плоскости и находящейся на этой плоскости декартовой системе координат OXY. Нажмите левую клавишу мыши и перемещайте мышь по холсту в online-программе помещенную на данную WEB-страницу. Вы увидете как на холсте (за окном) изменяется вид изображения - появляются новые геометрические объекты. При помощи поворота колесика мыши (если мышь находится на холсте) можно осуществлять масштабирование изображений объектов.

Рассмотрим как использовать функции библиотеки canvas2D (справочник по функциям этой библиотеки можно найти перейдя по ссылке Canvas2d Reference). В файле canvas_draw.js находится исходный текст показанной выше online-программы.

Прежде всего в программе необходимо объявить и задать значения глобальных переменных xC, yC и SCALE:

	 SCALE задает исходный масштаб при рисовании проекции модели на плоскость OXY,
	Представим, что значения координат модели в WebGeometry по X и Y
	находятся в пределах от -3.0 до +3.0, а холст имеет размеры 770 x 400.
	 Для приведения в соответствии значений в этих двух системах координат 
	используется коэффициент масштабирования SCALE. 
	SCALE = 250;
	xC и yC задают координаты точки на на холсте в пикселах 
	имеющую координаты (0, 0) в системе координат WebGeometry
	xC = 23 - пиксела вправо по холсту
                770 - размер холста по горизонтали в пикселах   
	yC = 400 - 15 = 385 - пикселов вниз по холсту 
                400 - размер холста по вертикали в пикселах
	 Таким образом начало координат в системе WG находится неподалеку от левого
	нижнего угла холста (смотри online-программу выше на странице).

В рассматриваемой online-программе при движении мыши по холсту если леваяя клавиша мыши нажата то происходит движение чертежа за окном просмотра. Если же клавиша мыши НЕ нажата, то при движении мыши происходит отображение тех координат в системе WG, которые соответствуют положению курсора мыши на холсте (мелкий шрифт рядом с острием стрелки курсора):

	function handleMouseMove(event) 
	{
		if (mouseDown) 
		{	
			// если клавиша мыши нажата, то двигаем изображения на холсте
			var newX = event.clientX; // текущие значения положения 
			var newY = event.clientY; // мыши на холсте
			
			var d = 7.0; // шаг смещения "окна" просмотра

			var deltaX = newX - lastMouseX;
			if (deltaX < 0)
			{
				xC = xC - d;
			}
			if (deltaX > 0)
			{
				xC = xC + d; 
			}
			
			var deltaY = newY - lastMouseY;
			if (deltaY < 0)
			{
				yC = yC - d;
			}
			if (deltaY > 0)
			{
				yC = yC + d;
			}

			lastMouseX = newX // сохраняем в глобальных переменных
			lastMouseY = newY; // текущие значения положения мыши
			
			// отображение на экран
			draw();	
		}
		else 
		{
			// если клавиша мыши НЕ нажата, то выводим координаты (WG) точки 
			// на которой находится курсор мыши
			event.preventDefault();
			elem = document.getElementById('canvas_draw');
			coords = elem.getBoundingClientRect();	

			// координаты мыши 	
			var x_mouse, y_mouse;

			// координаты мыши на холсте (canvas_draw)
			x_mouse = event.clientX - coords.left;
			y_mouse = event.clientY - coords.top;	

			// приводим координаты мыши к WebGeometry (WG)
			x_coord = (x_mouse - xC)/SCALE;
			y_coord = (yC - y_mouse)/SCALE;
			
			// отображение на экран
			draw();
		}
	}

Заметим, что в последующих программах при движении мыши по холсту, чтобы не загромождать интересные места на холсте, вывод координат (при ненажатой левой клавиши мыши) будет производиться всегда в фиксированном месте - в левой верхней части холста.
При движении мыши по холсту и нажатой левой ее клавиши в дальнейших программах будет осуществвляться не перемещения, а вращение 3D-моделей которые мы в этих прграммах создадим.
Масштабирование моделей будет осуществляться не вращением колесика мыши, а заданием соответствующего значения в панели GUI.

Функции входящие в библиотеку canvas2D сделаны полностью на основе функций входящих в состав HTML5 Canvas, но с одним принципиальным отличием от них. В функциях HTML5 Canvas в качестве координат объектов (текста, линий, полигонов, ...) задаются координаты стандартного холста, а в функциях canvas2D напрямую задаются декартовы координаты, которые используются в библиотеке WebGeometry (WG). Тем самым программист, после того как он задал значения xC, yC и SCALE не должен заботиться о преобразовании одной системы координат в другую при отображении объектов на холсте. Все функции входящие в canvas2D созданы таким образом, чтобы с их помощью можно было без труда визуализировать результаты расчетов произведенных с использованием библиотеки WebGeometry. Иными словами canvas2D можно считать дополнением к библиотеке WebGeometry.

Использование большинства функций библиотеки canvas2D продемонстрировано в online-программе на текущей WEB-странице. Исходный текст этой программы расположен в файле canvas_draw.js. Описание функций библиотеки canvas2D находится по ссылке Справочник по функциям canvas2d.

Еще примеры использования функций библиотеки canvas2D можно найти на WEB-страницах моего другого сайта:
Библиотека WebGeometry и холст HTML5 (часть 1),
Библиотека WebGeometry и холст HTML5 (часть 2),
Рундист огранки маркиз,
Построение рундиста огранки имеющей рундист в форме груши,
Построение рундиста огранки сердце,
Построение рундиста огранки имеющей рундист в форме "подушки",
Рундист огранки треугольная "подушка".
Заметим, что в программах, на которые указывают приведенные выше семь ссылок, использовалась предыдущая версия библиотеки canvas2D. В новой (текущей) версии библиотеки исключена функция line (она не всегда работает корректно). Вместо этой функции введены две новые - line_ext и line_ext2. Функции line, line_ext и line_ext2 предназначены для черчения выносных линий при нанесении размеров объектов. В некоторые другие функции по сравнению с первым вариантом библиотеки canvas2D введены дополнительные параметры в конце списка параметров и сделаны другие незначительные изменения.

Как можно увидеть из справочника по функциям canvas2D, в состав библиотеки входят функции для рисования точек, прямых, сегментов прямых, дуг, полигонов, координатной сетки и текста. Координаты, задающие положение на холсте этих объектов, можно задать двумя способами.
Первый способ заключается в том, что можно явно задать координаты объекта. Например, квадратную точку красного цвета размером в 4 пиксела и имеющую декартовы координаты (0.5, 1.0) можно задать следующим образом:

  var point = new Point2D(0.5, 1.0);
  rsp(ctx, point, 4, "R"); // отображаем квадратную точку на холсте
  
    Или так (теперь круглая точка):
  сsp(ctx, new Point2D(0.5, 1.0), 4, "R"); // отображаем круглую точку на холсте
 
   Следует сказать несколько слов про функции text, text1 и text2 предназначенные для вывода 
   текста в библиотеке canvas2D.
     В основном мы будем использовать эти функции для обозначения конкретных точек на холсте. 
   Функции text1 и text2 обеспечивают некоторый "зазор" между непосредственно координатой 
   точки и текстом обозначающим эту точку. Функция text - без "зазора".
       Точка Point2D(0.5, 1.0) используется и для задания координаты самой точки 
     в csp и для задания точки начала вывода текста в text1 с небольшим "зазором" от
     от Point2D(0.5, 1.0).
    Над точкой с координатами Point2D(0.5, 1.0) отображаем красный текст "This point !"
  text1(ctx, "This point !", new Point2D(0.5, 1.0), "center", "up", "R");

При втором способе следует предварительно вычислить координаты объекта. Предположим, что точка определена пересечением двух прямых (смотри описание функций входящих в библиотеку WebGeometry:

  // Создаем первую прямую проходящую через точки (-1.0, -1.0) и (1.0, 1.0)
  var line1 = new Line2D( new Point2D(-1.0,-1.0), new Point2D(1.0, 1.0));
  // Создаем вторую прямую проходящую через точки (-1.0, 1.0) и (1.0, -1.0)
  var line2 = new Line2D( new Point2D(-1.0, 1.0), new Point2D(1.0,-1.0));
  // Находим точку пересечения двух прямых
  var point = line1.IntersectionTwoLines(line2); // вычисляем положение точки
  rsp(ctx, point, 4, "R"); // отображаем точку на холсте

Отдельно следует сказать про отображение на холсте рисунков. Для того, чтобы вывести рисунок на холст используется стандартная функция HTML5 drawImage. Например, для того чтобы вывести рисунок в положение заданное при помощи декартовых координат (1.0, 1.5) следует использовать следующее выражение:
ctx.drawImage(my_image, fx(1.0), fy(1.5), width, height);
Специальной функции в canvas2D для вывода изображений на холст не предусмотрено. Но в drawImage функции fx(1.0) и fy(1.5) осуществляют преобразование декартовых координат в соответствующие координаты на холсте.

Однако, с выводом на холст рисунков не все так просто. Чтобы выведенное на холст изображение не 
мигало на экране требуется сначала сделать следующие действия по сохранению изображения:

function init()		
{
    ..........
	..........
	var my_image = new Image();  
	if (!my_image) 
	{
		console.log('Ошибка при создании объекта!');
		return false;
	}
	
	// Загружаем изображение my_image ('brilliant.png')
	my_image.onload = function()
	{ 
		var width = 150; // 150 x 150 - размер кусочка холста
		var height = 150;
		// рисуем на холсте (можем выбрать произвольное место на холсте)
		ctx.drawImage(my_image, 0, 0, width, height);
		
		// Получаем объект image_data, содержащий копию 
		// пиксельных данных для заданной части холста
		image_data = ctx.getImageData(0, 0, width, height);
		image_load = true; // изображение сейчас загружено
							// и пиксельные данные получены
		draw(); // отрисовку всего холста производим после загрузки image
	};
	
	my_image.src = 'brilliant.png';	// изображение бриллианта хранится на сервере
                                    // или в локальном файле
	.......
}

 Как видно из приведенного выше куска программы, изображение просто выводится на холст в любом его
месте при помощифункции drawImage.  Сразу же после этого, используя функцию HTML5 Canvas 
getImageData, изображение сохраняется в объекте имеющем тип ImageData. 
Этот объект будет содержать копию пиксельных данных той части холста которая соответствует изображению.
 
 После этого мы можем в любой момент вывести на холст изображение при помощи функции
HTML5 Canvas putImageData предварительно поместив ее в функцию draw:

function draw()
{
	............
	............
	// Выводим на холст два одинаковых изображения сохраненных в image_data.
	if (image_load == true)
	{
		// (1.4, 2.4) - координаты места отрисовки (WG)
		ctx.putImageData(image_data, fx(-1.4), fy(2.4));
		// (1.2, -0.1) - координаты места отрисовки (WG)
		ctx.putImageData(image_data, fx(1.2), fy(-0.1));
	}
	............
	............
}

 При запуске приведенной выше online-программы на локальном компьютере (в ней производится 
загрузка изображения 'brilliant.png' с диска того же локального компьютера),
требуется соответствующим образом настроить браузер. Если в качестве браузера 
используется Chrome, то в команду запуска Chrome следует добавить параметр командной 
строки --allow-file-access-from-files. Это обусловлено требованиями безопасности, 
так как по умолчанию Chrome запрещает доступ к локальным файлам. Не забудьте
вернуть браузер в его прежнее состояние после экспериментов, иначе вы оставите 
открытым доступ к локальным файлам, в обход системы безопасности.

Вывод рисунков на холст в данной серии WEB-страниц нам больше не встретится. Но на странице Brilliant girdle другого моего сайта Diamond cuts можно увидеть как при помощи функции putImageData на холст выводятся математические формулы предварительно помещенные на рисунок.

В следующем разделе мы создадим первую 3D-модель многогранника.