Author: | michaschwab |
---|---|
Views Total: | 470 views |
Official Page: | Go to website |
Last Update: | November 4, 2020 |
License: | MIT |
Preview:

Description:
EasyPZ is a standalone, dependency-free JavaScript library used to zoom and pan any element with mouse and touch interactions.
Basic usage:
Download and insert the JavaScript file ‘easypz.latest.min.js’ into the web page.
<script src="easypz.latest.min.js"></script>
Add the ‘easypz’ attribute to element you want to zoom and pan.
<svg easypz='{"applyTransformTo": "svg > *"}' height="400" width="400"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>
All possible options.
modes: "SIMPLE_PAN", "HOLD_ZOOM_IN", "CLICK_HOLD_ZOOM_OUT", "WHEEL_ZOOM", "PINCH_ZOOM", "DBLCLICK_ZOOM_IN", "DBLRIGHTCLICK_ZOOM_OUT"], applyTransformTo: "", replaceVariables: false
Callback functions available.
onPanned: function() {}, onZoomed: function() {}, onTransformed: function() {}, onResetAbsoluteScale: function() {},
Changelog:
11/04/2020
- fix merge
v1.1.12 (08/08/2020)
- undo the last change to go back to easier integration with js
v1.1.11 (08/05/2020)
- Export easypz class so it can be imported as module
v1.1.10 (06/23/2020)
- Improve detection of preexisting transformations and reduce error logs
v1.1.9 (06/16/2020)
- update to es2017
v1.1.8 (02/25/2020)
- Allow passing easypz settings via the new data-easypz attribute to be more W3C compliant.
02/21/2020
- Bugfix
- Rewritten in typescript.
02/15/2018
- Bugfix
10/07/2018
- Allow switching between mouse- and touch-based interactions on hybrid devices.
09/17/2018
- Tweak to make the momentum interactions more flexible and obtain more information.