Two finger touch gesture events

[pmndrs]

Two finger touch gesture events

[dbismut]

Hey @tim-soft we've just released beta of v5.0.0 ([email protected]) that introduces new gestures, including pinch.

The pinch handler returns da instead of xy (d for distance and a for angle), but you'll probably end up using local that returns delta with book-keeping, and that you should use to calculate the scale or the rotation. Here is a temp codesandbox here that does just that.

Note that there's quite a few api changes that are mentioned here. Usage for pinch should be:

const bind = useGesture({ onDrag: () => {}, onPinch: () => {} }, {...config})

Edit: bump to 5.0.0

[drcmda]

never thought about it but would be a useful addition. do you have any ideas regarding the api that you like? i think i would trust your realworld usecase more than my whims right now, i haven't done much with multitouch before.

[tim-soft]

@dotlouis I haven't had much time to mess with this recently but here is the actual code that I'm using for a lightbox library

tim-soft@5bef968

Then you can use this by

<Gesture key={i} onMove={props => this.onMove({ ...props, i })}>
  {({ pinch: [, pinchScale] }) => (
    <Spring native to={{ pinchScale }}>
      {({ pinchScale }) => (
        <animated.div style={{ transform: `scale(${pinchScale})`, }}>
          <img />
        </animated.div>
      )}
    </Spring>
  )}
</Gesture>

Now that I think about it, I could probably just return the pinch delta from the lib and calculate the pinchScale on my own, not really the library's job/opinionated

demo: https://next-portfolio-rfflj3yd8.now.sh/portfolio
click any picture to open lightbox, pinch zoom the images

[dotlouis]

Actually trying to work with multi-touch events too (pinch to zoom). I will report any findings if it can help

[drcmda]

@tim-soft so let's put this into 5.x?