Slightly polish pinch/rotate example

Start box in middle, prevent accidental back/forward gestures on chromeos
googlearchive · Jan 9, 2014 · 90e93f7 · 90e93f7
1 parent f31cf40
commit 90e93f7
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/samples/pinchrotate/index.html b/samples/pinchrotate/index.html
@@ -22,31 +22,36 @@
   <script src="../../pointergestures.js"></script>
 </head>
 <body touch-action="none">
-  <div id="box" touch-action="none"></div>
+  <div id="box"></div>
   <script>
     var zoom = 1;
     var angle = 0;
-    var x = 0, y = 0;
+    var x = innerWidth / 2, y = innerHeight / 2;
 
     document.addEventListener('pinch', function(e) {
       zoom = e.scale;
       x = e.centerX;
       y = e.centerY;
     });
+
     document.addEventListener('rotate', function(e) {
       angle = e.angle;
       x = e.centerX;
       y = e.centerY;
     });
 
+    // prevent forward/back ChromeOS gestures
+    document.addEventListener('pointerdown', function(e) {
+      e.preventDefault();
+    });
+
     function draw() {
       var trans = 'translate(' + Math.floor(x) + 'px, ' + Math.floor(y) + 'px) scale(' + zoom.toFixed(2) + ') rotate(' + angle.toFixed(1) + 'deg)';
       box.style.webkitTransform = box.style.transform = trans;
       requestAnimationFrame(draw);
     };
 
-    requestAnimationFrame(draw);
-
+    draw();
   </script>
 </body>
 </html>