Pinch-to-Zoom Functionality (Similar to chrome)

Hello, I’ve been working on adding zoom functionality to my project, and I’ve made some progress, but I’m facing a few challenges. I’d love to get some input on this.

So, here’s what I’ve got so far:

  • When the player pinches the screen, I’m calculating the midpoint between the fingers and using that point to zoom in on an image.
  • This is done by setting the anchor point to the midpoint, repositioning the image, and adjusting the scale.

But, here’s where I’m running into issues:

  • If I stop zooming in and then start pinching in a different spot, it doesn’t zoom in to that new point. I want the anchor to be set to the new position so it starts zooming there.
  • Also, If I get the above functionality then I end up not being able to zoom out to initial position of the image.

I’ve shared my source code below. Zooming in works by taking the midpoint of two fingers and setting the anchor point there (you can see the astronaut sprite). It’s only adjustable when zooming out.

I’m aiming for a behavior similar to Chrome’s zooming. Any suggestions or insights would be greatly appreciated! Thanks!

Cocos creator v:2.4.4

Zoom.zip (1.6 MB)

Just giving this post a little nudge in case it got lost in the shuffle. Still hoping for some insights or suggestions. Thanks! :blush:

Hello,

I have come across the “pinchzoom” library on GitHub (GitHub - manuelstofer/pinchzoom: A Javascript library providing multi-touch gestures for zooming and dragging on any DOM element.), which provides pinch zoom functionality. I would like to use this functionality in my Cocos Creator project, but I’m not sure how to adapt it for Cocos Creator.

Here are the specific points I need assistance with:

  1. How to integrate the pinchzoom library into a Cocos Creator project.
  2. Adapting the library to work with Cocos Creator’s touch events.
  3. Ensuring that the pinch zoom functionality is smooth and works correctly in Cocos Creator.

If anyone has experience with using external libraries in Cocos Creator or can provide guidance on adapting JavaScript libraries to Cocos Creator’s environment, I would greatly appreciate your help.

It would be great if this (pinch zoom code) can be directly used.

Additionally, if you have any code snippets or examples that can help me, please share them.

Thank you in advance for your assistance!

2 Likes

@pandamicro. Any suggestions on this. Any help will be appreciated.