Opprett en digital ets en skisse

I denne opplæringen tar vi den mekaniske tegningen Toy Etch en skisse som en inspirasjon og forsøker å implementere disse funksjonene for moderne enheter, med webteknologier. Ved hjelp av (passende navn) lerret fokuserer vi først på tabletter, som i form er i form til det autentiske leketøyet. Vi kan dra nytte av å berøre hendelser for å kontrollere ringeren, og enhetens bevegelseshendelser for å slette innholdet. Ikke forlater telefoner ut, vi vil også utforske hvordan man bruker websockets for å forbedre mulighetene ved å splitte kontrollene og tegneområdet.

01. Få eiendelene

Denne opplæringen vil bruke node.js. Før vi kommer i gang, gå til Filsilo. , velg gratis ting og gratis innhold ved siden av opplæringen - her kan du laste ned de eiendelene du trenger for opplæringen. Kjør deretter kommandoene nedenfor, som vil installere avhengighetene og starte serveren. Vi bruker node for å lage en lokal vert , og det vil også tjene oss senere for websockets.

 npm installasjon
Node server / index.js 

02. Bruk tegning () -funksjonen

I main.js. , den tegne() Funksjonen vil være midtpunktet for søknaden vår. Vi bruker lerret til å tegne en linje mellom to poeng; Opprinnelsen (X1, Y1), hvor vi sist forlot tegningen, og destinasjonen (X2, Y2), det nye punktet vi ønsker å nå. Vi må nå utløse denne funksjonen for å observere noen form for tegning.

 Funksjon Tegn (X1, Y1, X2, Y2) {
  // kontekst er satt globalt i init ()
  kontekst.beginpath ();
  kontekst.Moveto (x1, y1);
  kontekst.Lineto (x2, y2);
  kontekst.Stroke ();
} 

03. Implementer tastaturhendelser

Før vi implementerer ringer, la oss raskt legge til en tastaturlytter som kan utløse vår trekkfunksjon. Du har allerede blitt forsynt med de forskjellige Keycodes I eksemplet, men du må endre lytteren litt for å utløse tegne() funksjonen vi definerte tidligere. Oppdater nå nettleseren din og se hva du kan tegne med piltastene.

 Document.AddeventListener ('KeyDown', Funksjon (E) {
  / * Keycode-bryteren går her * /
  tegne (Math.Floor (prev_horizontal), matte.floor (prev_vertical), matte.floor (horisontal), matematikk
  prev_vertical = vertikal;
  prev_horizontal = horisontal;
}); 

04. Endre størrelsen på lerretet

Du har kanskje lagt merke til at vårt lerretelement ikke har en størrelse som er tildelt den ennå. For tegnebrettet vil vi ha en større plass, kanskje til og med hele vinduet. Koden nedenfor tar vare på Resize-arrangementet, men ikke glem å ringe justeres () i i det() også.

 Funksjonsjustering av () {
  // lerret er definert globalt i init ()
  canvas.width = window.innerwidth;
  Canvas.Height = window.InnerHeight;
}
window.addeventlistener ('resize', justeres navn); 

05. Legg til en ramme

Vi vil at programmet skal se ut som det opprinnelige leketøy så mye som mulig, så vi vil legge til en ramme rundt tegneområdet. For å gjøre det, kan vi definere en marginverdi og endre CSS for #skisse til margin: 20px auto; å sentrere lerretet horisontalt og holde en større plass på bunnen for ringer.

 var frameemarginvertical = 122;
var frameemarginhorizontal = 62;
Funksjonsjustering av () {
  Canvas.width = window.Innerwidth - Framemarginhorizontal;
  Canvas.Height = window.InnerHeight - framemarginvertisk;
} 

06. Opprett ringer

Vi har allerede gitt deg CSS for ringer inn Offentlige / CSS / Styles.csss , så vær så snill å ta en titt. Deretter legger du til to & lt; div & gt; Tags under den & lt; lerret & gt; i HTML-filen, som beskrevet nedenfor. Som en konvensjon vil vi bruke venstre dial for horisontal tegning, og retten til vertikal. Vi legger også til nye variabler til i det() Funksjon for å forberede seg på berøringshendelser.

 & lt; div id = "dialhorizontal" class = "ring" & gt; & lt; / div & gt;
& lt; div id = "dialvertical" class = "ring" & gt; 

 Var TargetLeft = Document.GetelementByid ('Dialhorizontal');
VAR RegionLeft = Ny ZingTouch.Region (TargetStft);
Var TargetRight = Document.GetelementByid ('Dialvertical');
Var RegionRight = New Zingtouch.region (TargetRight); 

07. Bruk ZingTouch.

ZingTouch er et JavaScript-bibliotek som er i stand til å oppdage ulike berøringsbevis, og vil også håndtere musearrangementer. Det er gitt for deg i / Offentlig / Lib / mappe, som vi bruker den til å kontrollere våre ringer. Nedenfor er implementeringen for venstre kontroll; Du må replikere og endre det for den andre siden.

 RegionLeft.bind (TargetLeft, 'Roter', Funksjon (E) {
  hvis (e.detail.distancefromlast & lt; 0) {
  --horisontal;
  } else {
  ++ horisontal;
  }
  anglehorizontal + = e.detail.distancefromlast;
  TargetLft.Style.transform = 'Roter (' + Anglehorizontal + 'deg)';
  tegne (Math.Floor (prev_horizontal), matte.floor (prev_vertical), matematiske
  prev_horizontal = horisontal;
}); 

08. Implementeringsbrenner

For å blokkere linjene fra å gå på skjermen, bruker vi candraw () funksjon, som returnerer en boolsk. Vi sender den retningen, enten 'horisontal' eller vertikal ', og verdien av enten den horisontale eller vertikale variabelen. Vi kaller denne funksjonen i "Roter" lytteren til begge ringer, og bare hvis "sant" øker vinkelen og ringer til tegne() funksjon.

 Funksjon Candraw (retning, verdi) {
  Var max = (retning === 'horisontal')? (Canvas.width): (Canvas.Height);
  hvis (verdi & lt; 2 || verdi og gt; maks - 2) {
  returnere false;
  }
  returnere sant;
} 

09. Unngå oppringingsproblemer

Med grensene vi nettopp har implementert, er det en sjanse for at dialen kan bli sittende fast i den ene enden hvis verdien går over grensen, selv etter et desimalpunkt. For å unngå denne situasjonen, bør vi håndtere saken der candraw () er falsk og tilbakestill verdien til en tidligere gyldig, som vist her for den horisontale kontrolleren:

 Hvis (candraw ("horisontal", horisontal)) {
  anglehorizontal + = e.detail.distancefromlast;
  TargetLft.Style.transform = 'Roter (' + Anglehorizontal + 'deg)';
  tegne (Math.Floor (prev_horizontal), matte.floor (prev_vertical), matematiske
  prev_horizontal = horisontal;
} else {
  horisontal = prev_horizontal;
} 

10. Få tegnebrettet på nettbrettet ditt

Det anbefales alltid å teste på dine målrettede enheter så tidlig som mulig. Vår søknad er nå i god form, og kan svare på å berøre hendelser. Følg trinnene for å få tilgang til Localhost eksternt for å få tegnebrettet på nettbrettet.

Deretter bruker vi Safari og Develop-menyen for å inspisere programmet på en iPad. For Android-enheter, bruk krom: // inspisere .

11. Test akselerometeret

Koble nettbrettet til datamaskinen via USB og inspiser programmet ved hjelp av utviklerverktøyene.

Med koden under på plass, bør du kunne se de ulike akselerasjonsverdiene, når du flytter enheten rundt. For å tilbakestille lerretet, har vi bestemt oss for å vurdere en akselerasjon på X-aksen over 5, og sakte redusere opasiteten ( sletting ).

 var sletting = 1; / * Definer som en global variabel * /
window.addeventlistener ('deviceMotion', funksjon (begivenhet) {
  konsoll.log ('akselerasjon ::', event.acceleration);
  hvis (event.acceleration.x & gt; 5) {
  Eraserate - = Math.abs (Event.Acceleration.x / 100);
  Console.log ('Slett ::', Eraserate);
  }
}); 

12. Rist for å slette

Vi har sett i forrige trinn hvordan å sjekke om bevegelse og akselerasjon. Vi må nå ringe fadedrawing () når vår tilstand er oppfylt. I dette tilfellet omgir vi en eksakt kopi av lerretet på en annen opasitet.

Tilbakestill GlobalAlpha til 1 i tegne() og sett den GLOBALCOMPOSITEOPERING tilbake til kilden over.

 Funksjon Fadedrawing () {
  hvis (erasere & lt; 0) {
  kontekst.Clearrect (0, 0, Canvas.width, Canvas.Height);
  sletting = 1;
  komme tilbake;
  }
  kontekst.globalalpha = sletting;
  kontekst.globalcompositeOpering = 'Kopier';
  kontekst.Drawimage (lerret, 0, 0);
} 

13. Gjør det som den virkelige avtalen

Så langt ser vår søknad ganske tørt og flatt. For å gi det noe dybde, vil vi legge til en rammefarge, en skygge inne i rammen og litt volum på rammen. CSS for ratteskyggene er allerede gitt, men du må legge til de to elementene på slutten av kroppen.

Fullfør CSS for elementene som er foreslått her:

 & lt; div id = "dialShadowhorizontal" klasse = "skygge" & gt; & lt; / div & gt;
& lt; div id = "dialShadowvertical" class = "shadow" & gt; & lt; / div & gt; 

 Kropp {
  Bakgrunn: # 09CBF7;
}
#Sketch {
  Box-Shadow: 2px 2px 10px RGBA (0, 0, 0, .25) INSET;
} 

14. Bruk WebSockets.

I begynnelsen av denne opplæringen nevnte vi kort med websockets via vår node-server. Nå som du har en frittstående tegnepute for nettbrett, vil vi se på at den er tilgjengelig for telefonen din også. Imidlertid kan telefonene være for små til å vise både skjermen og kontrollene. Vi bruker derfor stikkontakter for å kommunisere mellom telefon og dataskjerm.

15. Oppdag enhetens størrelse

I den viktigste HTML-filen, Erstatt main.js. med Extra.js. . Sistnevnte inneholder alt vi har gjort så langt, med endringer for å håndtere enheter og stikkontakter, som vi vil inspisere i følgende trinn. Se på DetectDevice () - Denne metoden blir nå kalt på last i stedet for i det() og bestemmer hvilken "modus" å håndtere for søknaden.

Nedenfor er det spesielle tilfellet av en telefon detektert:

 hvis (window.innerwidth & lt; 768) {
  socket = io.Connect ();
  Dokument.QuerySelector ('# Sketch'). Fjern ();
  varring = Dokument.QuySalgicesAlle ('. Dial, .shadow');
  [] .foreach.call (ringer, funksjon (element) {
  item.classlist.add ('stor');
  });
  isctrols = sant;
  framemarginvertical = 62;
  socket.emit ('klar', {'klar': 'kontroller'});
} 

16. Fra telefon til datamaskin

Gjennom Extra.js. Du vil legge merke til biter av kode som socket.emit () eller socket.on () . Dette er emittere og lyttere for våre kontroller (telefon) og skjerm (datamaskin) forekomster. Hver utstilt hendelse må gå gjennom serveren som distribueres til alle tilkoblede stikkontakter. I server \ index.js. Legg til noen flere lyttere i "Connection" -funksjonen og start Node-serveren på nytt.

 socket.on ('tegne', funksjon (data) {
  io.sockets.emit ('tegning', data);
});
socket.on ('slette', funksjon (data) {
  io.sockets.emit ('slette', data);
});
socket.on ('justering av', funksjon (data) {
  screenwidth = data.screenwidth;
  screenheight = data.screenheight;
  io.sockets.emit ('justering av', data);
}); 

17. Fix Telefon Orientering

Besøk localhost på datamaskinen din, mens du får tilgang til den eksternt med telefonen din (som du tidligere gjorde fra nettbrettet ditt). Du bør nå se en linje som trekkes på skjermen mens du slår på telefonen på telefonen. Du vil imidlertid legge merke til at rattene ikke passer riktig hvis telefonen er i portrettmodus.

Vi kan fikse dette med noen CSS:

 @media skjerm og (orientering: portrett) {
  .dial.big # dialvertical, .shadow.big # dialShadowvertical {
  Høyre: Calc (50% - 75px);
  bunn: 20px;
  Topp: Auto;
  }
  .dial.big # Dialhorizontal, .shadow.big # DialShadowhorizontal {
  Venstre: Calc (50% - 75px);
  Topp: 20px;
  }
} 

18. Gjør leketøyet mer realistisk

La oss komme tilbake til vår nettbrettversjon. Dessverre er vibrasjons API ikke tilgjengelig på iOS, så vi kan ikke implementere haptisk tilbakemelding når rattene er slått. I det opprinnelige leketøyet kan du imidlertid legge midlertidige svarte fingeravtrykksmerker på skjermen hvis du presset den. Vi kan legge til en berøringshendelse på enheten for å kopiere denne funksjonen.

Sett disse lyttere i i det() og utforske funksjonene de ringer til:

 Hvis (Type === 'All') {
  Canvas.AddeventListener ('TouchStart', Funksjon (E) {
  e.preventdefault ();
  drawfingerprint (e.layerx, e.Layery, True);
  });
  Canvas.AddeventListener ('Touchend', Funksjon (E) {
  HidefingerPrint (E.Layerx, E.Layery);
  });
} 

19. Lagre en kopi av lerretet

I den Drawfingerprint () Metode, før vi gjør noe annet, sparer vi en kopi av den nåværende tilstanden til lerretet til et skjult element som vi bruker til å gjenopprette tegningen når du fjerner utskriften. Det skjer bare ved første berøring, og ikke på de påfølgende anropene som øker størrelsen på utskriften hver 100ms.

 Funksjon DrawFingerPrint (XPOS, YPOS, SAVECANVAS) {
  / * Delvis funksjon, se ekstra.js * /
  hvis (savekanvas) {
  Hiddencanvas = Dokument.Createmement ('lerret');
  Var hiddencontext = hiddencanvas.getContext ('2D');
  hiddencanvas.width = canvas.width;
  Hiddencanvas.Height = Canvas.Height;
  hiddencontext.drawimage (lerret, 0, 0);
  }
} 

20. Kjør applikasjonen frakoblet

Du kan nå få applikasjonen virkelig frittstående ved å lagre den til nettbrettet som en startskjerm-app. Vi vil ikke kunne gjøre det samme for telefonen, da den krever tilkobling til serveren. I /offentlig , finn filen som heter Sketch.appcache. og erstatt alle forekomster av 'Localhost' av din IP-adresse.

Nå endre HTML å lese som følger:

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

21. Lagre programmet

Nå besøk programmet på nytt på nettbrettet ditt og velg alternativet Legg til i startskjerm. Et nytt ikon skal vises på skrivebordet ditt. Åpne det en gang mens du fortsatt er koblet til din localhost eksternt. Cache manifest vi satt opp tidligere, lastes ned alle nødvendige filer for offline bruk i bakgrunnen. Slå av Wi-Fi av og åpne appen på nytt. Voilà!

Denne artikkelen opprinnelig dukket opp i Web Designer Magazine. utgave 263. Kjøp det her .

Les mer:

• 15 web APIer du aldri har hørt om
• En nybegynnerveiledning for å designe grensesnitt animasjoner
• En veiledning for å skrive bedre CSS