Создайте цифровой эскиз

В этом руководстве мы берем механическую чертежу игрушку Etch эскиз в качестве вдохновения и попытка реализовать эти функции для современных устройств с веб-технологиями. Используя (удачно называемое) холст, мы сначала фокусируемся на планшетах, которые похожи на форму до подлинной игрушки. Мы можем воспользоваться сенсорными событиями для управления цифербалами и событиями движения устройства, чтобы стереть содержимое. Не оставляя телефонов, мы также будем исследовать, как использовать WebSockets для улучшения возможностей путем разделения элементов управления и области рисования.

01. Получить активы

Этот учебник будет использовать Node.js. Прежде чем мы начнем, перейдите к FilesiLo. Выберите бесплатные вещи и бесплатный контент рядом с учебником - здесь вы можете скачать активы, которые вам нужны для учебника. Затем запустите команды ниже, что установит зависимости и запустите сервер. Мы используем узел для создания локальный И он также позжет нам позже для WebSockets.

 Установка NPM
Узел сервер / index.js 

02. Используйте функцию Draw ()

В Main.js. , то рисовать() Функция будет центральной точкой нашего приложения. Мы используем холст, чтобы нарисовать линию между двумя точками; Происхождение (x1, y1), будучи там, где мы в последний раз проводим наш рисунок, а пункт назначения (x2, y2), новая точка, которую мы хотим достичь. Теперь нам нужно вызвать эту функцию, чтобы наблюдать любую форму рисования.

 Функциональная ничья (x1, y1, x2, y2) {
  // Контекст устанавливается во всем мире в init ()
  контекст. seginpath ();
  контекст.moveto (x1, y1);
  context.lineto (x2, y2);
  контекст .stroke ();
} 

03. Реализуйте события клавиатуры

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

 Document.addEventListener («КВОД», ФУНКЦИЯ (E) {
  / * Переключатель ключей идет здесь * /
  Рисовать (Math.floor (Prev_horizontal), Math.floor (Prev_vertical), Math.floor (горизонтальный), Math.Floor (вертикальный));
  prev_vertical = вертикаль;
  prev_horizontal = горизонтальный;
}); 

04. Изберите размер холста

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

 Функция readrame () {
  // холст определяется глобально в init ()
  canvas.width = window.innerwidth;
  canvas.height = window.innerheight;
}
window.addeventListener («изменение изменений», настроек); 

05. Добавить рамку

Мы хотим, чтобы приложение было как можно больше выглядеть как оригинальную игрушку, поэтому мы хотим добавить рамку вокруг области рисунков. Для этого мы можем определить стоимость маржи и внести изменения в CSS для #sketch на маржу: 20px auto; Чтобы центрировать холст горизонтально и сохранить больше места на дне для циферблатов.

 var framemarginvertical = 122;
var framemarginhorizontal = 62;
Функция readframe () {
  canvas.width = window.innerwidth - фрамемаргоризонтал;
  canvas.height = window.innerheight - фрамемаргинвистка;
} 

06. Создайте циферблаты

Мы уже дали вам CSS для циферблатов в Публичные / CSS / styles.css Так что не стесняйтесь посмотреть. Далее добавьте два & lt; div & gt; Теги под то & lt; canvas & gt; В файле HTML, как описано ниже. В качестве конвенции мы будем использовать левый циферблат для горизонтального рисунка, а право на вертикали. Мы также добавляем новые переменные в в этом() Функция для подготовки к сенсорным событиям.

 & lt; div id = "dialhorizontal" Class = "Наберите" и gt; & lt;
& lt; div id = "dialtical" Class = "наберите" и gt; & lt; 

 var targetleft = document.getelementbyId ('dalhorizontal');
var regionleft = new Zingtouch. Регистрация (Targetleft);
var targitright = document.getelementbyId ('dalvertical');
VAR ROINGRIGHT = NEW ZINGTOUCH.RUMENT (TARGUSRIGHT); 

07. Используйте Zingtouch

Zingtouch - это библиотека JavaScript, способна обнаруживать различные сенсорные жесты и также будет обрабатывать события мыши. Это предусмотрено для вас в / public / lib / Папка, так как мы используем ее, чтобы контролировать наши циферблаты. Ниже приведена реализация для левого контроля; Вам нужно будет повторить и изменить его для другой стороны.

 Regionleft.Bind (TargetLeft, «вращение», функция (E) {
  если (e.detail.distancefralast & lt; 0) {
  --хоризонталь;
  } еще {
  ++ горизонтальный;
  }
  EnalHorizontal + = E.Detail.distanceFromlast;
  TargetLeft.Style.transform = 'Поворачивается (' + Healhorizontal + 'deg)';
  Рисовать (Math.floor (Prev_horizontal), Math.Floor (Prev_vertical), Math.floor (горизонтальный), Math.Floor (Prev_vertical));
  prev_horizontal = горизонтальный;
}); 

08. Реализация циферблат

Чтобы заблокировать линии от выхода из экрана, мы используем Prandraw () Функция, которая возвращает логию. Мы передаем это направление, либо «горизонтальное», либо «вертикальное», а значение горизонтальной, либо вертикальной переменной. Мы называем эту функцию в прослушивателе «Вращайте» обоих циферблатов, и только если «истинно» мы увеличиваем угол и вызовите рисовать() функция.

 Функция Candraw (направление, значение) {
  var max = (направление === 'горизонтальный')? (Canvas.width) :( canvas.height);
  Если (значение & lt; 2 || Value & GT; MAX - 2) {
  вернуть ложь;
  }
  вернуть истину;
} 

09. Избегайте проблем с набором

С границами, которые мы только что реализовали, есть вероятность, что циферблат может застревать на одном конце, если значение переходит на предел, даже на десятичную точку. Чтобы избежать этой ситуации, мы должны обрабатывать случай, когда Prandraw () Неверно и сбросит значение ранее действительным, как показано здесь для горизонтального контроллера:

 Если (Candraw («горизонтальный», горизонтальный)) {
  EnalHorizontal + = E.Detail.distanceFromlast;
  TargetLeft.Style.transform = 'Поворачивается (' + Healhorizontal + 'deg)';
  Рисовать (Math.floor (Prev_horizontal), Math.Floor (Prev_vertical), Math.floor (горизонтальный), Math.Floor (Prev_vertical));
  prev_horizontal = горизонтальный;
} еще {
  горизонтальный = prev_horizontal;
} 

10. Получите доску чертежи на вашем планшете

Всегда рекомендуется проверить на ваших целевых устройствах как можно раньше. Наше приложение теперь в хорошей форме, и может отвечать на сенсорные события. Следуйте инструкциям доступа к Localhost удаленно, чтобы получить доску для рисования на вашем планшете.

Далее мы будем использовать Safari и MENU Разработайте меню для проверки приложения на iPad. Для устройств Android используйте Chrome: // проверять Отказ

11. Проверьте акселерометр

Подключите планшет к компьютеру через USB и проверьте приложение с помощью инструментов разработчика.

С помощью Code ниже на месте вы сможете увидеть различные значения ускорения, поскольку вы перемещаете устройство вокруг. Чтобы сбросить холст, мы решили рассмотреть ускорение на оси X более 5, и медленно уменьшают непрозрачность ( уклоняться ).

 VAR Eraserate = 1; / * Определите как глобальную переменную * /
window.addeventListener («DeviceMotion», функция (событие) {
  Console.log («Ускорение ::», Event.Acceleration);
  if (event.acceleration.x & gt; 5) {
  Eraserate - = math.abs (event.acceleration.x / 100);
  Console.log («Стереть ::», расширитель);
  }
}); 

12. Встряхнуть, чтобы удалить

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

Сбросить глобалфа до 1 в рисовать() и установить Глобалкомпозитоопение Вернуться к источнику.

 Функция FadedRawing () {
  Если (Eraserate & lt; 0) {
  context.clearrect (0, 0, canvas.width, canvas.height);
  Eraserate = 1;
  возвращаться;
  }
  context.globalalalpha = Eraserate;
  context.globalcompositeOperation = «копия»;
  context.drawImage (холст, 0, 0);
} 

13. Сделай это похоже на реальную сделку

До сих пор наше приложение выглядит довольно мягко и плоско. Чтобы дать ему глубину, мы добавим цвет кадра, тень внутри рамы и немного громкости на циферблатах. CSS для теней набора номера уже предоставлен, но вам нужно добавить эти два элемента в конце тела.

Заполните CSS для элементов, предложенных здесь:

 & lt; div id = "dialshadowhorizontal" Class = "Shadow" & GT;
& lt; div id = "dialshadowvertical" Class = "Shadow" & gt; 

 Тело {
  Фон: # 09CBF7;
}
#sketch {
  Box-Shadow: 2PX 2PX 10PX RGBA (0, 0, 0, 0,25) вставки;
} 

14. Используйте WebSockets

В начале этого учебника мы кратко упоминаем с помощью WebSockets через наш сервер узла. Теперь, когда у вас есть автономный рисунок для планшета, мы сможем сделать его также доступным для вашего телефона. Однако телефоны могут быть слишком маленькими для отображения как экрана, так и элементы управления. Поэтому мы используем розетки для связи между экраном телефона и компьютера.

15. Обнаружить размер устройства

В главном файле HTML замените Main.js. с Extra.js. Отказ Последнее содержит все, что мы сделали до сих пор, с модификациями для обработки устройств и сокетов, которые мы проверяем в следующих шагах. Посмотри на detectdevice () - этот метод теперь вызывается на нагрузке вместо в этом() И решит, какой «режим» обрабатывается для приложения.

Ниже приведено конкретный случай обнаруженного телефона:

 Если (Window.innerwidth & lt; 768) {
  Socket = io.connect ();
  Document.Queryselector («# эскиз»). Удалить ();
  VAR Dials = Document.QuerySelector Call ('. Набор, .shadow');
  [] .foreach.call (циферблаты, функция (элемент) {
  item.classlist.add («Big»);
  });
  iScontrols = True;
  Framemarginvertical = 62;
  Socket.emit («готов», {«готов»: «элементы управления»});
} 

16. С телефона на компьютер

На протяжении Extra.js. Вы заметите биты кода, такие как Socket.emit () или же socket.on () Отказ Это излучатели и слушатели для наших элементов управления (телефон) и экрана (компьютеры). Каждое излучаемое событие должно пройти через сервер, чтобы повторно распределиться со всеми подключенными сокетами. В Сервер \ index.js. Добавьте еще несколько слушателей в функции «Подключение» и перезапустите сервер узла.

 Socket.on («Draw», функция (данные) {
  io.sockets.emit («ничья», данные);
});
Socket.ON («Стереть», функция (данные) {
  io.sockets.emit («стирание», данные);
});
Socket.ON («readrame», функция (данные) {
  screenwidth = data.screenwidth;
  Screenheight = data.screenheight;
  io.sockets.emit («readrame», данные);
}); 

17. Исправить ориентацию телефона

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

Мы можем исправить это с некоторыми CSS:

 Экран @media и (ориентация: портрет) {
  .dial.big # CALLIRTICAL, .shadow.big # dialshadowvertical {
  Право: Calc (50% - 75 пикселей);
  Дно: 20px;
  Топ: Авто;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  Слева: Calc (50% - 75 пикселей);
  Топ: 20px;
  }
} 

18. Сделайте игрушку более реалистичной

Вернемся к нашей версии планшета. К сожалению, API вибрации не доступен на iOS, поэтому мы не можем реализовать гаптированную обратную связь при включении циферблатов. В оригинальной игрушке, однако, вы могли бы оставить временные черные метки отпечатков пальцев на экране, если вы нажали его. Мы можем добавить сенсорное событие на устройстве для репликации этой функции.

Установите эти слушатели в в этом() и исследуйте функции, которые они называют:

 Если (тип === 'все') {
  canvas.addeventListener («TouchStart», функция (E) {
  E.PreventDefault ();
  DrawfingerPrint (e.layerx, e.layery, true);
  });
  canvas.addeventListener («Takeend», функция (E) {
  HidefingerPrint (e.layerx, e.layery);
  });
} 

19. Сохранить копию холста

в DrawfingerPrint () Метод, прежде чем мы сделаем все остальное, мы сохраняем копию текущего состояния холста к скрытому элементу, которое мы используем для восстановления нашего рисунка при очищении печати. Это происходит только при первом прикосновении, а не на последующих вызовах, которые увеличивают размер печати каждые 100 мс.

 Функция DrawfingerPrint (XPos, ypos, Savecanvas) {
  / * Частичная функция, обратитесь к Extra.js * /
  Если (Savecanvas) {
  hiddencanvas = document.createidelement ('Canvas');
  var hiddencontext = hiddencanvas.getcontext ('2d');
  hiddencanvas.width = canvas.width;
  hiddencanvas.height = canvas.height;
  hiddencontext.drawImage (холст, 0, 0);
  }
} 

20. Запустите приложение офлайн

Теперь вы можете сделать приложение действительно автономным, сохранив его на планшет в виде приложения домашнего экрана. Мы не сможем сделать то же самое для телефона, так как требуется подключение к серверу. В / Публикация Найдите файл с именем Sketch.appcache. и заменить все экземпляры «localhost» по вашему IP-адресу.

Теперь изменить HTML, чтобы прочитать следующим образом:

 & lt; html lang = "en" maineest = "Sketch.appcache" & gt; 

21. Сохранить приложение

Теперь снова посетите приложение на свой планшет и выберите опцию Добавить в домашний экран. Новый значок должен появиться на вашем рабочем столе. Откройте его один раз, пока все еще подключаются к вашему локальному отдаленному. Манифест кэша, который мы настроим ранее загружаем все необходимые файлы для автономного использования на заднем плане. Поверните Wi-Fi и откройте приложение снова. Воила!

Эта статья изначально появилась в Веб-дизайнер журнал Выпуск 263. Купить его здесь Отказ

Прочитайте больше:

• 15 веб-API, о которых вы никогда не слышали
• Руководство начинающего к проектированию интерфейсных анимаций
• Руководство по написанию лучших CSS