Crea un etch digitale uno schizzo

In questo tutorial, prendiamo il giocattolo del disegno meccanico a un schizzo come ispirazione e tenta di implementare queste caratteristiche per i dispositivi moderni, con tecnologie web. Usando la tela (giustamente nominata), ci concentriamo per la prima volta sui tablet, che sono simili a forma al giocattolo autentico. Possiamo sfruttare gli eventi touch per controllare i quadranti e gli eventi di movimento del dispositivo per cancellare il contenuto. Non lasciare i telefoni, esploreremo anche come utilizzare WebCeets per migliorare le possibilità dividendo i controlli e l'area di disegno.

01. Prendi le risorse

Questo tutorial userà Node.js. Prima di iniziare, vai a Filelilo. , Seleziona Stuff gratuito e contenuti gratuiti Accanto al tutorial - Qui puoi scaricare le risorse necessarie per il tutorial. Quindi eseguire i comandi di seguito, che installeranno le dipendenze e avvia il server. Stiamo usando il nodo per creare a localhost. , e ci servirà anche più tardi per le webschet.

 Installazione NPM
Node Server / Index.js 

02. Utilizzare la funzione Disegna ()

Nel main.js. , il disegnare() La funzione sarà il punto centrale della nostra applicazione. Usiamo la tela per disegnare una linea tra due punti; L'origine (X1, Y1), essendo dove abbiamo lasciato il nostro disegno, e la destinazione (X2, Y2), il nuovo punto che vogliamo raggiungere. Ora abbiamo bisogno di innescare questa funzione per osservare qualsiasi forma di disegno.

 Disegno funzionale (x1, y1, x2, y2) {
  // Context è impostato a livello globale in init ()
  context.beginpath ();
  context.moveto (x1, y1);
  context.LINETTO (X2, Y2);
  context.stroke ();
} 

03. Implementare gli eventi della tastiera

Prima di implementare i quadranti, aggiungiamo rapidamente un ascoltatore della tastiera che può attivare la nostra funzione di disegno. Sei già stato fornito con il diverso keycodes. Nell'esempio, ma dovrai modificare leggermente l'ascoltatore per innescare il disegnare() funzione che abbiamo definito in precedenza. Ora aggiorna il tuo browser e guardi cosa puoi disegnare con i tasti freccia.

 Document.AdDeventListener ('Keydown', Function (E) {
  / * Switch KeyCode va qui * /
  Disegna (matematica.Floor (prev_horizontal), matematica.Floor (prev_vertical), matematica.Floor (orizzontale), matematica.Floor (verticale));
  prev_vertical = verticale;
  prev_horizontal = orizzontale;
}); 

04. Ridimensiona la tela

Potresti aver notato che il nostro elemento tela non ha ancora una dimensione assegnata. Per il nostro tavolo da disegno, vorremo uno spazio più grande, forse anche l'intera finestra. Il codice qui sotto si prende cura dell'evento Ridimensiona, ma non dimenticare di chiamare regolazioneframe () nel dentro() anche.

 Funzione Regoliframe () {
  // tela è definita globalmente in init ()
  canvas.width = window.innerwidth;
  canvas.Height = window.innerheight;
}
window.addeventListener ('ridimensiona', regolationframe); 

05. Aggiungi una cornice

Vogliamo che l'applicazione assomigliasse al giocattolo originale il più possibile, quindi vogliamo aggiungere una cornice attorno all'area di disegno. Per fare ciò, possiamo definire un valore di margine e modificare il CSS per #schizzo al margine: 20px Auto; Per centrare la tela orizzontalmente e mantenere uno spazio più grande nella parte inferiore per i quadranti.

 var framemarginvertical = 122;
var framemarginhorizontal = 62;
Funzione Regoliframe () {
  canvas.width = window.innerwidth - framemarginhorizontal;
  canvas.Height = window.innerheight - framemarginvertical;
} 

06. Creare i quadranti

Ti abbiamo già dato il CSS per i quadranti in Pubblico / CSS / Styles.CSS , quindi sentiti libero di dare un'occhiata. Quindi, aggiungi due & lt; div & gt; Tag sotto & lt; tela e GT; Nel file HTML, come descritto di seguito. Come convention, useremo il quadrante sinistro per il disegno orizzontale e il diritto per la verticale. Aggiungiamo anche nuove variabili al dentro() funzione per prepararsi per gli eventi touch.

 & lt; div id = "Diahorizontal" Class = "Dial" & GT; & lt; / DIV & GT;
& lt; div id = class "dialvertical" = "Dial" & gt; & lt; / div & gt; 

 VAR TargetLeft = Document.getelementbyID ('Diahorizontal');
var regionleft = nuovo zingtouch.region (targetleft);
var tarsetright = document.getelementbyID ('Dialvertical');
var regionright = nuovo zingtouch.region (targetright); 

07. Usa ZingTouch.

ZingTouch è una libreria JavaScript in grado di rilevare vari gesti touch e gestirà anche gli eventi del mouse. È previsto per te nel / Pubblico / Lib / cartella, come lo usiamo per controllare i nostri quadranti. Di seguito è riportata l'implementazione per il controllo sinistro; Dovrai replicare e modificarlo per l'altro lato.

 regionleft.bind (Targetleft, "Rotate", funzione (E) {
  IF (E.Detail.DistanceFromLast & Lt; 0) {
  --orizzontale;
  } altro {
  ++ orizzontale;
  }
  AngleHorizontal + = E.Detail.distanceFromLast;
  targetleft.style.transform = 'rotate (' + anglyhorizontal + 'deg)';
  Disegna (Math.Floor (Prev_Horizontal), Math.Floor (Prev_vertical), Math.Floor (orizzontale), matematica.Floor (prev_vertical));
  prev_horizontal = orizzontale;
}); 

08. Implementare i limiti di selezione

Per bloccare le linee dal disattivare lo schermo, usiamo il candraw () funzione, che restituisce un booleano. Passiamo la direzione, sia "orizzontale" o "verticale" e il valore della variabile orizzontale o verticale. Chiamiamo questa funzione nell'ascoltatore "ruota" di entrambi i quadranti, sia solo se "True" incrementiamo l'angolo e chiama il disegnare() funzione.

 funzione candraw (direzione, valore) {
  var max = (direzione === 'orizzontale')? (canvas.width) :( canvas.Height);
  if (Value & Lt; 2 || Valore e GT; max - 2) {
  restituire false;
  }
  restituire vero;
} 

09. Evitare problemi di composizione

Con i limiti che abbiamo appena implementato, c'è una possibilità che il quadrante potrebbe rimanere bloccato a un'estremità se il valore va oltre il limite, anche da un punto decimale. Per evitare questa situazione, dovremmo gestire il caso in cui candraw () è falso e ripristinare il valore a uno precedentemente valido, come mostrato qui per il controller orizzontale:

 IF (CANDRAW ('orizzontale ", orizzontale)) {
  AngleHorizontal + = E.Detail.distanceFromLast;
  targetleft.style.transform = 'rotate (' + anglyhorizontal + 'deg)';
  Disegna (Math.Floor (Prev_Horizontal), Math.Floor (Prev_vertical), Math.Floor (orizzontale), matematica.Floor (prev_vertical));
  prev_horizontal = orizzontale;
} altro {
  orizzontale = prev_horizontal;
} 

10. Prendi il tavolo da disegno sul tuo tablet

Si consiglia sempre di testare i dispositivi mirati il ​​più presto possibile. La nostra applicazione è ora in una buona forma e può rispondere agli eventi touch. Seguire i passaggi per accedere a LocalHost da remoto per ottenere il tavolo da disegno sul tablet.

Successivamente, useremo Safari e il menu Sviluppa per ispezionare l'applicazione su un iPad. Per dispositivi Android, utilizzare Chrome: // Ispeziona .

11. Testare l'accelerometro

Collega il tablet al computer tramite USB e ispeziona l'applicazione utilizzando gli strumenti sviluppatori.

Con il codice qui sotto, dovresti essere in grado di vedere i vari valori di accelerazione, mentre sposta il tuo dispositivo. Per ripristinare la tela, abbiamo deciso di considerare un'accelerazione sull'asse x oltre 5, e diminuire lentamente l'opacità ( cancellazione ).

 Var Eraserate = 1; / * Definisci come variabile globale * /
window.addeventListener ('DeviceMotion', Function (Event) {
  console.log ('accelerazione ::', event.accelerazione);
  se (event.aCeleration.x & GT; 5) {
  cancellazione - = math.abs (event.acceleration.x / 100);
  console.log ('cancellazione ::', cancellata);
  }
}); 

12. Agitare per eliminare

Abbiamo visto nel passaggio precedente come controllare il movimento e l'accelerazione. Ora ho bisogno di chiamare FadedRawing () quando la nostra condizione è soddisfatta. In questo caso, ridisegniamo una copia esatta della tela in una diversa opacità.

Resettare il globalalpha a 1 in disegnare() e imposta il. GlobalCompositeoperation. Torna al Source-Over.

 Funzione Fedaderawing () {
  IF (ERASERANO & LT; 0) {
  context.clearrect (0, 0, canvas.width, tela.Height);
  cancellazione = 1;
  ritorno;
  }
  context.globalfha = cancellazione;
  context.globalcompositeoperation = 'copia';
  context.drawimage (tela, 0, 0);
} 

13. Fai sembrare il vero affare

Finora, la nostra applicazione sembra piuttosto insipida e piatta. Per dargli una profondità, aggiungeremo un colore del telaio, un'ombra all'interno del telaio e un po 'di volume sui quadranti. Il CSS per le ombre di quadrante è già fornito, ma dovrai aggiungere questi due elementi alla fine del corpo.

Completa il CSS per gli elementi suggeriti qui:

 & lt; div id = "DialShadowhorizontal" Class = "Shadow" & GT; & lt; / DIV & GT;
& lt; div id = "dialshadowvertical" class = "shadow" & gt; & lt; / div & gt; 

 Body {
  Sfondo: # 09cbf7;
}
#sketch {
  Box-shadow: 2px 2px 10px RGBA (0, 0, 0, .25) INSET;
} 

14. Utilizzare Webschees.

All'inizio di questo tutorial, abbiamo menzionato brevemente utilizzando WebSewet tramite il nostro server nodo. Ora che hai un pad di disegno autonomo per tablet, guarderemo a renderlo disponibile anche per il tuo telefono. Tuttavia, i telefoni potrebbero essere troppo piccoli per visualizzare sia lo schermo che i controlli. Pertanto, usiamo prese per comunicare tra telefono e schermo del computer.

15. Rileva la dimensione del dispositivo

Nel file HTML principale, sostituire main.js. con extra.js. . Quest'ultimo contiene tutto ciò che abbiamo fatto finora, con modifiche per gestire dispositivi e prese, che ispezionano nei seguenti passaggi. Dai un'occhiata a DetectDevice () - Questo metodo ora viene chiamato il carico invece di dentro() e deciderà quale "modalità" da gestire per l'applicazione.

Di seguito è riportato il caso particolare di un telefono:

 IF (window.innerwidth & lt; 768) {
  socket = io.Connect ();
  Document.QuerySelector ('# Sketch'). Rimuovi ();
  Var Dials = Document.querySelectorAll ('. Dial, .Shadow');
  [] .FOFOREACH.CALL (dial, funzione (elemento) {
  elemento.classlist.add ('Big');
  }););
  ISCONTROLI = TRUE;
  framemarginvertical = 62;
  socket.emit ('pronto', {'pronto': 'controlli'});
} 

16. Dal telefono al computer

Per tutto extra.js. Noterai bit di codice come socket.emit () o socket.on () . Questi sono gli emettitori e gli ascoltatori per i nostri controlli (telefono) e istanze dello schermo (computer). Ogni evento emesso deve passare attraverso il server per essere re-distribuito a tutte le prese collegate. Nel Server \ index.js. Aggiungi alcuni più ascoltatori nella funzione 'Connection' e riavviare il server del nodo.

 socket.on ('Disegna', funzione (dati) {
  io.sochets.emit ('Disegna', dati);
}););
socket.on ('cancella', funzione (dati) {
  io.sochets.emit ('cancella', dati);
}););
socket.on ('regolazioneframe', funzione (dati) {
  screenwidth = data.screenwidth;
  screenHeight = data.screenheight;
  io.sochets.emit ('Regolame', dati);
}); 

17. Fissare l'orientamento del telefono

Visita il localhost sul tuo computer, mentre accedi a remoto con il tuo telefono (come hai fatto in precedenza dal tuo tablet). Dovresti ora vedere una linea di essere disegnata sullo schermo mentre si gira i quadranti sul telefono. Noterai, tuttavia, che i quadranti non si adattano correttamente se il telefono è in modalità verticale.

Possiamo risolvere questo con alcuni CSS:

 @media schermo e (orientamento: ritratto) {
  .DIAL.BIG # Dialvertical, .Shadow.big # DialShadowvertical {
  Destra: Calc (50% - 75 px);
  Fondo: 20px;
  Top: Auto;
  }
  .DIAL.Big # Diahorizontal, .Shadow.big # DialShadowhorizontal {
  a sinistra: CALC (50% - 75PX);
  Top: 20px;
  }
} 

18. Rendi il giocattolo più realistico

Torniamo alla nostra versione del tablet. Purtroppo, l'API delle vibrazioni non è disponibile su iOS, quindi non possiamo implementare feedback aptica quando i quadranti sono girati. Nel giocattolo originale, tuttavia, è possibile lasciare segni temporanei di impronte digitali neri sullo schermo se lo hai spinto. Possiamo aggiungere un evento touch sul dispositivo per replicare questa funzione.

Imposta questi ascoltatori in dentro() ed esplorare le funzioni che chiamano:

 IF (TYPE === 'ALL') {
  canvas.addeventListener ('Touchstart', funzione (e) {
  e.preventdefault ();
  DrawfingerPrint (E.Layerx, E.Layery, TRUE);
  }););
  Canvas.AddeventListener ('TOUCHEND', FUNCTION (E) {
  HidefingerPrint (E.Layerx, E.Layery);
  }););
} 

19. Salva una copia della tela

Nel DrawfingerPrint () Metodo, Prima di fare qualsiasi altra cosa, salviamo una copia dello stato corrente della tela su un elemento nascosto che usiamo per ripristinare il nostro disegno quando si cancella la stampa. Questo succede solo sul primo tocco, e non sulle chiamate successive che aumentano le dimensioni della stampa ogni 100 ms.

 Funzione DrawfingerPrint (XPOS, YPOS, SaveCanvas) {
  / * funzione parziale, fare riferimento a extra.js * /
  IF (SaveCanvas) {
  hiddencanvas = document.createelment ('tela');
  var hiddencontext = hiddencanvas.getcontext ('2d');
  hiddencanvas.width = canvas.width;
  hiddencanvas.height = canvas.Height;
  hiddencontext.drawimage (tela, 0, 0);
  }
} 

20. Esegui l'applicazione offline

Ora puoi rendere l'applicazione veramente standalone salvandola sul tablet come app per la schermata iniziale. Non saremo in grado di fare lo stesso per il telefono, poiché richiede la connessione al server. Nel /pubblico , individuare il file denominato schizzo.Appcache. e sostituire tutte le istanze di "localhost" dal tuo indirizzo IP.

Ora, modificare l'HTML da leggere come segue:

 & lt; html lang = "en" manifest = "sketch.appcache" & gt; 

21. Salva l'applicazione

Ora visita nuovamente l'applicazione sul tablet e seleziona l'opzione Aggiungi alla schermata iniziale. Una nuova icona dovrebbe apparire sul tuo desktop. Aprilo una volta mentre è ancora collegato al tuo localhost da remoto. Il manifest della cache che abbiamo impostato in precedenza scaricherà tutti i file necessari per l'uso offline in background. Accendi il wi-fi e apri di nuovo l'app. Ecco!

Questo articolo è originariamente apparso in Web Designer Magazine. Edizione 263. Compralo Qui .

Per saperne di più:

• 15 API Web che non hai mai sentito parlare
• Una guida per principianti per progettare animazioni di interfaccia
• Una guida per scrivere migliori CSS