svg-pan-zoom-m
Version:
JavaScript library for panning and zooming an SVG image from the mouse, touches and programmatically.
102 lines (86 loc) • 3.58 kB
HTML
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script src="../dist/svg-pan-zoom.js"></script>
<script src="../demo/hammer.js"></script>
</head>
<body>
<div id="mobile-div" style="width: 602px; height: 420px; border:1px solid black; ">
<svg id="mobile-svg" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1">
<defs>
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(56,121,217);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(138,192,7);stop-opacity:1" />
</linearGradient>
</defs>
<g fill="none">
<g stroke="#000" fill="#FFF">
<rect x="5" y="5" width="240" height="240" fill="url(#linear-gradient)"/>
<path d="M 5 5 L 245 245 Z"/>
</g>
</g>
</svg>
</div>
<script>
// Don't use window.onLoad like this in production, because it can only listen to one function.
window.onload = function() {
var eventsHandler;
eventsHandler = {
haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel']
, init: function(options) {
var instance = options.instance
, initialScale = 1
, pannedX = 0
, pannedY = 0
// Init Hammer
// Listen only for pointer and touch events
this.hammer = Hammer(options.svgElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
})
// Enable pinch
this.hammer.get('pinch').set({enable: true})
// Handle double tap
this.hammer.on('doubletap', function(ev){
instance.zoomIn()
})
// Handle pan
this.hammer.on('panstart panmove', function(ev){
// On pan start reset panned variables
if (ev.type === 'panstart') {
pannedX = 0
pannedY = 0
}
// Pan only the difference
instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY})
pannedX = ev.deltaX
pannedY = ev.deltaY
})
// Handle pinch
this.hammer.on('pinchstart pinchmove', function(ev){
// On pinch start remember initial zoom
if (ev.type === 'pinchstart') {
initialScale = instance.getZoom()
instance.zoomAtPoint(initialScale * ev.scale, {x: ev.center.x, y: ev.center.y})
}
instance.zoomAtPoint(initialScale * ev.scale, {x: ev.center.x, y: ev.center.y})
})
// Prevent moving the page on some devices when panning over SVG
options.svgElement.addEventListener('touchmove', function(e){ e.preventDefault(); });
}
, destroy: function(){
this.hammer.destroy()
}
}
// Expose to window namespace for testing purposes
window.panZoom = svgPanZoom('#mobile-svg', {
zoomEnabled: true
, controlIconsEnabled: true
, fit: 1
, center: 1
, customEventsHandler: eventsHandler
});
};
</script>
</body>
</html>