svg图片动态缩放功能-jquery.svg.pan.zoom
插件以编程方式或通过插件以编程方式或通过鼠标/触摸事件启用平移和缩放SVG图像。 特点:
- 插件可以通过编程方式或通过特性实现SVG图像的平移和缩放
- 以编程方式操作SVG viewBox
- 鼠标和触摸事件来平移SVG视图框
- 鼠标滚轮事件来放大或缩小SVG视图框动画
- 鼠标滚轮缩放使光标相对于图像保持在相同的坐标上(也就是类似googlemaps的缩放)
- 限制视图渲染的区域
github
viewBox: viewbox是SVG图像的一个属性,它定义了SVG的可见区域,由4个数字定义:横坐标X、纵坐标Y、宽度Width、高度Height。这些数字一起指定可见区域。这个插件通过操纵这四个数字来工作。例如,将图像向右移动会改变X值,而放大会减小宽度和高度。 **注意事项:触摸以缩放尚不支持不要手动操作svg的viewbox属性,请改用svgpanzoom.setviewbox()。手动操作viewbox会混乱插件的状态。 需要先下载好jquery.js和jquery.svg.pan.zoom.js. **
用法
var svgPanZoom= $("svg").svgPanZoom(options)
如果选择有多个元素,svgPanZoom将以相同的选择顺序为每张图像返回一个svgPanZoom对象数组。如果只选择了一个元素,则返回一个SvgPanZoom对象。如果没有选择任何元素,上述调用将返回null,返回的SvgPanZoom对象包含所有选项,这些选项可以在任何时候直接被覆盖,例如禁用mouseWheel事件:
svgPanZoom.events.mouseWheel= false
SvgPanZoom对象也有通过编程方式操作viewBox的方法。例如:
svgPanZoom.zoomIn()
将使用options.zoomFactor缩放图像。
Options
Options:{
events: {
mouseWheel: boolean (true),
doubleClick: boolean (true),
drag: boolean (true),
dragCursor: string "move"
},
animationTime: number (300),
zoomFactor: number (0.25),
maxZoom: number (3),
panFactor: (number (100),
initialViewBox: {
x: number (0)
y: number (0)
width: number (1000)
height: number (1000)
},
limits: {
x: number (-150)
y: number (-150)
x2: number (1150)
y2: number (1150)
}
}
Methods方法
pan:
svgPanZoom.panLeft(amount, animationTime)
svgPanZoom.panRight(amount, animationTime)
svgPanZoom.panUp(amount, animationTime)
svgPanZoom.panDown(amount, animationTime)
将SVG视图框移动到指定的方向。参数:
- amount:数字,可选。viewBox移动多少,默认为options.panFactor。
- animationTime:数字,可选。动画应该持续多长时间,默认为options.animationTime
zoom:
svgPanZoom.zoomIn(animationTime)
svgPanZoom.zoomOut(animationTime)
viewBox缩放。参数:
- animationTime:数字,可选。动画应该持续多长时间,默认为options.animationTime。
reset:
svgPanZoom.reset()
将SVG重置为选项。initialViewBox值。
getViewBox:
svgPanZoom.getViewBox()
以下格式返回视图框:
{
x: number
y: number
width: number
height: number
}
setViewBox
svgPanZoom.setViewBox(x, y, width, height, animationTime)
将viewBox更改为指定的坐标。会尊重你的选择。限制调整viewBox如果需要(移动或减少它以适应options.limits
- x:数字,左上角的新x坐标
- y:数字,左上角的新y坐标
- width: Number, viewBox的新宽度
- height: Number, viewBox的新高度
- animationTime:数字,可选。动画应该持续多长时间,默认为options.animationTime。
setCenter
svgPanZoom.setCenter(x, y, animationTime)
设置SVG的中心。参数:
- x:数字,中心的新x坐标
- y:数字,中心的新y坐标
- animationTime:数字,可选。动画应该持续多长时间,默认为options.animationTime。
注意:
-仅适用于HTML内联的SVG。您可以使用.load()使用AJAX和call()将SVGimage加载到页面中。回调中的svgPanZoom()
-尚不支持触摸缩放尚不支持
-此插件不会在SVG顶部创建任何控件(如移动图像的箭头)。这些控件很容易手动创建,它们可以调用方法来移动图像。
-不要手动操作svg的viewbox属性,请改用svgpanzoom.setviewbox()。手动操作viewbox会混乱插件的状态。
|