Crazy Rebel: викификация, оформление, иллюстрация

2011-07-14T08:35:21Z

викификация, оформление, иллюстрация

Новая страница

: '''Canvas''' Продвинутые возможности HTML для ваших web-приложений

==Canvas: Добавим Drag’n’drop==

: Добавив к элементу '''<nowiki><canvas></nowiki>''' способность реагировать на движение мышью, '''Иван Травкин''' сделает динамическую web-графику по-настоящему динамичной.

Для изучения многих аспектов программирования сегодня достаточно текстового редактора и web-браузера: ряд вспомогательных инструментов перечислен во врезке внизу. Так, несколько лет назад в активе web-разработчиков появился новый элемент HTML – '''Canvas''', позволяющий рисовать изображения прямо на web-странице, используя сценарии ''JavaScript''. Ранее динамическая графика либо загружалась с сервера в готовом виде, либо требовала модулей расширения ''Flash'' или ''Java''.

В [[LXF94|LXF94 (июль 2007)]] была опубликована отличная вводная статья Дэна Фроста [[LXF94:Графическое web-приложение|«Canvas: Холст для web-картин »]]; в ней подробно описан элемент '''Canvas''' и показаны примеры рисования фигур разной степени сложности: от контуров прямоугольников до фигур с градиентной заливкой. Мы пойдем несколько дальше: сделаем так, чтобы любую фигуру на поверхности '''Canvas''' можно было перетаскивать мышью.

Изначально '''Canvas''' предлагает разработчику лишь набор команд для рисования примитивов (линии, квадраты, окружности) и для простых преобразований плоскости, таких как поворот. Нам придется самим научить его определять нажатие кнопки мыши и, при попадании в одну из фигур, обрабатывать ее перемещение до тех пор, пока пользователь не отпустит кнопку. Мы также введем несколько упрощений, о которых поговорим по ходу дела.

{{Врезка|Содержание=[[Изображение:LXF133_78_1.jpg|300px]] Инструменты разработчика в браузере ''Chrome''.|Ширина=300px}}

===Объектная модель===

Чтобы облегчить себе решение поставленной задачи, создадим простенькую объектную модель, похожую на предложенную в [[LXF94:Графическое web-приложение|LXF94]]. Ведь в случае сложных изображений оперировать абстрактными понятиями вроде «фигура» гораздо удобнее, чем 10–15 строками кода: «измени цвет пера на красный», «проведи линию в точку (x,y)», «закрась прямоугольную область» и так далее.

Для начала создадим объектную «обертку» (иногда называемую «декоратором») для самого элемента '''Canvas'''. Объект '''Canvas''' (не путайте его с элементом!) станет основой нашей модели. Он будет «помнить» набор изображенных фигур, отвечать за их перерисовку и обрабатывать перемещение фигур курсором мыши.
<source lang=java>
var Canvas = new Object();
Canvas.shapes = [];
</source>

Перво-наперво нужно связать наш объект с неким элементом '''Canvas''', на поверхности которого и будут изображаться фигуры.

<source lang=java>
Canvas.setCanvas = function ( aCanvas ) {
this.canvas = aCanvas;
this.context = aCanvas.getContext( '2d' );
/* …пропуск… */
}
</source>

Метод '''setCanvas()''' отвечает за «запоминание» рабочего элемента '''Canvas''', получение его контекста (нужного для рисования) и, что особо для нас важно, связывание событий мыши элемента с обработчиками, которые мы далее определим в объекте '''Canvas'''.

Для запоминания набора фигур объект '''Canvas''' использует коллекцию '''shapes'''. Для добавления и удаления фигур в коллекцию, а также последующей перерисовки, применяются методы '''addShape()''' и '''removeShape()''', соответственно.

<source lang=java>
Canvas.addShape = function ( aShape ) {
this.shapes.push ( aShape );
this.draw ();
return this;
}
Canvas.removeShape = function ( aShape ) {
/* …пропуск… */
this.draw ();
return this;
}
</source>

Шарм объектно-ориентированного программирования в том, что, распределив обязанности между объектами, можно затем просто раздавать им указания, почти не напрягая драгоценный мозг.

Фигуры не рисуются непосредственно. Следуя общим принципам ООП, изложенным Аланом Найтом [Alan Knight] в прекрасной статье [[http://ru.smalltalk.wikia.com/wiki/%D0%9F%D0%A0%D0%98%D0%9D%D0%A6%D0%98%D0%9F%D0%AB_%D0%9E%D0%9E_%D0%94%D0%98%D0%97%D0%90%D0%99%D0%9D%D0%90|«Принципы ОО дизайна, или Всему, что я знаю о программировании, я научился у Дилберта»]], объект '''Canvas''', когда надо, просит каждую свою фигуру «нарисоваться» на холсте.

<source lang=java>
Canvas.draw = function () {
// очищаем поверхность элемента Canvas (маленький хак)
this.canvas.width = this.canvas.width;
// рисуем фигуры
this.shapesDo ( function ( shape ) {
shape.draw(); } );
return this;
}
</source>

Для упрощения работы с фигурами наш объект '''Canvas''' имеет метод-итератор '''shapesDo()''', позволяющий легко выполнять действия со всей коллекцией фигур разом, что мы и делаем во время прорисовки изображения.

===Начинаем упрощать===

{{Врезка|Содержание=[[Изображение:LXF133_79_1.jpg|300px]] На странице этого сделать не получится, но в web-браузере прямоугольники можно перетаскивать мышью.|Ширина=300px}}

Теперь скажем пару слов о самих фигурах. Здесь мы ограничимся одним-единственным типом – прямоугольниками. Для их рисования потребуется всего один примитив элемента '''Canvas'''. Не станем даже добавлять возможность закраски каким-либо цветом: вместо этого будем рисовать полупрозрачные (чтобы видеть места перекрытия фигур при перетаскивании) прямоугольники светло-синегоцвета. Наши прямоугольники будут отличаться друг от друга только начальным положением и размером, и уметь только рисовать себя на поверхности рабочего элемента '''Canvas''' (метод '''draw()''') да отвечать на вопрос, лежит ли точка с координатами (x,y) внутри данного прямоугольника (метод '''includesPoint()''') – чтобы определять при нажатии кнопки мыши, не попали ли мы курсором в данную фигуру.

И еще одно упрощение. Определяя координаты курсора мыши, перемещаемого над элементом '''Canvas''', мы столкнемся вот с чем: координаты курсора отсчитываются от левого верхнего угла документа и смещены относительно координатной системы нашего холста. Решение – добавлять смещение, равное координатам самого элемента '''Canvas'''. Но мы поступим проще, совместив координаты документа с координатами элемента '''Canvas''': с помощью таблицы стилей уберем внутренние и внешние поля элемента '''Body''', поместив тем самым холст в верхний левый угол документа.

===Хватай и тащи===

Итак, все, что требовалось для решения поставленной задачи, готово; теперь начинается самое интересное. Выше мы указали, что обработкой событий мыши, связанных с рабочим элементом '''Canvas''', занимается объект-«обертка». Нам наиболее важны следующие три события: «нажатие» '''onmousedown''', «отпускание» '''onmouseup''' и «перемещение» '''onmousemove'''. В свете этих трех событий, объекту '''Canvas''' необходимо помнить две вещи: флажок '''isDragging''', равный '''true''' в тот момент, когда фигура «подцеплена», и '''draggingShape''' – ссылку на «подцепленную» фигуру.

Далее все просто. При нажатии кнопки мыши определим, не находится ли в этот момент курсор мыши над одной из фигур (спросим каждую фигуру: попали координаты курсора в ее внутреннюю область?), и если да, поставим флажок '''isDragging=true''' и запомним текущие координаты мыши ('''mouseX, mouseY''') и фигуру, в которую мы «ткнули» ('''draggingShape'''). При отпускании кнопки мыши достаточно просто поставить флаг '''isDragging=false'''.

За перемещение «подцепленной» фигуры отвечает событие '''onmousemove'''. При перемещении мыши достаточно проверить, стоит ли флажок '''isDraging=true'''. Если да – вычислим приращение координат курсора (используя последние запомненные координаты), придадим это приращение фигуре '''draggingShape''', снова запомним координаты и перерисуем изображение.

<source lang=java>
Canvas.onmousemove = function ( event ) {
if ( this.isDragging ) {
this.dragginShape.x = this.dragginShape.x + (event.clientX - this.mouseX);
this.dragginShape.y = this.dragginShape.y + (event.clientY - this.mouseY);
this.mouseX = event.clientX;
this.mouseY = event.clientY;
this.draw ();
}
return this;
}
</source>

Вот и все! Осталось лишь посмотреть, как это работает. Код HTML-документа будет выглядеть следующим образом:

<source lang=html4strict>
<html>
<head>
<title>Canvas и Drag'n'drop</title>
<script type=”text/javascript” src=”canvas.js”></script>
<script type=”text/javascript” src=”rect.js”></script>
</head>
<body style=”padding: 0; margin: 0;”>
<canvas id=”canvas-test” width=”300” height=”300”
style=”background: #afa;”></canvas>
<script type=”text/javascript”>
Canvas
.setCanvas ( document.getElementById('canvas-test') )
.addShape( new Rect (10, 10, 30, 30) )
.addShape( new Rect (50, 10, 50, 50) );
</script>
</body>
</html>
</source>

===Что дальше?===

Мы решили небольшую, но занятную задачу. Что дальше? Можно добавить цвет заливки прямоугольников. Или создать новые объекты для прочих фигур – скажем, для круга; для этого понадобится описать метод '''draw()''', который будет рисовать круг, а также метод '''includesPoint()''', определяющий принадлежность точки (x,y) внутренней области круга (например, по неравенству круга <math>(x-x_0)^2+(y-y_0)^2</math> ≤ <math>r^2)</math>. Можно анимировать фигуры. Круг задач неограничен – берите свою и наслаждайтесь поиском ее решений.

===Проверим попадание===

По мере добавления новых типов фигур может возникнуть проблема с вычислением попадания произвольной точки во внутреннюю область (метод '''includesPoint()'''). Для произвольных полигонов и фигур с кривыми можно использовать следующий метод: рисовать однотонную фигуру в невидимом буфере, и если цвет интересующей точки совпадет с цветом фигуры, информировать о попадании.

===Инструментарий разработчика===

* '''''Firebug''''' http://getfirebug.com/ Инструментарий в помощь web-разработчику, предпочитающему ''Firefox''. Упрощает отладку скриптов, таблиц стилей и даже AJAX-запросов.
* '''MozillaLabs''' https://mozillalabs.com Сайт, посвященный экспериментальным проектам, которые разрабатываются сообществом Mozilla. Передний край открытых web-технологий.
* '''''Bespin''''' http://mozillalabs.com/bespin Редактор кода, реализованный с использованием HTML5 и JavaScript. Работать с ''Bespin'' можно прямо в облаке Mozilla (https://bespin.mozillalabs.com/). ''Bespin'' прекрасно работает в ''Firefox, Chrome'' и ''Safari'' последних версий.

LXF133:canvas - История изменений

Crazy Rebel: викификация, оформление, иллюстрация