Nil Buşra Özer Kişisel Blog

Hammer.js Kütüphanesi

Herkese merhabalar.

Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere hammer.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. İlk yazımda, bu kütüphanenin genel özelliklerinden ve hangi amaçla kullanıldığından sizlere bahsetmiştim. Bana göre bu kütüphane JavaScript' in kullanımı en tatlı olan kütüphanelerinden biridir. Tatlıdan kastım şöyle ki; kodlamadan sonra ekranda sürükle bırak, çoklu dokunmatiklik, yakınlaştırma, uzaklaştırma, döndürme, kaydırma gibi özellikleri test etmek oldukça zevkli oluyor. Bu özellikleri dokunmatik cihazların yanında masaüstü bilgisayarımda deneyebilmek de ayrı bir güzel. Yaptığım örnekleri ve kodlarını aşağıda sizlerle paylaşacağım. Sizin de örnekleri denerken hem eğlenip hem öğreneceğinize eminim.

Örneklerimde, tasarım dilinde en çok kullanılan bir framework uygulaması olan Bootstrap'ı kullanıyorum. Kullanımı oldukça kolay olan bu araç kitini kullanmanızı sizlere de öneririm. Örneklerimi sizlerle paylaşmadan önce bu kütüphanenin içerdiği önemli fonksiyonlara değinmek istiyorum. Ayrıca şunu da eklemek istiyorum; bu kütüphanenin ne jQuery ne de başka bir kütüphane eklentisine ihtiyacı yoktur. Ama tercih elbette size ait, araştırma yaparsanız jQuery eklentisi ile yapılmış olan birçok hammer.js kütüphanesi örneği ile karşılaşabilirsiniz.

Fonksiyonlar

hammertime: Üye (instance) değişkendir.

1) hammertime.on(gesture,handler): Bu metot sayesinde, hareketi dinleyecek olan event listener eklenir. Bu metodun içerisine boşluk ekleyerek birden fazla hareket (gesture) koyabilirsiniz.

2) hammertime.off(gesture, handler) :  Bu fonksiyon sayesinde, fonksiyonun parametresindeki hareket (gesture) için handler kaldırılır.

3) hammertime.enable(toggle) : Bu fonksiyonu bir örnek vererek açıklamak istiyorum. Ekrandaki topu, sürükle bırak özelliğiyle sürükleyip bırakabilme özelliğini bu fonksiyonla topa kazandırıp yine bu fonksiyon ile topun bu özelliğini etkisiz yapabilirsiniz.

  Hammer.js Kullanımı

  Gerekli js ve css dosyalarını bu siteden indirebilirsiniz. Aşağıda basit bir JavaScript kod örneğini inceleyeceğiz.

// hammer.js kütüphanesine hangi elementin izleneceği id'ye göre söylenmiş olur..
var hammer = new Hammer(document.getElementById("elementID"));

// elemente çift dokunuş yapıldığı zaman ne yapılacağı belirlenir. 
hammer.ondoubletap = function (event) {
    alert('Dokundunuz!');
};

Şimdi de sizlere ASP.NET ortamında yapmış olduğum bir örneği göstermek istiyorum. Gerekli css ve js dosyalarını Solution Explorer'a ekledikten sonra bir resime; döndürme, çoklu dokunmatik hareket ile yakınlaştırma ve uzaklaştırma özellikleri ekledim. Aşağıdaki resimde Solution Explorer' a eklemiş olduğum dosyalar görünmektedir.

Aşağıda da yukarıda bahsetmiş olduğum örneğin kodları bulunmaktadır

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <title>Hammer.js Pinch Zoom Ornek</title>  
   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">  
   <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">  
   <style>  
     body {  
       padding: 0;  
       overflow: hidden;  
     }  
     #pinchzoom {  
       -webkit-transform: translate3d(0,0,0);  
       overflow: hidden;  
     }  
   </style>  
 </head>  
 <body>  
   <div id="pinchzoom">  
     <div>  
       <img id="rect" src="assets/img/bebek.jpg" width="2950" height="4500" ondragstart="return false" alt="" />  
     </div>  
   </div>  
   <script src="../dist/hammer.js"></script>  
   <script src="../plugins/hammer.fakemultitouch.js"></script>  
   <script src="../plugins/hammer.showtouches.js"></script>  
   <script>  
     if (!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {  
       Hammer.plugins.showTouches();  
     }  
   </script>  
   <script>  
     if (!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {  
       Hammer.plugins.fakeMultitouch();  
     }  
     var hammertime = Hammer(document.getElementById('pinchzoom'), { // koymuş olduğum resmin id'sini alarak özellikleri ekler..  
       transform_always_block: true,  
       transform_min_scale: 1,  
       drag_block_horizontal: true,  
       drag_block_vertical: true,  
       drag_min_distance: 0  
     });  
     var rect = document.getElementById('rect');  
     var posX = 0, posY = 0,  
       scale = 1, last_scale,  
       rotation = 1, last_rotation;  
     hammertime.on('touch drag transform', function (ev) {  
       switch (ev.type) {  
         case 'touch':  
           last_scale = scale;  
           last_rotation = rotation;  
           break;  
         case 'drag':  
           posX = ev.gesture.deltaX;  
           posY = ev.gesture.deltaY;  
           break;  
         case 'transform':  
           rotation = last_rotation + ev.gesture.rotation;  
           scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));  
           break;  
       }  
       /* transform */  
       var transform =  
           "translate3d(" + posX + "px," + posY + "px, 0) " +  
           "scale3d(" + scale + "," + scale + ", 0) " +  
           "rotate(" + rotation + "deg) ";  
       rect.style.transform = transform;  
       rect.style.oTransform = transform;  
       rect.style.msTransform = transform;  
       rect.style.mozTransform = transform;  
       rect.style.webkitTransform = transform;  
     });  
   </script>  
   <script src="assets/js/ga.js"></script>  
 </body>  
 </html>

Aşağıda da kodların nasıl etki ettiğine dair birkaç ekran görüntüsü bulunmaktadır. Son olarak eklemek istiyorum; SHIFT + MOUSE sayesinde kodun özelliklerini web sayfasında görebiliriz.

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Chronoline.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR

4 yorum:

oguz15 Ocak 2020 11:58
Merhaba Hocam ben denedim ama çalıştıramadım yardımcı olabilir misniz ?
YanıtlaSil
Yanıtlar
oguz15 Ocak 2020 11:58
Merhaba Hocam ben denedim ama çalıştıramadım yardımcı olabilir misniz ?
YanıtlaSil
Yanıtlar
Nona Slot20 Şubat 2022 04:20
Nice information and Thank You
if you don't mind please visit my Website MPOMM
it talks about Slot Online and other fun things.
Thank You
YanıtlaSil
Yanıtlar
Irene Natalia22 Şubat 2022 04:18
Nice information and Thank You
if you don't mind please visit my Website MPOGG
it talks about Slot Online and other fun things.
Also visit our patner website Asiaking168 the best slot in Asia also known as asia slot
Thank You
YanıtlaSil
Yanıtlar

Yorum ekle

3 Kasım 2013 Pazar

4 yorum: