Zoom everywhere, not only center of scene

Mobile
1

Hello,

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) {
e.preventDefault();
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.

2

‘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?

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?

Thanks

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.

5

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)

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.

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?

8

Thanks. How can I do that?

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.

Thanks.

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">

1 Like