A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/svgdotjs/svg.panzoom.js below:

svgdotjs/svg.panzoom.js: A plugin for svg.js which enables panzoom for viewbox elements

A plugin for svg.js that enables panzoom for svg elements

npm install @svgdotjs/svg.js @svgdotjs/svg.panzoom.js

Include this plugin after including the svg.js library in your html document.

<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/@svgdotjs/svg.panzoom.js/dist/svg.panzoom.js"></script>

Or for esm just import it:

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.panzoom.js'

To enable pan/zoom on an svg:

// enables panZoom
var canvas = SVG()
  .addTo('#id')
  .size(1000, 1000)
  .viewbox('0 0 1000 1000')
  .panZoom()

// zoom programatically
canvas.zoom(lvl, point)

You can configure panZoom by passing options to it.

This could look like this:

var canvas = SVG()
  .addTo('#id')
  .size(1000, 1000)
  .viewbox('0 0 1000 1000')
  .panZoom({ zoomMin: 0.5, zoomMax: 20 })

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:

canvas
  .zoom(1) // uses center of viewport by default
  .animate()
  .zoom(2, { x: 100, y: 100 }) // zoom into specified point

To disable panZoom or change its options just call it again with false or the new options.

You can override the default options by passing an object in to the .panZoom({options}) call.

Option Default Description panning true Enable panning pinchZoom true Enable pinch to zoom wheelZoom true Enable mouse wheel zoom panButton 0 Which mouse button to use for pan (info) oneFingerPan false Enables the ability to pan with only one finger instead of two for touchdevices margins false An object {top, left, right, bottom} to restrict the pan area towards this side so that at least x user units of the opposite side are still visible zoomFactor 2 How quickly to zoom when using wheelZoom zoomMin Number.MIN_VALUE The minimum zoom level zoomMax Number.MAX_VALUE The maximum zoom level wheelZoomDeltaModeLinePixels 17 The multiplier to convert wheel zoom deltaY values from deltaMode=1 (lines) to deltaMode=0 (pixels) wheelZoomDeltaModeScreenPixels 53 The multiplier to convert wheel zoom deltaY values from deltaMode=2 (screen) to deltaMode=0 (pixels) 
draw.panZoom({
  wheelZoom: false,
  zoomMin: 0.5,
  zoomMax: 2
})

This will disable wheel zooming and set the maximum zoom to 2 or 200% and the minimum zoom to 0.5 or 50%.

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 pinchZoom triggers a zoom.

Events fired from SVG.js are CustomEvents, so the arguments passed from svg.panzoom.js are in in the .detail property.

Event Name Argument Value preventDefault support zoom { lvl/box, focus } YES panStart { event } NO panEnd { event } NO panning { box } YES pinchZoomStart { event } YES pinchZoomEnd { event } NO

Where lvl is the new zoom level, focus is the point that is zoomed into, box is the new calculated viewbox and event is the event that triggered the action.

An example of stopping a pinch-zoom action:

var canvas = SVG()
  .addTo('#id')
  .size(1000, 1000)
  .panZoom()

canvas.on('pinchZoomStart', function (ev) {
  ev.preventDefault()
  // ...
})

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4