Vytvořit digitální etch náčrtek

V tomto tutoriálu vezmeme mechanickou kreslení hračky etch a náčrtu jako inspiraci a pokusit se realizovat tyto funkce pro moderní zařízení, s webovými technologiemi. Pomocí (Aptly pojmenované) plátno, jsme se nejprve zaměřujeme na tablety, které jsou podobné tvaru autentické hračky. Můžeme využít dotykové události pro ovládání voleb a pohybových událostí zařízení pro vymazání obsahu. Nenecháváme telefony, také prozkoumáme, jak používat WebSockets pro zvýšení možností rozdělením ovládacích prvků a výkresu.

01. Získejte aktiva

Tento tutoriál bude používat node.js. Než začneme, jděte Filesilo , Vyberte volné věci a volný obsah vedle tutoriálu - zde si můžete stáhnout aktiva, kterou potřebujete pro tutorial. Poté spusťte níže uvedené příkazy, které nainstalují závislosti a spusťte server. Používáme uzlu, abychom vytvořili localhost. a bude nám také sloužit později pro WebSockets.

 Instalace NPM
Uzel server / index.js 

02. Použijte funkci Draw ()

v Main.js. ,.. kreslit() Funkce bude středem naší aplikace. Používáme plátno, abychom kreslili linku mezi dvěma body; Původ (x1, y1), kde jsme naposledy opustili náš kresba, a cíl (x2, y2), nový bod, který chceme dosáhnout. Nyní musíme spustit tuto funkci, abychom pozorovali jakoukoliv formu výkresu.

 Funkce Draw (X1, Y1, X2, Y2) {
  // Kontext je nastaven globálně v init ()
  kontext.beginhpath ();
  kontext.Moveto (X1, Y1);
  kontext.Lineto (x2, y2);
  kontext.stroke ();
} 

03. Proveďte události klávesnice

Než budeme implementovat vytočení, pojďme rychle přidat posluchač klávesnice, který může spustit naši remízu. Už jste byli poskytnuti s jiným Keycodes. V příkladu, ale budete muset pozměnit posluchače mírně spustit kreslit() Funkce, kterou jsme definovali dříve. Nyní aktualizujte prohlížeč a zjistěte, co můžete čerpat pomocí kláves se šipkami.

 Document.AddEventListener ('Keydown', funkce (e) {
  / * Přepínač KeyCode je zde * /
  Draw (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontální), math.floor (vertikální));
  prev_vertical = vertikální;
  prev_horizontal = horizontální;
}); 

04. Změna velikosti plátna

Možná jste si všimli, že náš plátěný prvek ještě nemá velikost přiřazenou. Pro naši desku, budeme chtít větší prostor, možná i celé okno. Níže uvedený kód se stará o událost Resize, ale nezapomeňte zavolat Nastavení () v init () také.

 Funkce nastavení () {
  // Canvas je definován globálně v init ()
  canvas.width = window.innerwidth;
  canvas.Height = window.innerHeight;
}
window.addeventListerener ('Resize', nastavovací rámec); 

05. Přidat rámeček

Chceme, aby aplikace vypadala jako původní hračka co nejvíce, takže chceme přidat rámeček kolem oblasti kreslení. K tomu můžeme definovat hodnotu marže a změnit CSS #skica na okraji: 20px Auto; Pro určení plátna vodorovně a udržet větší prostor na dně pro voliče.

 var frameemarginiferical = 122;
var framoemarginhorizontal = 62;
Funkce nastavení () {
  canvas.width = window.innerwidth - frameemarginhorizontal;
  canvas.Height = window.innerHeight - frameemarginagerical;
} 

06. Vytvořte číselníky

Už jsme vám dali CSS pro číselníky Public / CSS / styles.css , takže se neváhejte podívat. Dále přidejte dva & lt, div a gt; tagy pod. & lt; canvas & gt; v souboru HTML, jak je popsáno níže. Jako úmluva použijeme levý disk pro horizontální výkres a právo na vertikální. Přidáváme také nové proměnné init () Funkce pro přípravu na dotykové události.

 & lt, div id = "dialhorizontální" třída = "ciferník" & gt; & lt; / div & gt;
 var cílleft = dokument.getElementbyid ('dialhorizontal');
VAR REGIONLEFT = nový Zingtouch.Region (Targetleft);
var cílertight = dokument.getElementbyid ('Dialvertical');
varkarightrightright = nový zingtouch.region (Climatright); 

07. Použijte ZingTouch.

ZingTouch je JavaScript knihovna schopná detekovat různé dotykové gesta a bude také zpracovávat události myši. Je pro vás poskytováno v / public / lib / Složka, jak ji používáme k řízení našich číselníků. Níže je implementace levé kontroly; Budete muset replikovat a změnit na druhou stranu.

 RegionLeft.Bind (Targetleft, 'Otočit', funkce (e) {
  pokud (E.detail.distanceFromlast) {0) {
  --horizontální;
  } else {
  ++ horizontální;
  }
  Anglehorizontal + = E.detail.distanceFromlast;
  Targetleft.style.Transform = 'Otočit (' + Anghthorizontal + 'DG)';
  Draw (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontální), math.floor (prev_vertical));
  prev_horizontal = horizontální;
}); 

08. Provedení volebních hranic

Chcete-li zablokovat čáry od jít mimo obrazovku, používáme candraw () funkce, která vrací boolean. Předávají to směr, buď "horizontální" nebo "vertikální", a hodnota vodorovné nebo vertikální proměnné. Toto funkce nazýváme v "otočení" posluchače obou pořadačů, a pouze pokud "true" zvyšujeme úhel a zavoláme kreslit() funkce.

 Funkce Candraw (směr, hodnota) {
  var max = (směr === 'horizontální')? (plátno.width): (canvas.height);
  pokud (hodnota <2 || hodnota & gt; max - 2) {
  vrátit false;
  }
  vrátit true;
} 

09. Vyhněte se problémům

S mezeny, které jsme právě implementovali, existuje šance, že volič může uvíznout na jednom konci, pokud hodnota přejde přes limit, a to i desetinnou čárkou. Aby se tato situace vyhnout, měli bychom zvládnout případ, kdy candraw () je nepravdivá a resetujte hodnotu na dříve platný jeden, jak je zobrazeno zde pro horizontální regulátor:

 Pokud ("horizontální", horizontální)) {
  Anglehorizontal + = E.detail.distanceFromlast;
  Targetleft.style.Transform = 'Otočit (' + Anghthorizontal + 'DG)';
  Draw (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontální), math.floor (prev_vertical));
  prev_horizontal = horizontální;
} else {
  horizontální = prev_horizontální;
} 

10. Získejte rýsovací desku na tabletu

Vždy se doporučuje testovat na cílová zařízení co nejdříve. Naše aplikace je nyní v dobrém stavu a může reagovat na dotek událostí. Postupujte podle kroků při přístupu k localhost vzdáleně, abyste získali kreslicí desku na tabletu.

Dále budete používat Safari a rozvíjet menu pro kontrolu aplikace na iPadu. Pro zařízení Android, použití Chrome: // kontrolovat .

11. Otestujte akcelerometr

Připojte tablet k počítači přes USB a zkontrolujte aplikaci pomocí nástrojů pro vývojáře.

S níže uvedeným kódem byste měli být schopni zobrazit různé hodnoty zrychlení, při pohybu zařízení kolem. Aby bylo možné resetovat plátno, rozhodli jsme se zvážit zrychlení na ose X více než 5 a pomalu snižte neprůhlednost ( eraserovat ).

 var erazerovat = 1; / * Definujte jako globální proměnnou * /
window.addeventListener ('devicemotion', funkce (událost) {
  console.log ('zrychlení ::', event.Acceleration);
  pokud (event.Acceleration.x & gt; 5) {
  Eraserate - = math.abs (event.Acceleration.x / 100);
  console.log ('erase ::', greasere);
  }
}); 

12. Křesení odstranit

Viděli jsme v předchozím kroku, jak zkontrolovat pohyb a zrychlení. Nyní musíme zavolat faderawing () když je náš stav splněn. V tomto případě jsme překreslili přesnou kopii plátna na jiné neprůhlednost.

Resetovat globalalpha na 1 in kreslit() a nastavit GlobalComPositeOppozice Zpět na zdroj.

 Funkce faderawing () {
  pokud (greaserate & lt; 0) {
  kontext.Clearrect (0, 0, canvas.width, plátno.Height);
  Eraserate = 1;
  vrátit se;
  }
  kontext.globalalpha = erazerovat;
  kontext.GlobalCompositeoperation = 'Copy';
  kontext.drawimage (plátno, 0, 0);
} 

13. Vypadá to jako skutečný obchod

Dosud naše aplikace vypadá docela nevýrazný a byt. Aby to bylo možné dát nějakou hloubku, přidáme barvu rámu, stín uvnitř rámu a trochu hlasitosti na číselech. CSS pro stíny volby je již poskytnuty, ale budete muset přidat tyto dva prvky na konci těla.

Kompletní CSS pro prvky navrhované zde:

 & lt, div id = "dialshadowhorizontal" třída = "stín" & gt; & lt; / div & gt;
& lt, div id = "dialshadowvertical" třída = "stín" & gt; <33]
  
 Tělo {
  Pozadí: # 09cbf7;
}
#sketch {
  Box-Shadow: 2px 2px 10px RGBA (0, 0, 0, .25) vložka;
} 
  

   14. Používejte webové stránky
  
  

   Na začátku tohoto tutoriálu jsme stručně zmínili pomocí webových stránek prostřednictvím našeho uzlu. Nyní, když máte samostatnou výkresovou podložku pro tabletu, podíváme se na to, abychom mohli také k dispozici pro váš telefon. Nicméně, telefony mohou být příliš malé na to, aby se zobrazovaly jak obrazovku, tak ovládací prvky. Proto používáme zásuvky pro komunikaci mezi telefonem a obrazovkou počítače.
  
  

   15. Zjistěte velikost zařízení
  
  

   V hlavním souboru HTML nahraďte
   
    Main.js.
   
   s
   
    extra.js.
   
   . Ten obsahuje vše, co jsme udělali dosud, s úpravami pro zpracování zařízení a zásuvek, které zkontrolujeme v následujících krocích. Podívat se na
   
    DetectDevice ()
   
   - tato metoda se nyní nazývá zatížení místo
   
    init ()
   
   a rozhodne, který "režim" zvládne pro aplikaci.
  
  

   Níže je uveden konkrétní případ zjištěného telefonu:
  
  
 Pokud (window.innerwidth & lt; 768) {
  Socket = IO.Connect ();
  Document.QuerySelektor ('# skica'). Odstraňte ();
  VAR Dials = Document.QuerySelektorall ('. Dial, Stadow');
  [] .Foreach.call (voliče, funkce (položka) {
  item.classlist.add ('BIG');
  });
  iscontrols = true;
  frameemarginvertical = 62;
  Socket.emit ('Ready', {'Ready': 'Controls'});
} 
  

   16. Od telefonu do počítače
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   Po celou dobu
   
    extra.js.
   
   Všimnete si bitů kódu, jako je například
   
    Socket.emit ()
   
   nebo
   
    Socket.on ()
   
   . Jedná se o zářiče a posluchače pro naše ovládací prvky (telefon) a obrazovky (počítačové) instance. Každá emitovaná událost musí projít serverem, který má být znovu distribuován do všech připojených zásuvek. v
   
    server index.js.
   
   Přidejte několik dalších posluchačů do funkce "Připojení" a restartujte server uzlu.
  
  
 Socket.on ("Draw", funkce (data) {
  io.sockets.emit ("kreslit", data);
});
Socket.on ("Erase", funkce (data) {
  io.sockets.emit ("vymazání", data);
});
Socket.on ('AdjustFrame', funkce (data) {
  Screenwidth = Data.Screenwidth;
  ScreenHeight = Data.ScreenHeight;
  io.sockets.emit ('AdjustFrame', data);
}); 
  

   17. Opravit telefonní orientaci
  
  

   Navštivte localhost v počítači, a zároveň přistupujete na dálku s telefonem (jako jste dříve z tabletu). Měli byste nyní zobrazit řádek, který je na obrazovce, přičemž otočením voleb v telefonu. Všimnete si však, že voliče se správně nehodí, pokud je telefon v režimu na výšku.
  
  

   Můžeme to opravit s některými CSS:
  
  
 @Media obrazovka a (orientace: portrét) {
  .dial.big # dialical, .shadow.big # dialshadowvertical {
  Právo: Calc (50% - 75px);
  Dno: 20px;
  Vrchol: Auto;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  Vlevo: Calc (50% - 75px);
  top: 20px;
  }
} 
  

   18. Udělejte hračku realističtější
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   Pojďme se vrátit do naší tabletové verze. Je smutné, že vibrační API není k dispozici na IOS, takže nemůžeme implementovat haptickou zpětnou vazbu, když jsou otočeny volby. V původní hračce však můžete ponechat dočasné značky černých otisků prstů na obrazovce, pokud jste ji tlačili. Můžeme přidat dotykové události na přístroji k replikaci této funkce.
  
  

   Nastavte tyto posluchače
   
    init ()
   
   a prozkoumat funkce, které volají:
  
  
 Pokud (typ === 'ALL') {
  canvas.addeventListener ('touchstart', funkce (e) {
  e.preventdefault ();
  DrawfingerPrint (E.LAYERX, E.LARY, pravda);
  });
  canvas.addeventListener ("dotek", funkce (e) {
  HidefingerPrint (E.LAYERX, E.LARY);
  });
} 
  

   19. Uložte kopii plátna
  
  

   V
   
    DrawfingerPrint ()
   Metoda, než uděláme cokoliv jiného, ​​uložíme kopii současného stavu plátna na skrytý prvek, který používáme k obnovení náškrát při vymazání tisku. To se stane pouze na první dotek, a ne na následujících hovorech, které zvyšují velikost tisku každých 100ms.
  
  
 Funkce DrawfingerPrint (XPOS, YOS, SAVECANVAS) {
  / * Částečná funkce, viz extra.js * /
  IF (SAVECANVAS) {
  hiddencanvas = dokument.Createelement ('canvas');
  var hiddencontext = hiddencanvas.getcontext ('2d');
  hiddencanvas.width = plátno.width;
  hiddencanvas.Height = plátno.Height;
  hiddencontext.drawimage (plátno, 0, 0);
  }
} 
  

   20. Spusťte aplikaci Offline
  
  

   Nyní můžete aplikaci skutečně samostatně uložit do tabletu jako aplikace domovské obrazovky. Nebudeme moci udělat totéž pro telefon, protože vyžaduje připojení k serveru. v
   
    /veřejnost
   
   , vyhledejte soubor s názvem
   
    skica.appcache.
   
   a nahradit všechny instance "localhost" vaší IP adresou.
  
  

   Nyní změňte HTML takto:
  
  
 & lt; html lang = "en" manifest = "skica.appcache" & gt; 
  

   21. Uložte aplikaci
  
  

   Nyní navštivte aplikaci znovu na tabletu a vyberte možnost Přidat do domovské obrazovky. Na ploše by se měla objevit nová ikona. Otevřete ji jednou, když je stále připojen k místnímu místu vzdáleně. Vymýšlení mezipaměti jsme nastavili dříve, stáhnete všechny potřebné soubory pro offline použití v pozadí. Vypněte Wi-Fi OFF a znovu otevřete aplikaci. Voilà!
  
  

   
    Tento článek se původně objevil
   
   
    
     Web Designer Magazine.
    
   
   
    Vydání 263. Kupte si to
   
   
    
     tady
    
   
   
    .
   
  
  

   
    Přečtěte si více:
   
  
  

   

    
     15 webových apis, o kterých jste nikdy neslyšeli
    
   
   

    
     Průvodce začátečníkem pro navrhování animací rozhraní
    
   
   

    
     Průvodce pro psaní lepší CSS