SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library
来源:互联网 发布:人民币入篮 知乎 编辑:程序博客网 时间:2024/05/19 20:22
http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/
SVGSPN.JS:
/** * SVGPan library 1.2.1 * ====================== * * Given an unique existing element with id "viewport" (or when missing, the first g * element), including the the library into any SVG adds the following capabilities: * * - Mouse panning * - Mouse zooming (using the wheel) * - Object dragging * * You can configure the behaviour of the pan/zoom/drag with the variables * listed in the CONFIGURATION section of this file. * * Known issues: * * - Zooming (while panning) on Safari has still some issues * * Releases: * * 1.2.1, Mon Jul 4 00:33:18 CEST 2011, Andrea Leofreddi *- Fixed a regression with mouse wheel (now working on Firefox 5) *- Working with viewBox attribute (#4) *- Added "use strict;" and fixed resulting warnings (#5) *- Added configuration variables, dragging is disabled by default (#3) * * 1.2, Sat Mar 20 08:42:50 GMT 2010, Zeng Xiaohui *Fixed a bug with browser mouse handler interaction * * 1.1, Wed Feb 3 17:39:33 GMT 2010, Zeng Xiaohui *Updated the zoom code to support the mouse wheel on Safari/Chrome * * 1.0, Andrea Leofreddi *First release * * This code is licensed under the following BSD license: * * Copyright 2009-2010 Andrea Leofreddi <a.leofreddi@itcharm.com>. All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, are * permitted provided that the following conditions are met: * * 1. Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * * 2. Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY Andrea Leofreddi ``AS IS'' AND ANY EXPRESS OR IMPLIED * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND * FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL Andrea Leofreddi OR * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * * The views and conclusions contained in the software and documentation are those of the * authors and should not be interpreted as representing official policies, either expressed * or implied, of Andrea Leofreddi. */"use strict";/// CONFIGURATION /// ====>var enablePan = 1; // 1 or 0: enable or disable panning (default enabled)var enableZoom = 1; // 1 or 0: enable or disable zooming (default enabled)var enableDrag = 0; // 1 or 0: enable or disable dragging (default disabled)/// <====/// END OF CONFIGURATION var root = document.documentElement;var state = 'none', svgRoot, stateTarget, stateOrigin, stateTf;setupHandlers(root);/** * Register handlers */function setupHandlers(root){setAttributes(root, {"onmouseup" : "handleMouseUp(evt)","onmousedown" : "handleMouseDown(evt)","onmousemove" : "handleMouseMove(evt)",//"onmouseout" : "handleMouseUp(evt)", // Decomment this to stop the pan functionality when dragging out of the SVG element});if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)window.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safarielsewindow.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others}/** * Retrieves the root element for SVG manipulation. The element is then cached into the svgRoot global variable. */function getRoot(root) {if(typeof(svgRoot) == "undefined") {var g = null;g = root.getElementById("viewport");if(g == null)g = root.getElementsByTagName('g')[0];if(g == null)alert('Unable to obtain SVG root element');setCTM(g, g.getCTM());g.removeAttribute("viewBox");svgRoot = g;}return svgRoot;}/** * Instance an SVGPoint object with given event coordinates. */function getEventPoint(evt) {var p = root.createSVGPoint();p.x = evt.clientX;p.y = evt.clientY;return p;}/** * Sets the current transform matrix of an element. */function setCTM(element, matrix) {var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";element.setAttribute("transform", s);}/** * Dumps a matrix to a string (useful for debug). */function dumpMatrix(matrix) {var s = "[ " + matrix.a + ", " + matrix.c + ", " + matrix.e + "\n " + matrix.b + ", " + matrix.d + ", " + matrix.f + "\n 0, 0, 1 ]";return s;}/** * Sets attributes of an element. */function setAttributes(element, attributes){for (var i in attributes)element.setAttributeNS(null, i, attributes[i]);}/** * Handle mouse wheel event. */function handleMouseWheel(evt) {if(!enableZoom)return;if(evt.preventDefault)evt.preventDefault();evt.returnValue = false;var svgDoc = evt.target.ownerDocument;var delta;if(evt.wheelDelta)delta = evt.wheelDelta / 3600; // Chrome/Safarielsedelta = evt.detail / -90; // Mozillavar z = 1 + delta; // Zoom factor: 0.9/1.1var g = getRoot(svgDoc);var p = getEventPoint(evt);p = p.matrixTransform(g.getCTM().inverse());// Compute new scale matrix in current mouse positionvar k = root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y); setCTM(g, g.getCTM().multiply(k));if(typeof(stateTf) == "undefined")stateTf = g.getCTM().inverse();stateTf = stateTf.multiply(k.inverse());}/** * Handle mouse move event. */function handleMouseMove(evt) {if(evt.preventDefault)evt.preventDefault();evt.returnValue = false;var svgDoc = evt.target.ownerDocument;var g = getRoot(svgDoc);if(state == 'pan' && enablePan) {// Pan modevar p = getEventPoint(evt).matrixTransform(stateTf);setCTM(g, stateTf.inverse().translate(p.x - stateOrigin.x, p.y - stateOrigin.y));} else if(state == 'drag' && enableDrag) {// Drag modevar p = getEventPoint(evt).matrixTransform(g.getCTM().inverse());setCTM(stateTarget, root.createSVGMatrix().translate(p.x - stateOrigin.x, p.y - stateOrigin.y).multiply(g.getCTM().inverse()).multiply(stateTarget.getCTM()));stateOrigin = p;}}/** * Handle click event. */function handleMouseDown(evt) {if(evt.preventDefault)evt.preventDefault();evt.returnValue = false;var svgDoc = evt.target.ownerDocument;var g = getRoot(svgDoc);if(evt.target.tagName == "svg" || !enableDrag // Pan anyway when drag is disabled and the user clicked on an element ) {// Pan modestate = 'pan';stateTf = g.getCTM().inverse();stateOrigin = getEventPoint(evt).matrixTransform(stateTf);} else {// Drag modestate = 'drag';stateTarget = evt.target;stateTf = g.getCTM().inverse();stateOrigin = getEventPoint(evt).matrixTransform(stateTf);}}/** * Handle mouse button release event. */function handleMouseUp(evt) {if(evt.preventDefault)evt.preventDefault();evt.returnValue = false;var svgDoc = evt.target.ownerDocument;if(state == 'pan' || state == 'drag') {// Quit pan modestate = '';}}
- SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library
- svg图片动态缩放功能(jquery-svg-pan-zoom)
- Pan Tilt Zoom
- D3 Zoom + Pan
- 实现SVG图片放大缩小(zoom)与拖动(pan)的方法
- SVG drag
- Gesture - Pan,Drag 拖移
- Use advanced interactive viewer to move, zoom and record photos, producing a unique sightline flash
- ImageBox Control with Zoom/Pan Capability
- Adobe SVG Viewer
- Qt SVG Viewer
- javascript drag
- javascript drag
- Click to Drag, Zoom, and Copy - PictureBox
- Qt SVG Viewer Demo 解读
- WPF Chart Control With Pan, Zoom and More
- 医疗软件Pan、Zoom、Rotation的实现原理
- Drag, Rotate, and Zoom——拖拽、旋转和缩放
- 数据库访问类
- linux中环境变量LD_PRELOAD是怎样工作的?
- Sina股票数据接口
- 无法解析或打开软件包的列表或是状态文件 解决方案
- TQ2440裸机中断(外部中断)
- SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library
- sql存储过程
- Memcahce和Redis比较
- 关于 static 的一道题
- ASP程序与SQL存储过程详解
- 六脚自锁开关 引脚定义
- 虚函数的体验
- PHP函数:session_name() session_id()
- c# 多线程模拟生产者消费者