Maak een digitale ets een schets

In deze tutorial nemen we de mechanische tekening speelgoed ets een schets als inspiratie en probeer deze functies te implementeren voor moderne apparaten, met webtechnologieën. Met behulp van het (toepassige genoemde) canvas, focussen we eerst op tablets, die verwant zijn aan vorm aan het authentieke speeltje. We kunnen profiteren van aanraakevenementen om de gebeurtenissen in het kentekens en het apparaat te regelen om de inhoud te wissen. Geen telefoons achterlaten, we zullen ook onderzoeken hoe u WebSockets gebruikt om de mogelijkheden te verbeteren door de bedieningselementen en tekengebied te splitsen.

01. Haal de activa

Deze tutorial gebruikt knooppunt.js. Voordat we aan de slag gaan, ga dan naar Filesilo , selecteer gratis spullen en gratis inhoud naast de tutorial - hier kunt u de activa downloaden die u nodig hebt voor de tutorial. Voer vervolgens de onderstaande opdrachten uit, die de afhankelijkheden installeert en de server start. We gebruiken NODE om een ​​te maken localhost , en het zal ons ook later dienen voor WebSockets.

 NPM-installatie
Node Server / Index.js 

02. Gebruik de functie Tekenen ()

In main.js , de trek() functie is het middelpunt van onze aanvraag. We gebruiken canvas om een ​​lijn tussen twee punten te tekenen; De oorsprong (X1, Y1), waar we ons voor het laatst onze tekening verlieten, en de bestemming (X2, Y2), het nieuwe punt dat we willen bereiken. We moeten nu deze functie activeren om elke vorm van tekening te observeren.

 Functie DRAAI (X1, Y1, X2, Y2) {
  // context wordt wereldwijd ingesteld in init ()
  context.Beginpath ();
  context.moveto (x1, y1);
  context.Lineto (X2, Y2);
  context. Trek ();
} 

03. Implementeer toetsenbordgebeurtenissen

Voordat we wijzerplaten implementeren, laten we snel een toetsenbordluisteraar toevoegen die onze trekfunctie kan activeren. Je bent al bij de verschillende gekregen keycodes In het voorbeeld, maar je moet de luisteraar iets wijzigen om de te activeren trek() functie die we eerder hebben gedefinieerd. Vernieuw nu uw browser en zie wat u kunt tekenen met de pijltjestoetsen.

 Document.ADDEVENTLISTENER ('Keydown', functie (e) {
  / * Keycode-schakelaar gaat hier * /
  Tekenen (Math.Flow (Prev_Horizontal), Math.Floor (prev_vertical), Math.Flowing (horizontaal), Math.floor (verticaal));
  prev_vertical = verticaal;
  prev_horizontal = horizontaal;
}); 

04. Het formaat van het canvas

Misschien heb je gemerkt dat ons canvaselement nog geen maat heeft toegewezen. Voor onze tekentafel willen we een grotere ruimte, misschien zelfs het hele raam. De onderstaande code zorgt voor de Grootte-evenement, maar vergeet niet te bellen Adjustframe () in in het() ook.

 Functie-aanpassing () {
  // canvas wordt wereldwijd gedefinieerd in init ()
  canvas.width = window.innerwidth;
  canvas.Height = window.innerHeight;
​
venster.AddeventListener ('grootte', aanpassing); 

05. Voeg een frame toe

We willen dat de applicatie er zo veel mogelijk uitziet als het originele speelgoed, dus we willen een frame rond het tekengebied toevoegen. Om dit te doen, kunnen we een marge-waarde definiëren en de CSS wijzigen voor #schetsen naar marge: 20px auto; om het canvas horizontaal te centreren en een grotere ruimte onderaan voor de wijzerplaten te houden.

 Var Framemarinvertical = 122;
Var Framemarginhorizontal = 62;
functie aanpassen () {
  canvas.width = window.innerwedig - framemarginhorizontal;
  canvas.Height = window.innerhoogte - framemarinvertical;
} 

06. Maak de wijzerplaten

We hebben u al de CSS gegeven voor de wijzerplaten in Openbaar / CSS / Styles.CSS , dus voel je vrij om een ​​kijkje te nemen. Voeg vervolgens twee toe & LT; DIV & GT; Tags onder de & lt; canvas & gt; in het HTML-bestand, zoals hieronder beschreven. Als een conventie zullen we de linkerwijzer voor horizontale tekening en het recht voor verticaal gebruiken. We voegen ook nieuwe variabelen toe aan de in het() Functie om je voor te bereiden op touch-evenementen.

 & lt; div id = "dialhorizontal" class = "Dial" & GT; & LT; / DIV & GT;
& LT; DIV ID = "Dialvertical" Class = "DIAL" & GT; & LT; / DIV & GT; 

 Var targleft = document.getelementByID ('dialhorizontal');
Var Regionleft = NIEUW ZINGTOUCH.REGION (TARGETLEFT);
Var targright = document.getelementByID ('dialvertical');
Var RegionRight = Nieuwe Zingtouch.Regio (doelgericht); 

07. Gebruik zingtouch

Zingtouch is een JavaScript-bibliotheek die in staat is om verschillende touch-bewegingen te detecteren en zal ook muisgebeurtenissen behandelen. Het is voor u voorzien in de / openbaar / lib / Map, zoals we het gebruiken om onze keuzes te besturen. Hieronder is de implementatie voor de linkercontrole; U moet het repliceren en het voor de andere kant wijzigen.

 Regionleft.Bind (TargetLEFT, 'Rotate', functie (e) {
  if (e.detail.distancefromlast & lt; 0) {
  --horizontaal;
  } anders {
  ++ horizontaal;
  ​
  angehorizontal + = e.detail.distanceFomlast;
  targetLeft.style.transform = 'Roteer (' + anglehorizontal + deg) ';
  Tekenen (Math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontaal), math.floor (prev_vertical));
  prev_horizontal = horizontaal;
}); 

08. Implementeer Dial Bounds

Om de lijnen te blokkeren van het uitschakelen van het scherm, gebruiken we de kan tekenen() functie, die een boolean retourneert. We passeren het de richting, ofwel 'horizontaal' of 'verticaal' en de waarde van de horizontale of verticale variabele. We noemen deze functie in de 'Rotate' luisteraar van beide knoppen, en alleen als 'TRUE', verhogen we de hoek en belt u de trek() functie.

 Functie Candrow (richting, waarde) {
  Var MAX = (richting === 'horizontaal')? (canvas.width) :( canvas.hoogte);
  if (waarde & lt; 2 || waarde & gt; max - 2) {
  rendement false;
  ​
  terugkeren;
} 

09. Vermijd Kiesproblemen

Met de grenzen die we zojuist hebben geïmplementeerd, is er een kans dat de draaiknop aan één einde kan vastlopen als de waarde over de limiet gaat, zelfs met een decimaal. Om deze situatie te voorkomen, moeten we het geval waar kan tekenen() is onjuist en reset de waarde naar een eerder geldig één, zoals hier wordt weergegeven voor de horizontale controller:

 if (candraw ('horizontaal', horizontaal)) {
  angehorizontal + = e.detail.distanceFomlast;
  targetLeft.style.transform = 'Roteer (' + anglehorizontal + deg) ';
  Tekenen (Math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontaal), math.floor (prev_vertical));
  prev_horizontal = horizontaal;
} anders {
  horizontaal = prev_horizontal;
} 

10. Haal de tekentafel op uw tablet

Het wordt altijd aanbevolen om zo vroeg mogelijk op uw gerichte apparaten te testen. Onze applicatie is nu in een goede vorm en kan reageren op aanraakevenementen. Volg de stappen om op afstand toegang te krijgen tot localhost om de tekentafel op uw tablet te krijgen.

Vervolgens gebruiken we Safari en het menu Ontwikkelen om de applicatie op een iPad te inspecteren. Voor Android-apparaten, gebruik Chrome: // Inspecteer ​

11. Test de accelerometer

Sluit uw tablet aan op uw computer via USB en inspecteer de toepassing met behulp van de ontwikkelaarstools.

Met de onderstaande code moet u de verschillende versnellingswaarden kunnen zien, terwijl u uw apparaat rondt. Om het canvas te resetten, hebben we besloten om een ​​versnelling op de x-as over 5 te overwegen en langzaam de dekking te verminderen ( erasereren ​

 Var Eraserate = 1; / * Definieer als een wereldwijde variabele * /
venster.ADDEVENTLISTENER ('Devicemotion', functie (evenement) {
  console.log ('versnelling ::', event.acceleration);
  if (event.acceleration.x & gt; 5) {
  wissen - = math.abs (gebeurtenis.acceleration.x / 100);
  console.log ('Wissen ::', Eraserate);
  ​
}); 

12. Schud om te verwijderen

We hebben in de vorige stap gezien hoe te controleren op beweging en versnelling. We moeten nu bellen Fadedrawing () Wanneer aan onze toestand wordt voldaan. In dit geval worden we een exacte kopie van het canvas op een andere dekking opnieuw weg.

Reset de GlobaliPha naar 1 in trek() en zet de globalcomepositopation terug naar bron-over.

 Functie FADEDRAWING () {
  if (eraserate & lt; 0) {
  context.clearrect (0, 0, canvas.width, canvas.hoogte);
  Eraserate = 1;
  terugkeer;
  ​
  context.Globalalpha = erasereren;
  context. GlobalComPositEoperation = 'Kopie';
  context .Drawimage (canvas, 0, 0);
} 

13. Laat het eruit zien als de echte deal

Tot nu toe ziet onze applicatie er behoorlijk flauw en plat. Om het een diepte te geven, zullen we een framekleur, een schaduw in het frame toevoegen en een beetje volume op de wijzerplaten. De CSS voor de wijzerplaatschaduwen is al voorzien, maar u moet die twee elementen aan het einde van het lichaam toevoegen.

Voltooi de CSS voor de hier gesuggereerde elementen:

 & LT; DIV ID = "DialShadowHorizontal" -klasse = "Shadow" & GT; & LT; / DIV & GT;
& LT; DIV ID = "DialShadowvertical" Class = "Shadow" & GT; & LT; / DIV & GT; 

 lichaam {
  Achtergrond: # 09CBF7;
​
#sketch {
  Box-Shadow: 2px 2px 10px RGBA (0, 0, 0 ,.25) Inzet;
} 

14. Gebruik Websockets

Aan het begin van deze tutorial noemden we kort het gebruik van webockets via onze knooppuntserver. Nu u een stand-alone tekenkussen voor tablet hebt, zullen we ook kijken naar het beschikbaar maken van het beschikbaar voor uw telefoon. Telefoons kunnen echter te klein zijn om zowel het scherm als de bedieningselementen weer te geven. We gebruiken daarom sockets om te communiceren tussen telefoon- en computerscherm.

15. Detecteer de apparaatgrootte

Vervang in het hoofd HTML-bestand main.js met extra.js ​Dit laatste bevat alles wat we tot nu toe hebben gedaan, met wijzigingen om apparaten en stopcontacten te handelen, die we in de volgende stappen zullen inspecteren. Kijk even naar DetectDevice () - Deze methode wordt nu opgeroepen in plaats van in het() en beslist welke 'modus' voor de applicatie moet worden verwerkt.

Hieronder is het specifieke geval van een telefoon die wordt gedetecteerd:

 if (window.innerwidth & lt; 768) {
  socket = io.connect ();
  Document.QuerySelector ('# Sketch'). Verwijderen ();
  Var Dials = Document.QuerySelectectorAlle ('. wijzerplaat, .Shadow');
  []. fousreach.call (wijzerplaten, functie (item) {
  item.classlist.add ('groot');
  ​
  iscontrols = waar;
  framemarinvertical = 62;
  Socket.emit ('klaar', {'klaar': 'besturingselementen'});
} 

16. Van telefoon naar computer

Gedurende extra.js je zult bits van code opmerken zoals Socket.emit () of Socket.on () ​Dit zijn de emitters en luisteraars voor onze bedieningselementen (telefoon) en scherm (computer). Elke geëmitteerde gebeurtenis moet door de server gaan om opnieuw te verspreiden naar alle aangesloten stopcontacten. In server \ index.js Voeg nog een paar luisteraars toe in de functie 'Verbinding' en start de knooppuntserver opnieuw op.

 Socket.on ('Draw', functie (gegevens) {
  io.Sockets.emit ('Draw', gegevens);
​
Socket.On ('Wissen', functie (gegevens) {
  io.Sockets.emit ('Wissen', gegevens);
​
Socket.On ('Adjustframe', functie (gegevens) {
  Screenwidthth = Data.Screenwidth;
  ScreenHeight = Data.ScreenHeight;
  io.Sockets.emit ('Adjustframe', gegevens);
}); 

17. Fix Telefoon Oriëntatie

Bezoek de localhost op uw computer, terwijl u er op afstand toegang tot toegang hebt tot uw telefoon (zoals u eerder uit uw tablet hebt gedaan). U moet nu een regel op uw scherm zien die wordt getekend terwijl u de wijzerplaten op uw telefoon draait. U zult echter opmerken dat de keuzes niet goed passen als de telefoon in de portretmodus is.

We kunnen dit oplossen met sommige CSS:

 @media-scherm en (oriëntatie: portret) {
  .dial.big # dialvertical, .Shadow.big # display shadowvertical {
  RECHTS: CALP (50% - 75PX);
  onderkant: 20px;
  Top: Auto;
  ​
  .dial.big # dialhorizontal, .Shadow.big # DialShadowHorizontal {
  Links: Calc (50% - 75px);
  Top: 20px;
  ​
} 

18. Maak het speeltje realistischer

Laten we teruggaan naar onze tabletversie. Helaas is de vibratie-API niet beschikbaar op iOS, dus we kunnen geen haptische feedback implementeren wanneer de keuzes worden gedraaid. In het originele stuk speelgoed, zou je echter tijdelijke zwarte vingerafdrukmarkeringen op het scherm kunnen achterlaten als je het duwde. We kunnen een aanraakgebeurtenis toevoegen aan het apparaat om deze functie te repliceren.

Stel deze luisteraars in in het() en verken de functies die ze noemen:

 IF (Type === 'All') {
  canvas.addevenlistener ('Touchstart', functie (e) {
  e.preventdefault ();
  DRAWFINGERPRINT (E.LYERERX, E.LAGERY, TRUE);
  ​
  canvas.addeventListener ('Touchend', functie (e) {
  hidefingerprint (e.layerx, e.layy);
  ​
} 

19. Sla een kopie van het canvas op

In de DrawfingerPrint () Methode, voordat we iets anders doen, sparen we een kopie van de huidige status van het canvas naar een verborgen element dat we gebruiken om onze tekening te herstellen bij het opruimen van de afdruk. Dat gebeurt alleen bij de eerste aanraking, en niet op de daaropvolgende oproepen die de grootte van de afdruk elke 100ms verhogen.

 Functie DRAWFINGERPRINT (XPOS, YPOS, SAVECANVAS) {
  / * gedeeltelijke functie, verwijzen naar extra.js * /
  if (Savecanvas) {
  hiddencanvas = document.creatoreLement ('canvas');
  VAR HIDDENCONTEXT = HIDDENCANVAS.GETCONTEXT ('2D');
  hiddencanvas.width = canvas.width;
  HIDDENCANVAS.HEIGHT = canvas.Height;
  hiddencontext.Drawimage (canvas, 0, 0);
  ​
} 

20. Voer de offline van de applicatie uit

Je kunt nu het applicatie echt stand-alone maken door het op je tablet op te slaan als een thuisscherm-app. We kunnen niet hetzelfde doen voor de telefoon, omdat het verbinding met de server vereist. In /openbaar , zoek het bestand met de naam schets.appcache en vervang alle instanties van 'localhost' door uw IP-adres.

Wijzig nu de HTML om als volgt te lezen:

 & lt; html lang = "en" manifest = "schets.appcache" & GT; 

21. Sla de applicatie op

Ga nu opnieuw op de applicatie op uw tablet en selecteer de optie Toevoegen aan startscherm. Er moet een nieuw pictogram verschijnen op uw bureaublad. Open het eenmaal terwijl je nog steeds op afstand verbonden bent met je localhost. Het cache-manifest dat we eerder opzetten, zullen alle benodigde bestanden downloaden voor offline gebruik op de achtergrond. Draai de Wi-FI uit en open de app opnieuw. Voila!

Dit artikel verscheen oorspronkelijk in Web Designer Magazine Probleem 263. Koop het hier ​

Lees verder:

• 15 Web API's waarvan je nog nooit hebt gehoord
• Een beginnersgids voor het ontwerpen van interface-animaties
• Een gids voor het schrijven van betere CSS