Створіть цифровий тракт ескізу

У цьому підручнику ми беремо механічну малювання Toy Toy Ench ескіз як натхнення та спроба реалізувати ці функції для сучасних пристроїв з веб-технологіями. Використовуючи полотно (влучно названий), ми спочатку зосередилися на таблетках, які є подібними до справжньої іграшки. Ми можемо скористатися можливістю дотичних подій, щоб керувати циферблатами та подіями руху пристрою, щоб стерти вміст. Не залишаючи телефонів, ми також будемо досліджувати, як використовувати WebSockets, щоб покращити можливості шляхом розщеплення елементів керування та малювання.

01. Отримайте активи

Цей підручник буде використовувати Node.js. Перш ніж ми почнемо, перейдіть до FileSilo , виберіть безкоштовний матеріал та безкоштовний вміст біля підручника - тут ви можете завантажити доступні активи для підручника. Потім запустіть команди нижче, які встановлюють залежності та запустіть сервер. Ми використовуємо вузол для створення локальний , і це також буде служити нам пізніше для веб-сайтів.

 Встановлення NPM
Node Server / index.js 

02. Використовуйте функцію Draw ()

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

 Функція малювання (x1, y1, x2, y2) {
  // контекст встановлюється в усьому світі ()
  контекст. beginpath ();
  контекст.Moveto (x1, y1);
  контекст .into (x2, y2);
  контекст.
} 

03. Реалізація клавіатурних подій

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

 документ.addeventlistener ('Keydown', функція (e) {
  / * Перемикач KeyCode йде тут * /
  малювати (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (горизонтальний), math.floor (вертикальний));
  prev_vertical = вертикальний;
  prev_horizontal = горизонтальний;
}); 

04. Змініть розмір полотна

Ви, можливо, помітили, що наш елемент Canvas не має розміру, призначеного до нього. Для нашої креслярської дошки ми хочемо більшого простору, можливо, навіть весь вікна. Код нижче піклується про подію розміру, але не забудьте зателефонувати Регулюваннярам () в в цьому() так само.

 Функція регулюваннярам () {
  // полотно визначається в усьому світі ()
  canvas.width = вікно.innerwidth;
  canvas.height = window.innerheight;
}
вікно. Аддевентлістенер ("змінити розмір", налаштування карес); 

05. Додайте рамку

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

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

06. Створіть циферблат

Ми вже дали вам CSS для циферблату public / css / styles.css , так що не соромтеся мати погляд. Далі додайте два & lt; div & gt; Теги під & lt; canvas & gt; У файлі HTML, як описано нижче. Як конвенція, ми будемо використовувати лівий циферблат для горизонтального малюнка, а також право на вертикалі. Ми також додаємо нові змінні до в цьому() функція підготовки до дотичних подій.

 & lt; div id = "dialhorizontal" class = "набір" & gt; & lt; / div & gt;
& lt; div id = "dialvercical" class = "набір" & gt; & lt; / div & gt; 

 var targetleft = document.getlementbyid ('dialhorizontal');
var regionleft = new zingtouch.region (targetleft);
var targetright = document.getleementByid ('dialvercal');
var regionraight = new zingtouch.region (targetRight); 

07. Використовуйте Zingtouch

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

 regionleft.bind (targetleft, "Повертати", функція (e) {
  if (e.detail.distancefromlast & lt; 0) {
  - горизонтальний;
  } else {
  ++ горизонтальний;
  }
  кутахоризонтальний + = e.detail.distancefromlast;
  targetleft.style.transform = 'обертати (' + кут нахилу + 'deg)';
  малювати (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (горизонтальний), math.floor (prev_vertical));
  prev_horizontal = горизонтальний;
}); 

08. Реалізувати межі набору

Щоб заблокувати лінії від виходу з екрана, ми використовуємо Candraw () функція, яка повертає булею. Ми передаємо це напрямок, "горизонтальний" або "вертикальний", а також значення горизонтальної або вертикальної змінної. Ми називаємо цю функцію в "Повернути" слухача обох циферблат, і лише якщо "правда" ми збільшуємо кут і називаємо малювати () функція.

 Функція Candraw (напрямок, значення) {
  var max = (direction === 'горизонтальний') (canvas.width) :( canvas.height);
  Якщо (значення & lt; 2 || значення & gt; max - 2) {
  Повернення False;
  }
  повернути істину;
} 

09. Уникайте проблем набору

З меж, які ми просто впровадили, є шанс набір може застрягнути на одному кінці, якщо значення переходить через межу, навіть десятковою точкою. Щоб уникнути цієї ситуації, ми повинні обробити справу, де Candraw () є помилковим і скинути значення раніше дійсного, як показано тут для горизонтального контролера:

 Якщо (Candraw ("горизонтальна", горизонтальна)) {
  кутахоризонтальний + = e.detail.distancefromlast;
  targetleft.style.transform = 'обертати (' + кут нахилу + 'deg)';
  малювати (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (горизонтальний), math.floor (prev_vertical));
  prev_horizontal = горизонтальний;
} else {
  горизонтальний = prev_horizontal;
} 

10. Отримайте креслярську дошку на планшеті

Завжди рекомендується перевірити на цільових пристроях якомога раніше. Наша програма зараз знаходиться у гарній формі, і може відповісти на дотик подій. Дотримуйтесь кроків, щоб отримати доступ до LocalHost, щоб отримати малювання на планшеті.

Далі ми будемо використовувати Safari та меню розробки, щоб перевірити заявку на iPad. Для пристроїв Android, використання Chrome: // Огляньте .

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

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

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

 var erazerate = 1; / * визначити як глобальну змінну * /
вікно.addeventlistener ("devicemotion", функція (подія) {
  Console.Log ("Прискорення ::", подія. Досконалість);
  if (event.acceleration.x & gt; 5) {
  enaserate - = math.abs (event.acceleration.x / 100);
  Console.Log ("rease ::", erazerate);
  }
}); 

12. Струйте, щоб видалити

Ми бачили у попередньому кроку, як перевірити рух та прискорення. Тепер ми повинні зателефонувати fadedrawing () Коли наша умова виконується. У цьому випадку ми переростаємо точну копію полотна при іншому непрозорості.

Скидання глобальної до 1 в малювати () і встановити Глобальний композиція назад до джерела.

 Функція FADEDRawing () {
  if (eraserate & lt; 0) {
  контекст. Clearrece (0, 0, canvas.width, canvas.height);
  enaserate = 1;
  повернення;
  }
  контекст. Глобалальфа = ерозара;
  контекст. Глобальнакомпооперація = "копія";
  контекст .drawimage (полотно, 0, 0);
} 

13. Зробіть це виглядати справжньою угодою

Поки що наша програма виглядає досить м'якою та квартирою. Для того, щоб дати йому певну глибину, ми додамо колір кадру, тінь всередині кадру та трохи гучності на циферблатах. CSS для тіней набору вже передбачено, але вам доведеться додати ці два елементи в кінці тіла.

Заповніть CSS для елементів, запропонованих тут:

 & lt; div id = "dialshadowhorizontal" class = "тінь" & gt; & lt; / div & gt;
& lt; div id = "dialshadowvertical" class = "тінь" & gt; & lt; / div & gt; 

 Тіло {
  Фон: # 09CBF7;
}
#sketch {
  Коробка-тінь: 2PX 2PX 10PX RGBA (0, 0, 0, .25) Вставка;
} 

14. Використовуйте WEBSOCKETS

На початку цього навчального посібника ми коротко згадуємо за допомогою веб-серверів за допомогою нашого сервера вузлів. Тепер у вас є автономний малюнок для планшета, ми будемо дивитися на те, щоб він був доступний для вашого телефону. Однак, телефони можуть бути занадто малими, щоб відобразити як екран, так і елементи керування. Тому ми використовуємо розетки для спілкування між телефоном та екраном комп'ютера.

15. Визначити розмір пристрою

У основному HTML-файлі замініть main.js з extra.js . Останній містить все, що ми зробили до цих пір, з модифікаціями обробляти пристрої та розетки, які ми перевіряємо наступні кроки. Подивитися detectdevice () - Цей метод тепер називається навантаження замість в цьому() і вирішить, який "режим" обробляє для програми.

Нижче наведено конкретний випадок виявлення телефону:

 if (window.innerwidth & lt; 768) {
  socket = io.connect ();
  document.queryselector ('# sketch'). Видалити ();
  var dials = document.queryseelcall ('. Наберіть ,.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 ('draw', дані);
});
socket.on ('rease', функція (дані) {
  io.sockets.emit ('rease', дані);
});
socket.on ("oncredframe", функція (дані) {
  screenwidth = data.ScreenWidth;
  screenheight = data.ScreenHeight;
  io.sockets.emit ('readrame, дані, дані);
}); 

17. Виправте орієнтацію телефону

Відвідайте LocalHost на своєму комп'ютері, а також доступу до неї дистанційно з телефоном (наприклад, ви раніше робили з вашого планшета). Тепер ви повинні побачити лінію, яка намальована на вашому екрані, повертаючи циферблат на своєму телефоні. Однак ви помітите, що циферблат не відповідає належним чином, якщо телефон знаходиться в портретному режимі.

Ми можемо це виправити з деякими CSS:

 Екран @media та (Орієнтація: портрет) {
  .dial.big # dialvercical, .shadow.big # dialshadowvertical {
  Право: Calc (50% - 75PX);
  Нижня: 20px;
  Верх: Авто;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  ліворуч: Calc (50% - 75PX);
  Верх: 20px;
  }
} 

18. Зробіть іграшку більш реалістичною

Давайте повернемося до нашої версії планшета. На жаль, вібраційний API не доступний на iOS, тому ми не можемо реалізувати гаптичні відгуки, коли набирачі будуть повернуті. У оригінальній іграшці, однак, ви можете залишити тимчасові чорні відбитки пальців на екрані, якщо ви натиснули його. Ми можемо додати сенсорний захід на пристрої, щоб повторити цю функцію.

Встановіть ці слухачі в цьому() і вивчити функції, які вони називають:

 Якщо (тип === "все") {
  canvas.addeventlistener ('touchstart', функція (e) {
  e.preventdefault ();
  drawfingerprint (e.Layerx, e.layery, true);
  });
  canvas.addeventlistener ('touchend', функція (e) {
  sidefingerprint (e.Layerx, e.layery);
  });
} 

19. Збережіть копію полотна

В drawfingerrint () Метод, перш ніж ми робимо все інше, ми зберігаємо копію поточного стану полотна до прихованого елемента, який ми використовуємо, щоб відновити наш малюнок під час очищення друку. Це відбувається тільки на першому дотику, а не на наступних дзвінках, які збільшують розмір друку кожні 100 мс.

 Функція DrawingFingerPrint (XPOS, YPOS, SAVECANVAS) {
  / * Часткова функція, див. Extra.js * /
  якщо (Savecanvas) {
  hiddencanvas = document.createlement ("полотно");
  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" маніфест = "sketch.appcache" & gt; 

21. Зберегти заявку

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

Ця стаття спочатку з'явилася Журнал веб-дизайнера випуск 263. Купити його тут .

Читати далі:

• 15 веб-апіс ви ніколи не чули
• Посібник для розробки інтерфейсу
• Керівництво для написання кращих CSS