touch-transform v1.1.0
TouchTransform
TouchTransform is a simple to use library for utilizing multi-touch gestures and mouse for visual transforms (Translation, rotation and scaling) based on well-established user interactions such as pinch zooming, two finger rotation and movement (ie. translation).
TouchTransform can perform the transforms automatically through CSS3 transforms, or you can get the data yourself through the onUpdate
callback if you wish to perform your own transformation (ie. if you are doing your own rendering through HTML5 canvas or would like to use the data for another purpose).
Check out the demo!
Usage
The simplest way to use TouchTransform is to include the script and then call the attach function:
Basic Usage
// Adds transform functionality
TouchTransform.attach(document.querySelector('#transformableElement'));
// Resets the transform to its origin
TouchTransform.reset(document.querySelector('#transformableObject'));
// Removes transform functionality
TouchTransform.detach(document.querySelector('#transformableElement'));
Options
Custom target
If you want to affect another element than the one recieving the gestures, you can use the target option to specify an alternative target. If you set target to false, no CSS3 transforms will be performed.
TouchTransform.attach(document.body, {
target: document.querySelector('#transformableElement')
});
Using update Callback
If you only want to recieve the transformation data for your own usage, you can use the onUpdate
callback
Changing default keys for rotate / scale
By default scaling is performed with click+scroll and rotation is performed with click+shift+scroll. If you wish to change this behaviour you can do so with the scaleKey
and rotateKey
options. See MDN Page on Key Values for valid values.
singleTouch mode
I personally don't like single touch transform in the browser. And for some purposes its not what you want at all!
For those who wants users to still pan using one touch gestures, you can enable single touch mode by setting the singleTouch
option to true
.
minScale & maxScale
Use these settings to clamp the scale. Defaults are min: 0.01, max: 100.
TouchTransform.attach(document.body, {
target: false,
onUpdate: function(cssTransform, transformData){
// Example String: 'translate(0px,0px) rotate(45deg) scale(1.5)'
console.log(cssTransform);
// Example Object: { translation: { x:0, y:0 }, rotation: 45, scale: 1.5 }
console.log(transformData);
}
});
Module support
This library supports AMD if define exists, otherwise it will be available in the window global object.
Licensing
This code is provided under the MIT license.