Luo digitaalinen etch a sketch

Tässä opetusohjelmassa otetaan mekaaninen piirustus lelu etsimään luonnoksen inspiraationa ja pyrkimys toteuttaa nämä ominaisuudet nykyaikaisille laitteille web-teknologioilla. Käyttämällä (Aptly nimeltään) kankaalle keskitymme ensin tabletteihin, jotka ovat samanlaisia ​​kuin aito lelu. Voimme hyödyntää kosketustapahtumia valitsemalla valitset ja laite Motion -tapahtumat sisällön poistamiseksi. Älä jätä puhelimia ulos, tutkimme myös verkkosivustojen käyttämistä mahdollisuuksien parantamiseksi jakamalla säätimet ja piirustusalueet.

01. Hanki varat

Tämä opetusohjelma käyttää solmua.js. Ennen kuin aloitamme, mene Filesilo , Valitse ILMAINEN tavara ja ilmainen sisältö opetusohjelman vieressä - Täällä voit ladata opetusohjelman tarvitsemasi varat. Suorita sitten alla olevat komennot, jotka asentavat riippuvuudet ja käynnistää palvelimen. Käytämme solmua luomaan paikallinen isäntä , ja se palvelee myös meitä myöhemmin verkkosivustoille.

 NPM-asennus
Solmu Server / Index.js 

02. Käytä Draw () -toimintoa

Sisään Main.js , Piirrä () Toiminto on sovelluspisteemme keskipiste. Käytämme kankaalle piirtää linjan kahden pisteen välillä; Alkuperä (X1, Y1), jona me viimeksi jäimme piirustuksestamme ja kohde (X2, Y2), uusi kohta, jota haluamme päästä. Meidän on nyt käynnistettävä tämä tehtävä tarkkailla minkä tahansa piirustuksen muodossa.

 Toiminto piirtää (X1, Y1, X2, Y2) {
  // Konteksti on maailmanlaajuisesti init ()
  konteksti.beginpath ();
  konteksti.moveto (X1, Y1);
  konteksti.lineeto (x2, y2);
  konteksti.stroke ();
} 

03. Toteuta näppäimistötapahtumia

Ennen kuin toteutamme valitset, lisätään nopeasti näppäimistön kuuntelija, joka voi käynnistää Draw-toiminnon. Sinulle on jo toimitettu eri Keycodes Esimerkissä, mutta sinun on muutettava kuuntelijaa hieman laukaisemaan Piirrä () Toiminto, jota määritellään aiemmin. Päivitä selaimesi ja katso, mitä voit piirtää nuolinäppäimillä.

 Asiakirja.AddeventListener ("Keydown", Toiminto (E) {
  / * Keycode-kytkin menee tänne * /
  Piirrä (Math.Floor (PREV_HORIZONTAL), MATH.FLOOR (PREV_VERTINEN), MATH.FLOOR (horisontaalinen), Math.Floor (pystysuora));
  prev_vertical = pystysuora;
  prev_horizontal = vaakasuora;
}); 

04. Muuta kankaalle

Olet ehkä huomannut, että Canvas-elementtimme ei ole vielä määritetty koko. Piirustuskortille haluamme suuremman tilan, ehkä jopa koko ikkuna. Alla oleva koodi huolehtii koko tapahtumasta, mutta älä unohda soittaa Säädä () sisään sen sisällä() yhtä hyvin.

 Toiminto ADJURE () {
  // kankaalle määritellään maailmanlaajuisesti init ()
  canvas.width = window.innerwidth;
  Canvas.height = window.innerheight;
}
window.addeventlistener ('Muuta kokoa ", säätölaite); 

05. Lisää kehys

Haluamme, että sovellus näyttää alkuperäisen lelun mahdollisimman paljon, joten haluamme lisätä kehyksen piirustusalueen ympärille. Voit tehdä niin, voimme määritellä marginaalin arvon ja muuttaa CSS: tä #luonnos marginaaliin: 20px auto; Keskusta kangas vaakasuoraan ja pitää suuremman tilan alareunassa valitsimille.

 var framemarginen = 122;
var framemarginhorizontal = 62;
Toiminto säätää () {
  Canvas.width = Window.innerWidth - FramemarginHorizontal;
  canvas.height = window.innerheight - framemarginen;
} 

06. Luo valintakirja

Olemme jo antaneet sinulle CSS: n puhelimille Julkiset / CSS / tyylit.css , joten voit vapaasti katsoa. Seuraavaksi lisää kaksi & lt; div & gt; Tunnisteet & lt; canvas & gt; HTML-tiedostossa, kuten alla kuvataan. Yleissopimuksena käytämme vasentavaisuutta vaakasuoralle piirustukselle ja oikealle pystysuoraan. Lisäämme myös uusia muuttujia sen sisällä() Toiminto valmistautua kosketustapahtumiin.

 & lt; div id = "dialhorizontal" -luokka = "Dial" & GT; & lt; / div & gt;
& lt; div id = "dialisterinen" class = "dial" & gt; & lt; / div & gt; 

 var TARGETLEFT = document.gettelementbyid ("dialhorizontal");
var regionleft = uusi zingtouch.region (kohdennettu);
var resurssright = document.gettelementbyid ('diavertical');
var Regionright = uusi zingtouch.region (kohdeshritys); 

07. Käytä Zingtouchia

ZingTouch on JavaScript-kirjasto, joka pystyy havaitsemaan erilaisia ​​kosketuselitteitä ja käsittelevät myös hiiritapahtumia. Se on tarkoitettu sinulle / Julkinen / Lib / Kansio, kun käytämme sitä hallitsemaan valintasi. Alla on vasemman valvonnan toteutus; Sinun täytyy toistaa ja muuttaa sitä toiselle puolelle.

 Regionalft.bind (kohdenne, "Kierrä", toiminto (E) {
  jos (e.detail.distancefromlast & lt; 0) {
  --Horzontal;
  } muu {
  ++ horisontaalinen;
  }
  Anglehorizontal + = e.detail.distancefromlast;
  TARGETLEFY.STYLE.TRANSFORM = 'Kierrä (' + Anglehorizontal + '")';
  Piirrä (Math.Floor (Prev_horizontal), Math.Floor (Pref_vertical), Math.Floor (horisontaalinen), Math.Floor (Prev_vertical));
  prev_horizontal = vaakasuora;
}); 

08. Toteuta valintaryhmiä

Voit estää linjat menemästä pois näytöstä, käytämme Kynttitys () Toiminto, joka palauttaa Boolen. Lähdemme sen suuntaan, joko "vaakasuoraan" tai "pystysuoraan" ja joko vaakasuoran tai pystysuoran muuttujan arvo. Me kutsumme tätä toimintoa molempien soittaa "Kierrä" kuuntelijaksi, ja vain jos "tosi" kasvatamme kulmaa ja soitamme Piirrä () Toiminto.

 Toiminto (suunta, arvo) {
  var max = (suunta === "horisontaalinen")? (Canvas.width) :( Canvas.height);
  jos (arvo & lt; 2 || arvo & gt; max - 2) {
  palauta väärä;
  }
  Palauta totta;
} 

09. Vältä valintasi ongelmia

Rajat, joita olemme juuri toteuttaneet, on mahdollisuus, että valinta voi jumissa toisessa päässä, jos arvo menee yli rajan, jopa desimaalisen pisteen avulla. Tämän tilanteen välttämiseksi meidän pitäisi käsitellä tapausta, jossa Kynttitys () on väärä ja nollaa arvo aiemmin päteväksi, kuten tässä on esitetty horisontaaliseen ohjaimeen:

 Jos (kandat ("horisontaalinen", horisontaalinen)) {
  Anglehorizontal + = e.detail.distancefromlast;
  TARGETLEFY.STYLE.TRANSFORM = 'Kierrä (' + Anglehorizontal + '")';
  Piirrä (Math.Floor (Prev_horizontal), Math.Floor (Pref_vertical), Math.Floor (horisontaalinen), Math.Floor (Prev_vertical));
  prev_horizontal = vaakasuora;
} muu {
  horisontaalinen = PREV_HORIZONTAL;
} 

10. Hanki piirustuskortti tablet

On aina suositeltavaa testata kohdistetuilla laitteilla mahdollisimman varhaisessa vaiheessa. Hakemuksemme on nyt hyvässä kunnossa, ja se voi vastata kosketustapahtumiin. Noudata vaiheet, jotka koskevat localhost-etäisyyttä etänä saadaksesi piirustuskortin tablet-laitteeseen.

Seuraavaksi käytämme Safaria ja kehittää valikkoa tarkastamaan sovelluksen iPadissa. Android-laitteille Chrome: // tarkastaa .

11. Testaa kiihtyvyysmittari

Liitä tabletti tietokoneeseen USB: n kautta ja tarkasta sovellus kehittäjätyökaluilla.

Alla olevan koodin avulla sinun pitäisi pystyä näkemään erilaiset kiihdytysarvot, kun siirrät laitetta. Kankaan palauttamiseksi olemme päättäneet harkita kiihtyvyyttä X-akselilla yli 5 ja vähennä hitaasti läpinäkyvyyttä ( pyyhkiä pois ).

 var pyyhkäisy = 1; / * Määritä maailmanlaajuisena muuttujana * /
window.addeventlistener ("DeviceMotion", toiminto (tapahtuma) {
  konsoli.log ("kiihdytys ::", tapahtuma.taccelation);
  jos (tapahtuma.accelation.x & gt; 5) {
  pyyhkiä - = Math.abs (Event.accelation.x / 100);
  Console.log ("Erase ::", pyyhkeet);
  }
}); 

12. Ravista poistaa

Olemme nähneet edellisessä vaiheessa, miten voit tarkistaa liike ja kiihdytys. Meidän täytyy nyt soittaa fadedrawing () Kun ehtomme täyttyy. Tässä tapauksessa teimme uudelleen tarkan kopion kankaalle eri opasiteettia.

Nollaa globalfa 1 sisään Piirrä () ja aseta GlobalCompositEPeration takaisin lähde-ohi.

 Toiminto fadedrawing () {
  jos (pyyhkiä & lt; 0) {
  konteksti.Clearrect (0, 0, Canvas.width, Canvas.height);
  pyyhkiä = 1;
  palata;
  }
  konteksti.globalalpha = pyyhkiä;
  konteksti.globalcomposetuperation = 'kopio';
  kontektori (kangas, 0, 0);
} 

13. Tee se näyttää todelliselta

Toistaiseksi sovelluksemme näyttää melko hyvältä ja tasaiselta. Jotta se voidaan antaa syvyydestä, lisäämme kehyksen värin, varjo kehyksen sisällä ja hieman äänenvoimakkuutta valitsimuksissa. Säännöllisten varjojen CSS on jo toimitettu, mutta sinun on lisättävä nämä kaksi elementtiä kehon lopussa.

Täytä CSS tässä ehdotetuille elementeille:

 & lt; div id = "DialshadowHorizontal" Class = "Shadow" & gt; & lt; / div & gt;
& lt; div id = "Dialshadowverttinen" Class = "Shadow" & gt; & lt; / div & gt; 

 Body {
  Tausta: # 09cbf7;
}
#Sketch {
  Box-Shadow: 2px 2px 10px rgba (0, 0, 0, 20) Inset;
} 

14. Käytä verkkosivustoja

Tämän opetusohjelman alussa mainittiin lyhyesti verkkosivustojen kautta solmun palvelimen kautta. Nyt kun sinulla on itsenäinen piirustuslevy tablet-laitteelle, tarkastelemme myös puhelimesi käytettävissä. Kuitenkin puhelimet voivat olla liian pieniä näyttämään sekä näytön että ohjaimen näyttämisen. Siksi käytämme pistorasiat kommunikoimaan puhelimen ja tietokoneen näytön välillä.

15. Tunnista laitteen koko

Vaihda pää HTML-tiedostossa Main.js kanssa Extra.js . Jälkimmäinen sisältää kaikki olemme tehneet tähän mennessä, ja modifikaatiot käsittelevät laitteita ja pistorasiat, joita tarkastelemme seuraavissa vaiheissa. Katso DETECTDEVICE () - Tämä menetelmä saa nyt ladata sen sisällä() ja päättää, mikä "tila" käsittelee sovellusta.

Alla on nimenomaisen puhelimen erityinen tapaus:

 Jos (window.innerwidth & lt; 768) {
  Socket = io.connect ();
  document.querySelector ('# sketch'). Poista ();
  Var Dials = Document.QuerySelectectell ('. Dial, .Shadow');
  [] .foreach.call (soittaa, toiminto (kohde) {
  item.classlist.add ('iso');
  });
  Iscontrols = totta;
  Framemarginvertinen = 62;
  Socket.emit ("Valmis", {"Valmis": "Ohjaus"});
} 

16. Puhelimesta tietokoneeseen

Koko Extra.js huomaat koodin bittiä, kuten Socket.emit () tai Socket.on () . Nämä ovat päästöjä ja kuuntelijoita valvontamme (puhelimemme) ja näytön (tietokone) tapauksissa. Jokaisen lähetetyn tapahtuman on lähdettävä palvelimen jakamisen uudelleen kaikille yhdistetyille pistorasioille. Sisään palvelin \ index.js Lisää muutamia kuuntelijoita yhteystoiminnossa ja käynnistä solmun palvelin uudelleen.

 Socket.on ("Piirrä", toiminto (tiedot) {
  io.Sockets.emit ("Piirrä", tiedot);
});
Socket.on ("Erase", toiminto (tiedot) {
  io.sockets.emit ("Erase", tiedot);
});
Socket.on ("AdjehdFrame", toiminto (tiedot) {
  ScreenWidth = Data.ScreenWidth;
  Screenheight = Data.Screenheight;
  io.Sockets.emit ("AdjustFrame", tiedot);
}); 

17. Korjaa puhelinlähtöisyys

Käy Localhost tietokoneessa, kun käytät sitä etänä puhelimesi kanssa (kuten aiemmin tabletista). Nyt pitäisi nähdä rivi, joka on piirretty ruudulla, kun käännät puhelimesi puhelimeen. Huomaat kuitenkin, että valitset eivät sovi kunnolla, jos puhelin on pystytilassa.

Voimme korjata tämän joidenkin CSS: n kanssa:

 @Media-näyttö ja (suunta: muotokuva) {
  .Dial.big # desivertinen, .Shadow.big # dialshadowverttinen {
  Oikea: Calc (50% - 75PX);
  Pohja: 20px;
  Top: Auto;
  }
  .dial.big # dialhorizontal, .Shadow.big # dialshadowhorrizontal {
  Vasen: Calc (50% - 75PX);
  Top: 20px;
  }
} 

18. Tee lelu realistinen

Palataan tablet-versioon. Valitettavasti tärinää API ei ole saatavilla iOS: ssä, joten emme voi toteuttaa haptista palautetta, kun valitset käännetään. Alkuperäisessä leluissa voit kuitenkin jättää väliaikaiset mustat sormenjälki-merkit näytölle, jos painat sitä. Voimme lisätä kosketustapahtuman laitteeseen kopioidaksesi tämän ominaisuuden.

Aseta nämä kuuntelijat sisään sen sisällä() ja tutustu toimintoihin, joita he kutsuvat:

 Jos (tyyppi === "kaikki") {
  CANVAS.ADDEVENTLISTER ('Touchstart', Toiminto (E) {
  E.Preventdefault ();
  Drawfingerprintti (E.Layerx, E.Layery, True);
  });
  CANVAS.ADDEVENTLISTER ('kosketus ", toiminto (E) {
  Hidfingerprint (E.Layerx, E.Layery);
  });
} 

19. Tallenna kopio kankaalle

Jssk Drawfingerprintti () Menetelmä, ennen kuin teemme mitään muuta, pelastamme kopion kankaalle nykyisestä tilasta piilotetulle elementille, jota käytämme piirustuksen palauttamiseksi tulostuksen poistamiseksi. Tämä tapahtuu vain ensimmäisellä kosketuksella, eikä myöhemmillä kehoteilla, jotka lisäävät tulostuksen kokoa 100 ms.

 Toiminto Drawfingerprint (XPOS, YOS, SAVECANVAS) {
  / * Osittainen toiminto, katso ylimääräinen.js * /
  jos (savecanvas) {
  HIDDENCANVAS = asiakirja.createelement ('Canvas');
  var hiddencontext = HIDDENCANVAS.GETCONTEXT ('2D');
  HIDDENCANVAS.WIDTH = CANVAS.WIDH;
  Hiddencanvas.height = Canvas.Height;
  HIDDENCONTEXT.DRAWIGAGE (CANVAS, 0, 0);
  }
} 

20. Suorita sovellus Offline

Voit nyt tehdä sovelluksen todella itsenäisesti tallentamalla sen tablet-laitteellesi aloitusnäytön sovellukseksi. Emme voi tehdä samaa puhelimessa, koska se vaatii yhteyden palvelimeen. Sisään /julkinen , etsi tiedosto nimeltä Sketch.AppCache ja korvaa kaikki "localhost" -tapahtumat IP-osoitteeseesi.

Muuta nyt HTML: tä seuraavasti:

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

21. Tallenna sovellus

Käy nyt sovelluksessa uudelleen tablet-laitteellasi ja valitse Lisää aloitusnäytön vaihtoehtoon. Uusi kuvake tulee näkyviin työpöydällesi. Avaa se kerran, kun se on edelleen yhteydessä localhostisi etäyhteydelle. Välimuistin manifesti Olemme aiemmin ladattavissa kaikki tarvittavat tiedostot offline-käyttöön taustalla. Käännä Wi-Fi pois ja avaa sovellus uudelleen. Voilà!

Tämä artikkeli oli alun perin ilmestynyt Web Designer Magazine Julkaisu 263. Osta se tässä .

Lue lisää:

• 15 Web Apis et ole koskaan kuullut
• Aloittelijan opas käyttöliittymän animaatioiden suunnitteluun
• Opas paremman CSS: n kirjoittamiseen