Provide example how to implement pinch-zooming

[MentalGear]

As a mobile device user, I would expect pinch to zoom to work.
As tested on iOS 9, pinch to zoom is not working.

Also, when using the zoom slider on mobile, the image keeps "jumping" when adjusting zoom levels after dragging the picture.

Hint: Hammer.js is a great touch library to get pinch zoom to work !

[mosch]

Zooming is up to the user of react-avatar-editor. We like to keep this simple and small. However we could provide a react-avatar-editor-pinch component that wraps this one and adds support for pinch

[mosch]

PR for extra component welcome!

[innoist]

I was able to get the Pinch Zoom working by using react-hammer library.
So my component looks like this now

  onPinchOut = (e) => {
    console.log('onPinchOut;', e);
      this.setState({ profileImageDroppedScale: this.state.profileImageDroppedScale + 0.1 }) //initial value of 1
   }
  onPinchIn = (e) => {
        this.setState({ profileImageDroppedScale: this.state.profileImageDroppedScale - 0.1 })
    }

//by default pinch is disabled for react-hammer
let options = {
      recognizers: {
        pinch: { enable: true }
      }
    };

//Adding hammer component for touch support

    <Hammer options={options} onPinchIn={this.onPinchIn} onPinchOut={this.onPinchOut}   >
        <div>
          <AvatarEditor image={this.props.profileImageDropped} width={640} height={640} border={20} ref="avatar" scale={this.state.profileImageDroppedScale}
            rotate={this.state.rotate}
          />
        </div>
      </Hammer>

it is now working smoothly on touch screens.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[serabakpak]

react-hammerjs worked great with older versions of React but it doesn't provide support for React 17. Looks like it isn't actively maintained :(.

Has anyone gotten an alternative way to work with React 17?

[mosch]

Have you tried https://www.npmjs.com/package/react-zoom-pan-pinch ?