svg.panzoom.js
A plugin for svg.js that enables panzoom for viewport elements
Getting started
npm install svg.panzoom.js
// enables panZoomvar draw = size10001000 // zoom programaticallydraw
You can configure panZoom
by passing options to it.
- zoomMin: Minimal zoom level
- zoomMax: Maximal zoom level
- zoomFactor: How much is zoomed by one mouse wheel step
This could look like this:
var draw = size10001000
Setting the min and max value will automatically restrict the zoom to the provided level.
However you are still able to change the zoom out of that bonds by calling zoom(lvl)
programatically.
On touchable devices a pinchZoom gesture is supported. Min and max values also apply here.
Zooming is animatable, too:
draw // uses center of viewport by default // zoom into specified point
To disable panZoom
or change its options just call it again with false
or the new options.
API
svg.panzoom.js
adds the .zoom()
method to all viewbox elements.
zoom()
- returns current zoom levelzoom(Number)
- will zoom in or out depending if the Number is greater or less than the current zoom levelzoom(Number, {x,y})
- will zoom with the x/y coordinate as center pointzoom(Number, new SVG.Point(x,y))
- will zoom with the x/y coordinate as center point
Method | Return Value |
---|---|
zoom() |
Number |
zoom(Number) |
element |
zoom(Number, {x,y}) |
element |
zoom(Number, new SVG.Point(x,y)) |
element |
viewbox elements
Events
Multiple events are fired doing different actions. This allow you to respond
to actions and in some cases stop an action via preventDefault()
.
zoom
is fired when a mouse wheel event or programmable zoom()
triggers
a zoom. This usually doesn't happen on mobile devices, in which case
pinchZoomStart
is fired when a zoom happens.
Events fired from SVG.js are CustomEvent
s,
so the arguments passed from svg.panzoom.js are in in the .detail
property.
Event Name | Argument Value | preventDefault support |
---|---|---|
zoom | { box, focus } |
YES |
panStart | { event } |
NO |
panEnd | { event } |
NO |
pinchZoomStart | { event } |
YES |
pinchZoomEnd | { event } |
NO |
Where box
is the new viewport,
focus
is point of zoom
and event is the event that triggered the action.
An example of stopping a pan-zoom action:
var draw = size10001000draw