Touch-enabled Element Zoom & Pan Library – EasyPZ

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

Preview:

Touch-enabled Element Zoom & Pan Library – EasyPZ

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.

You Might Be Interested In:


Leave a Reply