Zoom everywhere, not only center of scene

(Jose) #1


I have enable pinch to zoom using

hypeDocument.currentSceneElement = function(){
    return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');

var scale = 1, newScale, el = hypeDocument.currentSceneElement();

function saveChanges() {
scale = newScale;

function getScale(e) {
newScale = scale * e.scale;
if(newScale < 1)newScale = 1;
hypeDocument.setElementProperty(el, 'scaleX', newScale);
hypeDocument.setElementProperty(el, 'scaleY', newScale);

el.addEventListener("gesturechange", getScale, false);
el.addEventListener("gestureend", saveChanges, false);

But it doesn’t matter where I pinch it always zooms from the center of the scene. Is there any way to zoom where I pinch?

Thanks in advance.


‘Pinch to Zoom’ is a feature of mobile browsers, where pinching automatically zooms in on the area being pinched. So if you remove this code and try to pinch into a specific area, it should work as expected. Or maybe I’m not understanding what you’re trying to do?

(Jose) #3

Yes, you understood it, thanks for your answer. The problem is that the html i’ve created with hype is for a phonegap app, and pinch to zoom only works if I add that code :frowning: Is there anyway to edit the code to make it work as I need?


(Jonathan Deutsch) #4

One idea would be to take the midpoint of the multiple finger positions for the gestures and use that as the CSS transform origin.


This has pretty close to the code you would need to use:

(But I would include the Hammer runtime inline to avoid any external references)

(Jose) #6

Hello, sorry for the delay.

I’ve tried pasting it in a function on scene load:

  var el = document.querySelector(".pinch");
  var ham = new Hammer( el, {
    domEvents: true
  } );
  var width = 1900;
  var height = 400;
  var left = 950;
  var top = 220;
  ham.get('pinch').set({ enable: true });
  ham.on( "pinch", function( e ) {
    console.log( "pinch" );
    if ( width * e.scale >= 300 ) {
      var img = el.childNodes[1];
      img.style.width = (width * e.scale) + 'px';
      img.style.marginLeft = (-left * e.scale) + 'px';
      img.style.height = (height * e.scale) + 'px';
      img.style.marginTop = (-top * e.scale) + 'px';
     console.log( e.scale );
  } );
  ham.on( "pinchend", function( e ) {
    width = width * e.scale;
    height = height * e.scale;
    left = left * e.scale;
    top = top * e.scale;
    console.log( width );
  } );

But it doesn’t work. Is this the right piece of code I have to paste?

Thanks in advance.

(Jose) #7

I’ve tried pasting the whole code in my index.html (everyone in its part) but it is still not working. Do I have to change anything in the code?

(Jose) #8

Thanks. How can I do that?

(Jose) #9

Sorry for bothering you again. I’ve tried replacing my html for the index.html from github and I have the same problem: It only zooms from the center of the image, not where I pinch. It could be a solution if I could drag the image to see the part of it I want to zoom, but I can’t drag it.


(Jose) #10

I solved it using this in de html file:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=yes">