Bir dijital etch bir kroki oluşturun

Bu eğitimde, mekanik çizim oyuncağını bir eskiz çizimi ilham kaynağı olarak alıyoruz ve bu özellikleri web teknolojileri ile modern cihazlar için uygulamaya çalıştık. (Uygun olarak adlandırılmış) tuval kullanarak, ilk önce otantik oyuncağa şekillendiren tabletlere odaklandık. İçeriği silmek için kadranları ve cihaz hareket olaylarını kontrol etmek için dokunma olaylarından yararlanabiliriz. Telefonları bırakmıyor, ayrıca kontrolleri ve çizim alanını bölerek olanakları geliştirmek için web sayfalarını nasıl kullanacağız.

01. Varlıkları alın

Bu eğitim node.js. kullanacak Başlamadan önce, git Fileilo , ücretsiz şeyler seçin ve öğreticinin yanındaki ücretsiz içerik seçin - İşte ihtiyacınız olan varlıkları indirebilirsiniz. Sonra aşağıdaki komutları çalıştırın, bu da bağımlılıkları kuracak ve sunucuyu başlatacak. Oluşturmak için düğümü kullanıyoruz localhost Ayrıca, web siteleri için daha sonra bize hizmet edecek.

 NPM kurulumu
Düğüm sunucusu / index.js 

02. Draw () işlevini kullanın

İçinde main.js , çizmek() İşlev, başvurumuzun merkez noktası olacaktır. İki nokta arasında bir çizgi çizmek için tuval kullanıyoruz; Kökeni (X1, Y1), en son çizimimizi ve hedefi (X2, Y2), ulaşmak istediğimiz yeni nokta kaldığımız yer. Şimdi herhangi bir çizim şeklini gözlemlemek için bu işlevi tetiklememiz gerekiyor.

 fonksiyon çizimi (x1, y1, x2, y2) {
  // bağlam, küresel olarak init ()
  Context.BeginPath ();
  Context.Moveto (X1, Y1);
  Context.lineto (x2, y2);
  Context.Stroke ();
} 

03. Klavye etkinliklerini uygulayın

Arama yapmadan önce, Çizim işlevimizi tetikleyebilecek bir klavye dinleyicisi ekleyelim. Zaten farklı bir şekilde verildi anahtarlıklar Örnekte, ancak dinleyiciyi tetiklemek için itici bir şekilde değiştirmeniz gerekecek. çizmek() Daha önce tanımlandık. Şimdi tarayıcınızı yenileyin ve ok tuşlarıyla neler çizebileceğinizi görün.

 belge.addeventListener ('KeyDown', Function (E) {
  / * tuş kod anahtarı buraya gider * /
  beraberlik (math.floor (prev_horizontal), math.floor (prev_vertical), matematik (yatay), matematik (dikey));
  prev_vertical = dikey;
  prev_horizontal = yatay;
}); 

04. Tuvaleti yeniden boyutlandırın

Tuval elemanımızın henüz atanmış bir boyuta sahip olmadığını fark etmiş olabilirsiniz. Çizim tahtası için, büyük bir alan, belki de tüm pencereden bile isteyeceğiz. Aşağıdaki kod yeniden boyutlandırma olayını önemser, ancak aramayı unutmayın ayar çerçevesi () içinde içinde() Aynı zamanda.

 fonksiyon ayarlama çerçevesi () {
  // tuval küresel olarak init ()
  Canvas.Width = window.innerwidth;
  tuval.height = window.innerheight;
}
window.addeventListener ('resize', ayar çerçevesi); 

05. Bir çerçeve ekleyin

Uygulamanın orijinal oyuncak gibi görünmesini istiyoruz, bu yüzden çizim alanının etrafında bir çerçeve eklemek istiyoruz. Bunu yapmak için, bir marj değeri tanımlayabilir ve CSS'yi değiştirebiliriz. #sketch Marja: 20px Otomatik; Tuvaleti yatay olarak ortadan kaldırmak ve aramalar için dibinde daha büyük bir boşluk tutun.

 var framemarginvertical = 122;
var framemarginhorizontal = 62;
fonksiyon ayar çerçevesi () {
  kanvas.width = window.innerwidth - framemarginhorizontal;
  tuval.height = window.innerheight - framemarginvertical;
} 

06. Aramaları oluşturun

Aramalar için size zaten CSS verdik. Public / CSS / stilleri.css , bu yüzden bir göz atmaktan çekinmeyin. Sonra, iki tane ekle & lt; div & gt; altındaki etiketler & lt; tuval ve gt; HTML dosyasında, aşağıda açıklandığı gibi. Bir Sözleşme olarak, sol kadranı yatay çizim ve dikey için sağ kullanacağız. Ayrıca, yeni değişkenler ekliyoruz içinde() Dokunmatik olaylara hazırlanmak için işlev.

 & LT; DIV ID = "DialHorizontal" Class = "Dial" & gt; / div & gt;
& lt; div id = "DialterTrical" Sınıfı = "Arama" & GT; 

 var hedefleft = document.getElementbyid ('DialHorizontal');
var BölgeLeft = Yeni Zingtouch.Region (Targetleft);
var targetRight = document.getElementbyid ('DialterTrictical');
var regionRight = New Zingtouch.Region (TargetRight); 

07. Zingtouch kullanın

Zingtouch, çeşitli dokunmatik jestleri tespit edebilen ve ayrıca fare olaylarını da tutabilen bir JavaScript kütüphanesidir. Sizin için verilir / Kamu / Lib / Klasör, aramalarımızı kontrol etmek için kullandığımız gibi. Aşağıda sol kontrolün uygulanmasıdır; Çoğaltmanız ve diğer taraf için değiştirmeniz gerekir.

 regionlev.bind (Targetleft, 'Döndür', İşlev (E) {
  if (e.detail.distanceFromlast & lt; 0) {
  --yatay;
  } Başka {
  ++ yatay;
  }
  anglehorizontal + = e.detail.distanceFromlast;
  targetleft.style.transform = 'döndürme (' + anglehorizontal + '°)';
  beraberlik (matematik (prev_horizontal), math.floor (prev_vertical), matematik (yatay), math.floor (prev_vertical));
  prev_horizontal = yatay;
}); 

08. Arama sınırlarını uygulayın

Hatları ekrandan çıkmasını engellemek için kullanıyoruz çizebilir() Bir Boolean döndüren işlev. 'Yatay' veya 'dikey' ve yatay veya dikey değişkenin değeri olan yönü geçiyoruz. Bu işlevi, her iki kadranın 'döndürün' dinleyicisini 'diyoruz ve yalnızca' doğru 'açıyı artırıyoruz ve çizmek() işlevi.

 FUNCTION CANDRAW (yön, değer) {
  var max = (yön === 'yatay')? (Tuval.Width) :( tuval.height);
  if (değer ve lt; 2 || değeri & gt; max - 2) {
  yanlış döndür;
  }
  doğru dönüş;
} 

09. Sorunları çevirmekten kaçının

Az önce uyguladığımız sınırlarla, kadranın bir ucunda bir sonda kalabileceği bir şans var. Bu durumun önlenmesi için durumun üstesinden gelmeliyiz çizebilir() yanlıştır ve değeri daha önce geçerli olana sıfırlayın, burada yatay kontrolör için gösterildiği gibi:

 Eğer (Candraw ('yatay', yatay)) {
  anglehorizontal + = e.detail.distanceFromlast;
  targetleft.style.transform = 'döndürme (' + anglehorizontal + '°)';
  beraberlik (matematik (prev_horizontal), math.floor (prev_vertical), matematik (yatay), math.floor (prev_vertical));
  prev_horizontal = yatay;
} Başka {
  yatay = prev_horizontal;
} 

10. Çizim tahtasını tabletinizde edinin

Hedeflenen cihazlarınızı mümkün olduğunca erken test etmek her zaman önerilir. Uygulamamız şimdi iyi durumda ve dokunma olaylarına cevap verebilir. Tabletinizde çizim tahtasını almak için localhost'a erişme adımlarını izleyin.

Daha sonra, uygulamayı bir iPad'de incelemek için Safari ve Geliştir menüsünü kullanacağız. Android cihazlar için kullanın Chrome: // İnceleme .

11. ivmeölçer testini test edin

Tabletinizi bilgisayarınıza USB üzerinden bağlayın ve geliştirici araçlarını kullanarak uygulamayı inceleyin.

Aşağıdaki kodun yerine, cihazınızı etrafa hareket ettirirken çeşitli ivme değerlerini görebilmelisiniz. Tuvalleri sıfırlamak için, X ekseninde 5 yaşın üzerindeki bir ivme düşünmeye karar verdik ve opaklığı yavaşça azalttık ( silmek ).

 var silme = 1; / * Küresel değişken olarak tanımlayın * /
window.addeventListener ('DeviceMotion', Function (olay) {
  console.log ('Hızlanma ::', event.acceleration);
  if (event.acceleration.x & gt; 5) {
  Silme - = Math.Abs ​​(Event.Acceleration.x / 100);
  console.log ('silme ::', silmek);
  }
}); 

12. Silmek için Shake

Önceki adımda hareket ve hızlanma nasıl kontrol edileceğini gördük. Şimdi aramamız gerekiyor Fadedrawing () durumumuz karşılandığında. Bu örnekte, tuvalin tam bir kopyasını farklı bir opaklıkta yeniden çizeriz.

GlobalAnfa'yı 1'e sıfırlayın çizmek() ve ayarla globalcompositeoperation Kaynağa geri dönün.

 fonksiyon fadedrawing () {
  eğer (siliner ve 0) {
  Context.Clearrect (0, 0, Canvas.Width, Canvas.Height);
  Silme = 1;
  dönüş;
  }
  context.globalAlfa = silmek;
  context.globalcompositeoperation = 'KOPYA';
  Bağlam. DrawImage (Tuval, 0, 0);
} 

13. Gerçek Anlaşma gibi görünmesini sağlayın

Şimdiye kadar, uygulamamız oldukça yumuşak ve düz görünüyor. Biraz derinlik vermek için, bir çerçeve rengi, çerçevenin içindeki bir gölge ve aramalarda biraz hacim ekleyeceğiz. Arama gölgeleri için CSS zaten verilmiştir, ancak bu iki öğeyi vücudun sonuna eklemeniz gerekir.

Burada önerilen öğeler için CSS'yi tamamlayın:

 & lt; div id = "DialShadowhorizontal" Class = "Shadow" & gt;
& lt; div id = "DialShadowvertical" sınıfı = "Gölge" & gt; 

 vücut {
  Arka plan: # 09CBF7;
}
#sketch {
  Kutu gölgesi: 2px 2px 10px RGBA (0, 0, 0, .25) Inset;
} 

14. WebOckets kullanın

Bu öğreticinin başında, düğüm sunucumuzda Web Sunucusu'nu kullanarak kısaca bahsettik. Şimdi tablet için bağımsız bir çizim pediniz var, telefonunuz için de mevcut hale getirmeye bakacağız. Bununla birlikte, telefonlar hem ekran hem de kontrolleri görüntülemek için çok küçük olabilir. Bu nedenle, telefon ve bilgisayar ekranı arasında iletişim kurmak için soketler kullanıyoruz.

15. Cihaz boyutunu tespit edin

Ana HTML dosyasında değiştirin main.js ile ekstra.js . Sonuncusu, şu ana kadar yaptığımız her şeyi, aşağıdaki adımlarda inceleyeceğimiz cihazları ve soketleri idare etmeden modifikasyonları içerir. Göz atmak DetectDevice () - Bu yöntem şimdi yükü yerine çağrılır içinde() ve uygulama için hangi 'mod' yapacağınıza karar verecektir.

Aşağıda, tespit edilen bir telefonun özel olmasıdır:

 Eğer (window.innerwidth & lt; 768) {
  soket = io.connect ();
  belge.queryselector ('# sketch'). Kaldır ();
  var dials = document.queryselectorall ('. Arama, .Shadow');
  [] .foraach.call (Arama, İşlev (Öğe) {
  item.classlist.add ('büyük');
  });
  iscontrols = true;
  framemarginvertical = 62;
  soket. ('Hazır', {'Hazır': 'Kontroller'});
} 

16. Telefondan bilgisayara

Boyunca ekstra.js Gibi kod parçalarını fark edeceksiniz. socket.emit () veya soket.on () . Bunlar kontrollerimiz (telefon) ve ekran (bilgisayar) örnekleri için yayıcılar ve dinleyicilerdir. Yayılan etkinliğin tüm bağlı soketlere yeniden dağıtılması için sunucudan geçmesi gerekir. İçinde Sunucu \ index.js 'Bağlantı' işlevinde birkaç dinleyici ekleyin ve düğüm sunucusunu yeniden başlatın.

 soket. ('Draw', İşlev (Veri) {
  io.sockets.emit ('çizim', veri);
});
soket.on ('silme', işlev (veri) {
  io.sockets.emit ('silme', veri);
});
soket.on ('ayar çerçevesi', işlevi (veri) {
  screenwidth = data.screenwidth;
  ScreenHeight = Data.ScreenHeight;
  io.sockets.emit ('ayar çerçevesi', veri);
}); 

17. Telefon yönünü düzeltin

Bilgisayarınızdaki localhost'u ziyaret edin, telefonunuzla uzaktan erişilir (daha önce tabletinizden yaptığınız gibi). Telefonunuzdaki aramaları çevirirken ekranınızda bir çizgiyi görmelisiniz. Ancak, telefonun dikey modundaysa, aramaların düzgün uymadığını fark edeceksiniz.

Bunu bazı CSS ile düzeltebiliriz:

 @Media ekranı ve (oryantasyon: portre) {
  .dial.big # DialterTical, .shadow.big # DialShadowvertical {
  Sağ: Calc (% 50 - 75px);
  Alt: 20px;
  Üst: Otomatik;
  }
  .dial.big # DialHorizontal, .Shadow.Big # DialShadowHorizontal {
  Sol: Calc (% 50 - 75px);
  Üst: 20px;
  }
} 

18. Oyuncağı daha gerçekçi hale getirin

Tablet versiyonumuza geri dönelim. Ne yazık ki, titreşim API'leri iOS'ta mevcut değil, bu yüzden kadranlar döndüğünde dokunsal geribildirim uygulayamayız. Orijinal oyuncakta, eğer bastırdıysanız ekranda geçici siyah parmak izi işaretlerini bırakabilirsiniz. Bu özelliği çoğaltmak için cihazda bir dokunmatik olay ekleyebiliriz.

Bu dinleyicileri ayarla içinde() ve aradıkları işlevleri keşfedin:

 Eğer (Type === 'ALL') {
  Canvas.adDeventListener ('Touchstart', İşlev (E) {
  e.preventDefault ();
  DrawFingerPrint (E.Layerx, E.Layery, True);
  });
  Canvas.addeventListener ('Touchend', İşlev (E) {
  HidefingerPrint (E.Layerx, E.Layery);
  });
} 

19. Tuvalin bir kopyasını kaydedin

İçinde DrawFingerPrint () Yöntem, başka bir şey yapmadan önce, tuvalin mevcut durumunun bir kopyasını, yazdırmayı giderirken çizimimizi geri yüklemek için kullandığımız gizli bir elemana kaydederiz. Bu sadece ilk dokunuşta olur ve ardından her 100ms baskının boyutunu artıran aramalarda değil.

 Fonksiyon DrawFingerPrint (xpos, ypos, savecanvas) {
  / * Kısmi fonksiyon, bakınız ekstra.js * /
  if (savecanvas) {
  hiddencanvas = document.createLeanement ('kanvas');
  var hiddencontext = hiddencanvas.getcontext ('2d');
  hiddencanvas.width = tuval. Genişlik;
  HIDDENCANVAS.HEIGHT = CANVAS.HEIGHT;
  HIDDENCONTEXT.DRAWIMAGE (Tuval, 0, 0);
  }
} 

20. Uygulamayı çevrimdışı çalıştırın

Artık uygulamayı, tabletinize bir ana ekran uygulaması olarak kaydettirerek gerçekten bağımsız hale getirebilirsiniz. Sunucuya bağlantı gerektirdiğinden, telefon için aynı şeyi yapamayız. İçinde /halka açık , adlandırılmış dosyayı bulun sketch.appcache ve 'localhost' ın tüm örneklerini IP adresiniz tarafından değiştirin.

Şimdi, aşağıdaki gibi okunacak HTML'yi değiştirin:

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

21. Uygulamayı kaydedin

Şimdi uygulamayı tekrar tabletinizde ziyaret edin ve Ana Ekran seçeneğini seçin. Masaüstünüzde yeni bir simge görünmelidir. Hala localhost'ınıza uzaktan bağlanırken bir kez açın. Daha önce kurduğumuz önbellek tezahüratı, arka planda çevrimdışı kullanım için tüm gerekli dosyaları indirir. Wi-Fi'yi kapatın ve uygulamayı tekrar açın. Vallahi!

Bu makale başlangıçta ortaya çıktı Web Tasarımcısı Dergisi Sayı 263. Satın Al İşte .

Daha fazla oku:

• 15 Web API'leri hiç duymadığınız
• Arayüz animasyonları tasarlamak için bir acemi rehberi
• Daha iyi CSS yazmak için bir rehber