> 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”. Вместо этого мы обернём поле в форму и среагируем, когда она будет отправлена – либо по нажатии Enter, либо по нажатии кнопки load.
>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 для выплёвывания цветных точек каждые 25 миллисекунд, пока нажата кнопка мыши. Функция >trackDrag используется для того, чтобы >currentPos