Цвет и размер кисти

Предполагая, что пользователи захотят рисовать не только чёрным цветом и не только одним размером кисти, добавим элементы управления для этих настроек.

В главе 18 я обсуждал разные варианты полей формы. Среди них не было полей для выбора цвета. По традиции у браузеров нет встроенных полей для выбора цвета, но за последнее время в стандарт включили несколько новых типов полей форм. Один из них —

"date"

"email"

"url"

"number"

“text”

controls.color = function(cx) {

 var input = elt("input", {type: "color"});

 input.addEventListener("change", function() {

  cx.fillStyle = input.value;

  cx.strokeStyle = input.value;

 });

 return elt("span", null, "Color: ", input);

};

При смене значения поля

color

fillStyle

strokeStyle

Настройка размера кисти работает сходным образом.

controls.brushSize = function(cx) {

 var select = elt("select");

 var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100];

 sizes.forEach(function(size) {

  select.appendChild(elt("option", {value: size},

              size + " pixels"));

 });

 select.addEventListener("change", function() {

  cx.lineWidth = select.value;

 });

 return elt("span", null, "Brush size: ", select);

};

Код создаёт варианты размеров кистей из массива, и убеждается в том, что свойство холста

lineWidth

Сохранение

Чтобы объяснить, как работает ссылка на сохранение, сначала мне нужно рассказать про URL с данными. В отличие от обычных http: и https:, URL с данными не указывают на ресурс, а содержат весь ресурс в себе. Это URL с данными, содержащий простой HTML документ:

data:text/html,
Hello!

Такие URL полезны для разных вещей, как, например, включение небольших картинок прямо в файл стилей. Они также позволяют нам ссылаться на создаваемые файлы на стороне клиента, в браузере, не перемещая их сперва на какой-либо сервер.

У элемента холста есть удобный метод

toDataURL

href

controls.save = function(cx) {

 var link = elt("a", {href: "/"}, "Save");

 function update() {

  try {

   link.href = cx.canvas.toDataURL();

  } catch (e) {

   if (e instanceof SecurityError)

    link.href = "javascript:alert("

     JSON.stringify("Can't save: " + e.toString()) + ")";

   else

    throw e;

  }

 }

 link.addEventListener("mouseover", update);

 link.addEventListener("focus", update);

 return link;

};

Таким образом, линк просто сидит себе тихонечко и указывает на неправильные данные, но как только пользователь приблизится к нему, он волшебным образом обновляет себя так, чтобы указывать на текущую картинку.

Если вы загрузите большую картинку, некоторые браузеры поперхнутся слишком большим URL с данными, который получится в результате. Для маленьких картинок система работает без проблем.

Но здесь мы опять сталкиваемся с деталями реализации песочницы в браузере. Когда картинка грузится с URL с другого домена, если ответ сервера не содержит заголовок, разрешающий использование ресурса с других доменов (см. главу 17), холст будет содержать информацию, которая будет видна пользователю, но не видна скрипту.

Мы могли запросить картинку с приватной информацией (график изменений банковского счёта). Если бы скрипт мог получить к ней доступ, он мог бы шпионить за пользователем.

Для предотвращения таких утечек информации, когда картинка, невидимая скрипту, будет загружена на холст, браузеры пометят его как «испорчен». Пиксельные данные, включая URL с данными, нельзя будет получить с «испорченного» холста. На него можно писать, но с него нельзя читать.

Поэтому нам нужна обработка

try/catch

update

toDataURL

SecurityError

Загрузка картинок

Последние два элемента управления используются для загрузки картинок с локального диска и с URL. Нам потребуется вспомогательная функция, которая пробует загрузить картинку с URL и заменить ею содержимое холста.

function loadImageURL(cx, url) {

 var image = document.createElement("img");

 image.addEventListener("load", function() {

  var color = cx.fillStyle, size = cx.lineWidth;

  cx.canvas.width = image.width;

  cx.canvas.height = image.height;

  cx.drawImage(image, 0, 0);

  cx.fillStyle = color;

  cx.strokeStyle = color;

  cx.lineWidth = size;

 });

 image.src = url;

}

Нам надо поменять размер холста, чтобы он соответствовал картинке. Почему-то при смене размера холста его контекст забывает все настройки (

fillStyle

lineWidth

Элемент управления для загрузки локального файла использует технику

FileReader

readAsText

readAsDataURL

loadImageURL

controls.openFile = function(cx) {

 var input = elt("input", {type: "file"});

 input.addEventListener("change", function() {

  if (input.files.length == 0) return;

  var reader = new FileReader();

  reader.addEventListener("load", function() {

   loadImageURL(cx, reader.result);

  });

  reader.readAsDataURL(input.files[0]);

 });

 return elt("div", null, "Open file: ", input);

};

Загружать файл с URL ещё проще. Но с текстовым полем мы не знаем, закончил ли пользователь набирать в нём URL, поэтому мы не можем просто слушать события

“change”

controls.openURL = function(cx) {

 var input = elt("input", {type: "text"});

 var form = elt("form", null,

         "Open URL: ", input,

         elt("button", {type: "submit"}, "load"));

 form.addEventListener("submit", function(event) {

  event.preventDefault();

  loadImageURL(cx, form.querySelector("input").value);

 });

 return form;

};

Теперь мы определили все элементы управления, требующиеся нашей программе, но нужно добавить ещё несколько инструментов.

Закругляемся

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

tools.Text = function(event, cx) {

 var text = prompt("Text:", "");

 if (text) {

  var pos = relativePos(event, cx.canvas);

  cx.font = Math.max(7, cx.lineWidth) + "px sans-serif";

  cx.fillText(text, pos.x, pos.y);

 }

};

Можно было бы добавить полей для размера текста и шрифта, но для простоты мы всегда используем шрифт sans-serif и размер шрифта, как у текущей кисти. Минимальный размер – 7 пикселей, потому что меньше текст будет нечитаемый.

Ещё один необходимый инструмент для каляк-маляк – “аэрозоль”. Она рисует случайные точки под кистью, пока нажата кнопка мыши, создавая более или менее густые точки в зависимости от скорости движения курсора.

tools.Spray = function(event, cx) {

 var radius = cx.lineWidth / 2;

 var area = radius * radius * Math.PI;

 var dotsPerTick = Math.ceil(area / 30);

 var currentPos = relativePos(event, cx.canvas);

 var spray = setInterval(function() {

  for (var i = 0; i < dotsPerTick; i++) {

   var offset = randomPointInRadius(radius);

   cx.fillRect(currentPos.x + offset.x,

         currentPos.y + offset.y, 1, 1);

  }

 }, 25);

 trackDrag(function(event) {

  currentPos = relativePos(event, cx.canvas);

 }, function() {

  clearInterval(spray);

 });

};

Аэрозоль использует

setInterval

trackDrag

currentPos

Чтобы посчитать, сколько точек нужно нарисовать каждый раз по окончанию интервала, функция подсчитывает размер области текущей кисти и делит его на 30. Для поиска случайного положения под кистью используется функция

randomPointInRadius

function randomPointInRadius(radius) {

 for (;;) {

  var x = Math.random() * 2 - 1;

  var y = Math.random() * 2 - 1;

  if (x * x + y * y <= 1)

   return {x: x * radius, y: y * radius};

 }

}

Эта функция создаёт точки в квадрате между (-1,-1) и (1,1). Используя теорему Пифагора, она проверяет, лежит ли созданная точка внутри круга с радиусом 1. Когда такая точка находится, она возвращает её координаты, умноженные на радиус.

Цикл нужен для равномерного распределения точек. Проще было бы создавать точки в круге, взяв случайный угол и радиус и вызвав

Math.sin

Math.cos

Теперь наша программа для рисования готова. Запустите код и попробуйте.

Упражнения

Rectangle

fillRect

position: absolute

pageX

pageY

left

top

width

height

toDataURL

getImageData

width

height

data

data

red

green

blue

alpha

function pixelAt(cx, x, y) {

 var data = cx.getImageData(x, y, 1, 1);

 console.log(data.data);

}

var canvas = document.createElement("canvas");

var cx = canvas.getContext("2d");

pixelAt(cx, 10, 10);

// → [0, 0, 0, 0]

cx.fillStyle = "red";

cx.fillRect(10, 10, 1, 1);

pixelAt(cx, 10, 10);

// → [255, 0, 0, 255]

getImageData

color

fillStyle

strokeStyle

rgb(R, G, B)

getImageData

toDataURL

try/catch

alert

Заливка

Это упражнение более сложное, чем предыдущие, и оно потребует разработки нетривиального решения хитрой задачи. Убедитесь, что у вас есть свободное время и терпение перед началом работы, и не отчаивайтесь, если сразу у вас что-то не будет получаться.

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

Следующая картинка демонстрирует набор пикселей, окрашиваемых, когда инструмент заливки применяется к помеченному пикселю:

Заливка не протекает через диагональные разрывы и не касается пикселей, которых нельзя достичь, даже если они того же цвета, что и исходный.

Вам вновь понадобится

getImageData

для выяснения цвета пикселя. Скорее всего, удобнее будет получить всю картинку за раз, а потом уже получать данные по пикселям из получившегося массива. Пиксели в массиве организованы схожим образом с решёткой из главы 7, по рядам, только каждый пиксель описывается четырьмя значениями. Первое значение для пикселя с координатами (x,y) находится на позиции (x + y × width) × 4.

Включайте в рассмотрение четвёртое число (альфа), потому что нам нужно будет различать чёрные и пустые (прозрачные) пиксели.

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

У картинки среднего размера много пикселей. Постарайтесь свести работу программы к минимуму, или же она будет работать слишком долго. К примеру, игнорируйте пиксели, которые вы уже обрабатывали.

Рекомендую для окраски отдельных пикселей вызывать

fillRect

, и хранить какую-то структуру данных, где записано, какие пиксели вы уже обошли.