svg图片动态缩放功能(jquery.svg.pan.zoom)

司宏伯

2023-12-01

插件以编程方式或通过插件以编程方式或通过鼠标/触摸事件启用平移和缩放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), // 允许拖放来移动SVG事件
        dragCursor: string "move" // 拖动SVG时要使用的光标
    },
    animationTime: number (300), //用作动画默认值的时间（毫秒）。设置0以移除动画
    zoomFactor: number (0.25), // 放大或缩小多少
    maxZoom: number (3), // 最大放大倍数，必须是大于1的数字
    panFactor: (number (100), // how much to move the viewBox when calling .panDirection() methods
    initialViewBox: { // 调用.panDirection（）方法时移动viewBox的量
        x: number (0) // 左上角X坐标
        y: number (0) // 左上角Y坐标
        width: number (1000) // 视图框的宽度
        height: number (1000) // 视图框的高度
    },
    limits: { // 图像可移动的限制。如果为空或未定义，将使用initialViewBox加上每个方向的15%
        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会混乱插件的状态。