2D Touch Controls

Live Demo

Try it on a mobile/touchscreen device at fadaaszhi.github.io.

2d-touch-controls.mp4

Description

1-4 finger touch controls for viewing a 2D image. Using more fingers gives you more control over the transformation applied to the image:

• 1 finger: translation
• 2 fingers: the above + rotation and uniform scale
• 3 fingers: the above + non-uniform scale and shear (an affine transformation)
• 4 fingers: the above + perspective warp (a homography)

Development

First run

npm install

Then for development

npm run dev

Or for building

npm run build