react-touch-zoom-pan-canvas
This is a set of two React higher order components, for hooking mouse and touch events panning/zooming functionality into your application.
The project doesn't have dependencies to any other libraries than React (and TypeScript types for React).
Project home page: https://jussikinnula.github.io/react-touch-zoom-pan-canvas
See the project on GitHub: https://github.com/jussikinnula/react-touch-zoom-pan-canvas
Installation
$ npm install --save react-touch-zoom-pan-canvas
Usage
Example
You can check an example application, which sets canvas full screen and also updates the canvas size on resize, and other fancy things:
Live version: https://jussikinnula.github.io/react-touch-zoom-pan-canvas/example
Source: https://github.com/jussikinnula/react-touch-zoom-pan-canvas/tree/master/example/src
Minimal example
Here's a very minimal version, which writes the seconds after animation started to the canvas.
Touch -component
All parameters are optional.
Parameters wheelMax
and touchSensitivity
are device and operating system specific. So you need to test with real devices. If you want, you could share good values with this project so we could have good defaults in future.
If you are hooking to an external Canvas, you want to set context based on onTranslate
and onScale
values (the coordinates are relative). The onReset
is called on resize, when matrix is reset.
Panning and pinching raw events are untouched (can be either React.MouseEvent<HTMLDivElement>
or React.TouchEvent<HTMLDivElement>
).
Canvas -component
The ctx
in onAnimationFrame
and getContext
callbacks is CanvasRenderingContext2D
, and time is a number (starting where the animation started).
Development
Utilities
The utils
-library used internally by Touch and Canvas -components is used to do matrix and distance calculations. You can look the inner workings also from the source.
Remote Logging
In order to test with real touch -capable devices, you can use remote logging (e.g. get device console.log's into your console), with the following environment variables:
$ REMOTE_LOG=ws://x.x.x.x:12345 npm start
Note! Replace x.x.x.x
with your computer's IP address, accessible from your touch device.
Start remote log in separate shell:
$ npm run remote-log