Pinch Zoom Canvas
Strongly inspired by img-touch-canvas.
It's a simple library for pinch to zoom an image based on a canvas element for smooth rendering. The library use a Impetus for adding a momentus on move the image zoomed. Impetus is not required but recommended.
Features:
- Momentum for move the image zoomed
- Pintch to zoom and center between the touches
- Double tap to zoom
- Stopping the event when the element is inactive
This plugin is written in Vanilla JS.
Tested on:
- iOS Safari (8.x, 9.x)
- Android Google Chrome
- Cordova App
- Google Chrome
Demo
Open this link into mobile device
Install
bower
$ bower install --save pinch-zoom-canvas
npm
$ npm install --save pinch-zoom-canvas
browser
Options
canvas
mandatory. It is a DOM element where the image is rendered.path
mandatory. It is a path url of image.doubletap
optional (defaulttrue
). Double tap for zooming.momentum
optional (defalutfalse
). Set a momentum when the image is dragged. This parameter require Impetus library.maxZoom
optional (default2
). It is the zoom max.onZoomEnd
optional (defaultnull
). It is a callback function called when the pinch ended.onZoom
optional (defaultnull
). It is a callback function called when zooming.threshold
optional (default40
). Area (in px) of the screen to release touch events.
API
pause()
Stop the render canvas.
resume()
Resume the render canvas.
calculateOffset()
Update the canvas offset.
isZommed()
Return a boolean value for the image state of zoomed.
destroy()
Stop all events and render canvas.
Usage
var pinchZoom = canvas: document path: "your image url" momentum: true zoomMax: 2 doubletap: true { console; console; } { console; } ;
Licence
See the LICENSE file.