突破编程_前端_SVG（使用 svg-pan-zoom 库进行平移与缩放）

1 svg-pan-zoom 概述

svg-pan-zoom 是一个轻量级、高性能且易于使用的 JavaScript 库，专为增强 SVG 图像的浏览体验而设计。它提供了平移和缩放功能，使用户能够无缝探索大型或复杂的 SVG 图形。这个库允许用户对SVG图像进行交互操作，包括缩放、平移和旋转等，从而提供了更加灵活和交互式的 SVG 浏览体验。

在 svg-pan-zoom 中，可以通过配置选项来定制SVG的平移和缩放行为。例如，可以设置是否启用平移和缩放功能，控制缩放操作的敏感度，限制用户可以缩放到的最小和最大级别，以及调整SVG图像在视口中的显示方式等。此外，svg-pan-zoom 还提供了回调函数和事件处理机制，允许开发者在特定的 SVG 操作之前或之后执行自定义代码，以及处理自定义的 SVG 事件。

通过使用 svg-pan-zoom，开发者可以轻松地在他们的应用中实现交互式的 SVG 地图、图表或其他可视化元素，从而提升用户体验和应用的交互性。无论是在 Web 应用、移动应用还是桌面应用中，svg-pan-zoom 都能为 SVG 图像提供出色的浏览和交互功能。

2 svg-pan-zoom 的基本使用

2.1 引入 svg-pan-zoom

（1）通过 npm 安装 svg-pan-zoom

进入到指定的开发目录下，初始化 npm 项目（如果你的目录还不是一个 npm 项目，你需要初始化它。这将会创建一个 package.json 文件，其中包含你的项目依赖和其他元数据）。

npm init -y

（2）安装 svg-pan-zoom

使用 npm 安装 svg-pan-zoom 包。

npm install svg-pan-zoom --save

（3）在项目中引入 svg-pan-zoom

  • 可以使用 require 或 import 语句来引入 svg-pan-zoom。
// 使用 CommonJS 语法（Node.js）  
const svgPanZoom = require('svg-pan-zoom');  

// 或者使用 ES6 语法（例如，在模块化的前端项目中）  
import svgPanZoom from 'svg-pan-zoom';
  • 也可以通过 <script> 标签直接引入：
<script src="node_modules/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>

2.2 初始化 svg-pan-zoom

如下为样例代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>SVG Pan Zoom Example</title>  
    <style>  
        /* 确保 SVG 元素有足够的空间来展示和缩放 */  
        #mySvg {  
            width: 400px;  
            height: 200px;  
            border: 1px solid black;  
        }  
    </style>  
</head>  
<body>  
    <svg id="mySvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">  
        <!-- 你的 SVG 内容 -->  
        <rect x="50" y="50" width="100" height="50" fill="lightblue" />  
        <!-- ... 其他 SVG 元素 ... -->  
    </svg>  
  
    <!-- 引入 svg-pan-zoom 库（请确保路径正确） -->  
    <script src="node_modules/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>  
    <script>  
        // 等待 DOM 完全加载  
        document.addEventListener('DOMContentLoaded', function() {  
            // 获取 SVG 元素  
            var svgElement = document.getElementById('mySvg');  
  
            // 初始化 svg-pan-zoom  
            var obj = svgPanZoom(svgElement, {  
                // 这里可以配置选项，比如：  
                zoomEnabled: true, // 允许缩放  
                panEnabled: true,  // 允许平移  
                maxZoom: 10,       // 设置最大缩放级别  
                minZoom: 0.1,      // 设置最小缩放级别  
                // ... 其他配置选项 ...  
            });  
  
            // 你可以在这里添加更多的事件监听器或逻辑  
        });  
    </script>  
</body>  
</html>

在这里插入图片描述

上面的示例做了以下几件事情：

  • 创建了一个带有 id=“mySvg” 的 SVG 元素，并设置了 viewBox 属性以定义其坐标系统。
  • 引入了 svg-pan-zoom 的 JavaScript 文件。请注意，路径 node_modules/svg-pan-zoom/dist/svg-pan-zoom.min.js 是假设已经通过 npm 将 svg-pan-zoom 安装到了 node_modules 目录下。在实际部署时，可能需要将库文件复制到你的静态资源目录，并通过正确的 URL 引用它。
  • 在 DOMContentLoaded 事件触发后，我们获取了 SVG 元素的引用，并使用 svgPanZoom 函数初始化了一个实例。我们传递了 SVG 元素本身以及一个配置对象作为参数。在这个配置对象中，我们启用了缩放和平移功能，并设置了最大和最小缩放级别。
  • 初始化完成后，可以根据需要添加更多的事件监听器或逻辑来处理平移和缩放事件。

2 svg-pan-zoom 的属性

如下是 svg-pan-zoom 的属性的示例：

let panZoomTiger = svgPanZoom('#demo-tiger', {
  viewportSelector: '.svg-pan-zoom_viewport'
, panEnabled: true
, controlIconsEnabled: false
, zoomEnabled: true
, dblClickZoomEnabled: true
, mouseWheelZoomEnabled: true
, preventMouseEventsDefault: true
, zoomScaleSensitivity: 0.2
, minZoom: 0.5
, maxZoom: 10
, fit: true
, contain: false
, center: true
, refreshRate: 'auto'
, beforeZoom: function(){}
, onZoom: function(){}
, beforePan: function(){}
, onPan: function(){}
, onUpdatedCTM: function(){}
, customEventsHandler: {}
, eventsListenerElement: null
});

以下是配置属性的详细解释：

svg-pan-zoom 是一个强大的库，用于为 SVG 元素提供平移和缩放功能。以下是你提供的配置属性的详细解释：

  1. viewportSelector:

    • 描述: 这是一个选择器字符串，用于确定哪个元素将作为 SVG 的视口（viewport）。视口是 SVG 图像显示的区域。
    • 值: 一个 CSS 选择器字符串，例如 ‘.svg-pan-zoom_viewport’。
    • 用途: 将 SVG 图像嵌入到一个特定的容器中，并由这个容器的大小决定 SVG 的视口大小。

  2. panEnabled:

    • 描述: 是否启用平移功能。
    • 值: true 或 false。
    • 用途: 控制用户是否可以通过拖动鼠标来平移 SVG 图像。

  3. controlIconsEnabled:

    • 描述: 是否显示控制图标（如缩放和平移按钮）。
    • 值: true 或 false。
    • 用途: 如果你不希望显示默认的控制图标，可以将其设置为 false。

  4. zoomEnabled:

    • 描述: 是否启用缩放功能。
    • 值: true 或 false。
    • 用途: 控制用户是否可以通过鼠标滚轮或双击来缩放 SVG 图像。

  5. dblClickZoomEnabled:

    • 描述: 是否启用双击缩放功能。
    • 值: true 或 false。
    • 用途: 当用户双击 SVG 图像时，是否触发缩放操作。

  6. mouseWheelZoomEnabled:

    • 描述: 是否启用鼠标滚轮缩放功能。
    • 值: true 或 false。
    • 用途: 控制用户是否可以通过滚动鼠标滚轮来缩放 SVG 图像。

  7. preventMouseEventsDefault:

    • 描述: 是否阻止默认的鼠标事件。
    • 值: true 或 false。
    • 用途: 当设置为 true 时，库会尝试阻止某些默认的鼠标事件，以避免与 SVG-pan-zoom 的交互发生冲突。

  8. zoomScaleSensitivity:

    • 描述: 缩放操作的敏感度。
    • 值: 一个数字，例如 0.2。
    • 用途: 控制每次缩放操作导致的缩放级别变化的大小。

  9. minZoom 和 maxZoom:

    • 描述: SVG 图像的最小和最大缩放级别。
    • 值: 数字，例如 0.5 和 10。
    • 用途: 限制用户可以缩放到的最小和最大级别。

  10. fit:

    • 描述: 是否在初始化时自动调整 SVG 的大小和位置，以适应视口。
    • 值: true 或 false。
    • 用途: SVG 图像在加载时自动适应其容器的大小。

  11. contain:

    • 描述: 当启用时，确保 SVG 图像始终完全显示在视口中，即使缩放级别很高。
    • 值: true 或 false。
    • 用途: 控制 SVG 图像是否始终在视口内完全可见。

  12. center:

    • 描述: 当启用时，SVG 图像会在视口中居中显示。
    • 值: true 或 false。
    • 用途: 控制 SVG 图像是否默认在视口中居中。

  13. refreshRate:

    • 描述: 刷新率设置，用于控制平移和缩放操作的平滑度。
    • 值: ‘auto’ 或一个数字（表示每秒的帧数）。
    • 用途: 当更精细地控制平移和缩放操作的性能。

  14. beforeZoom, onZoom, beforePan, onPan, onUpdatedCTM:

    • 描述: 这些是回调函数，用于在特定的 SVG 操作之前或之后执行自定义代码。
    • 值: 函数。
    • 用途: 允许开发者在平移、缩放或其他操作时执行自定义逻辑。

  15. customEventsHandler:

    • 描述: 一个对象，用于处理自定义事件。
    • 值: 一个对象，其属性是事件名称，值是处理这些事件的函数。
    • 用途: 允许开发者定义和处理自定义的 SVG 事件。

  16. eventsListenerElement:

    • 描述: 指定哪个元素应该监听平移和缩放事件。默认情况下，svg-pan-zoom 会在 SVG 元素本身上监听这些事件。但如果你希望在其他元素（比如一个覆盖层或特定的按钮）上监听这些事件，并触发 SVG 的平移和缩放，你可以使用这个选项来指定那个元素。
    • 值: 一个 DOM 元素或选择器的字符串。
    • 用途: 当应用结构需要更复杂的交互逻辑时，这个选项会很有用。

在配置 svg-pan-zoom 时，这些选项提供了丰富的定制性，使你能够根据你的具体需求来调整 SVG 的平移和缩放行为。

例如，如果你有一个响应式设计的网站，并且希望 SVG 图像能够随着视口大小的变化而自动调整大小和位置，你可以设置 fit 为 true，并可能还要设置 contain 为 true 以确保图像始终在视口中可见。

如果你想要更精细地控制用户的交互体验，你可以使用回调函数（如 beforeZoom 和 onZoom）来添加动画效果、更新 UI 元素或执行其他逻辑。

最后，通过调整 zoomScaleSensitivity、minZoom 和 maxZoom 等选项，你可以确保 SVG 图像的缩放级别在合理的范围内，并为用户提供平滑而一致的缩放体验。

3 svg-pan-zoom 的常用接口

  1. zoomIn():

    • 描述: 放大 SVG 元素。
    • 示例: svgPanZoomInstance.zoomIn();

  2. zoomOut():

    • 描述: 缩小 SVG 元素。
    • 示例: svgPanZoomInstance.zoomOut();

  3. reset():

    • 描述: 将 SVG 元素的视图重置到初始状态，包括缩放和平移。
    • 示例: svgPanZoomInstance.reset();

  4. panBy(dx, dy):

    • 描述: 按照指定的 x（dx）和 y（dy）偏移量平移 SVG 元素。
    • 示例: svgPanZoomInstance.panBy(100, 50); 这将使 SVG 元素向右移动 100 个单位，并向下移动 50 个单位。

  5. zoomAtPoint(scale, point):

    • 描述: 将 SVG 元素缩放到指定的缩放级别（scale）。
    • 参数: scale：目标缩放级别。大于 1 的值表示放大，小于 1 但大于 0 的值表示缩小。point：一个包含 x 和 y 坐标的对象，指定缩放操作的中心点。
    • 示例: svgPanZoomInstance.zoomAtPoint(2); 这将 SVG 元素放大到两倍大小。

样例代码如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>SVG Pan Zoom Example</title>  
    <style>  
        /* 确保 SVG 元素有足够的空间来展示和缩放 */  
        #mySvg {  
            width: 400px;  
            height: 200px;  
            border: 1px solid black;  
        }  
    </style>  
</head>  
<body>  
    <svg id="mySvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">  
        <!-- 你的 SVG 内容 -->  
        <rect x="50" y="50" width="100" height="50" fill="lightblue" />  
        <!-- ... 其他 SVG 元素 ... -->  
    </svg>  
  
    <!-- 引入 svg-pan-zoom 库（请确保路径正确） -->  
    <script src="node_modules/svg-pan-zoom/dist/svg-pan-zoom.js"></script>  
    <script>  
        // 等待 DOM 完全加载  
        document.addEventListener('DOMContentLoaded', function() {  
            var svgElement = document.getElementById('mySvg');  
			var svgPanZoomInstance = svgPanZoom(svgElement, {  
				// 配置选项  
			});  
			  
			// 假设我们有一个事件监听器，当用户点击 SVG 元素时触发缩放  
			svgElement.addEventListener('click', function(event) {  
				var rect = svgElement.getBoundingClientRect();  
				var point = {  
					x: event.clientX - rect.left,  
					y: event.clientY - rect.top  
				};  
				  
				// 以点击点为中心放大到两倍大小  
				svgPanZoomInstance.zoomAtPoint(2, point);  
			});
        });  
    </script>  
</body>  
</html>

  1. getSizes():

    • 描述: 返回当前 SVG 元素和视口的大小信息。
    • 返回值: 一个对象，包含 SVG 元素和视口的宽度和高度。

  2. destroy():

    • 描述: 销毁 svg-pan-zoom 实例，移除所有事件监听器和功能。
    • 示例: svgPanZoomInstance.destroy();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/549353.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

App怎么创建百度百科词条

App怎么创建百度百科词条

创建一个App的百度百科词条可以帮助提高App的知名度和权威性&#xff0c;以下是详细的创建步骤和注意事项&#xff1a; 创建步骤 注册百度账号&#xff1a;首先&#xff0c;你需要有一个百度账号&#xff0c;如果没有&#xff0c;你需要按照步骤申请一个&#xff0c;这一步骤是…
阅读更多...
【ENSP】华为三层交换机配置AAA认证，开启telnet服务

【ENSP】华为三层交换机配置AAA认证，开启telnet服务

配置步骤 1.给交换机配置ip地址&#xff0c;以便登陆 2.配置AAA&#xff0c;用户名&#xff0c;密码&#xff0c;服务类型&#xff0c;用户权限 3.配置接入设备的数量 4.开启telnet服务 LSW2交换机配置 u t m #关闭提示 sys …
阅读更多...
[Linux]--关于进程控制

[Linux]--关于进程控制

进程创建,fork/vfork 在linux中fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。 #include <unistd.h> pid_t fork(void); 返回值&#xff1a;自进程中返回0&#xff0c;父进程返回子进程id&#x…
阅读更多...
网工内推 | 等保测评工程师，朝九晚六，周末双休，有相关认证优先

网工内推 | 等保测评工程师，朝九晚六，周末双休，有相关认证优先

01 江苏国保测评中心 招聘岗位&#xff1a;等保测评工程师 职责描述&#xff1a; 1.测评类项目的物理安全测评、主机安全测评、数据安全测评、应用安全测评、风险评估、差距分析等并编制相关报告; 2.协助业务部门完成网络安全等级保护测评、信息安全咨询、信息安全风险评估等项…
阅读更多...
第1章：自动驾驶车辆“规划”与“控制”的通用架构

第1章：自动驾驶车辆“规划”与“控制”的通用架构

1.1 自动驾驶的分级 2014年美国汽车工程师学会 (SAE) 定义了6个无人驾驶等级&#xff0c;从0级&#xff08;完全手动&#xff09;到5级&#xff08;完全自动&#xff09;&#xff0c;这些无人驾驶等级准则已经被美国交通部采纳&#xff1b;该标准也被称为SAE标准&#xff1b; …
阅读更多...
数模转换（ADC）、IIC、2440内部IIC寄存器、主机发送、主机接收

数模转换（ADC）、IIC、2440内部IIC寄存器、主机发送、主机接收

我要成为嵌入式高手之4月15日ARM第八天&#xff01;&#xff01; ———————————————————————————— ADC 概念 ADC是模拟到数字转换器的缩写。是一种电子设备或者模块。用于将连续变化的模拟信号转换为离散的数字信号&#xff0c;以便数字系统能够对…
阅读更多...
Open3D 体素滤波（30）

Open3D 体素滤波（30）

Open3D 体素滤波（30） 一、算法介绍二、算法实现1.代码2.效果一、算法介绍 体素滤波（Voxel Grid Filtering）是一种常用的点云滤波算法，用于对点云数据进行下采样（降低数据密度）以及去除噪声。该算法将点云数据划分为规则的体素网格，然后在每个体素中选择一个代表性点作为…
阅读更多...
动态规划算法求解最长公共子序列

动态规划算法求解最长公共子序列

动态规划算法是运筹学中求解多阶段决策问题的经典算法&#xff0c;本文将介绍动态规划算法的基本思想&#xff0c;并介绍如何使用动态规划算法求解最长公共子序列问题。 1. 动态规划算法的基本思想 动态规划算法本质也是基于分治思想&#xff0c;将待求解问题分解成若干个子问…
阅读更多...
掀起区块链开发狂潮！Scaffold-eth带你一键打造震撼DApp

掀起区块链开发狂潮！Scaffold-eth带你一键打造震撼DApp

文章目录 前言一、Scaffold-eth是什么&#xff1f;二、安装和配置1.准备工作2.安装3.配置开发环境 三、进阶使用1.放入自己的合约2.部署运行 总结 前言 前面的文章传送&#x1f6aa;&#xff1a;hardhat入门 与 hardhat进阶 在之前的文章中&#xff0c;我们已经探讨了使用Har…
阅读更多...
c++-----继承

c++-----继承

01&#xff1a;继承是什么 定义 继承 (inheritance) 机制是面向对象程序设计 使代码可以复用 的最重要的手段&#xff0c;它允许程序员在 保 持原有类特性的基础上进行扩展 &#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承 呈现了面向对象 程序设计…
阅读更多...
【C语言】带你完全理解指针（六）指针笔试题

【C语言】带你完全理解指针（六）指针笔试题

目录 1. 2. 3. 4. 5. 6. 7. 8. 1. int main() {int a[5] { 1, 2, 3, 4, 5 };int* ptr (int*)(&a 1);printf("%d,%d", *(a 1), *(ptr - 1));return 0; } 【答案】 2&#xff0c;5 【解析】 定义了一个指向整数的指针ptr&#xff0c;并将其初始化为&…
阅读更多...
FactoryMethod工厂方法模式详解

FactoryMethod工厂方法模式详解

目录 模式定义实现方式简单工厂工厂方法主要优点 应用场景源码中的应用 模式定义 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。 Factory Method 使得一个类的实例化延迟到子类。 实现方式 简单工厂 以下示例非设计模式&#xff0c;仅为编码的一种规…
阅读更多...
在centos8.5上迁移深度学习环境的时候碰到的一下问题（需要运维人员解决的）

在centos8.5上迁移深度学习环境的时候碰到的一下问题（需要运维人员解决的）

我负责的是将开发服务器上的深度学习环境进行打包并将该环境迁移到生产服务器上&#xff0c;这些操作可以在其他博客中搜到 本文主要介绍我把环境包上传至生产服务器中的anaconda/envs/路径下&#xff0c;解压之后&#xff0c;运行测试代码时遇到的问题 IT部门是如何处理的&am…
阅读更多...
mfc 带有复选框的ListBox

mfc 带有复选框的ListBox

mfc 带有复选框的 ListBox 效果&#xff1a; 添加 ListBox 控件 从工具箱拖拽 ListBox 控件到窗口上&#xff0c;并设置属性&#xff1a; 包含字符串&#xff1a;true所有者描述&#xff1a;Fixed 给ListBox添加控制变量 添加完后&#xff0c;将m_list_box的类型使用CC…
阅读更多...
Rustdesk如何编译代码实现安装后，不会在右下角出现托盘图标

Rustdesk如何编译代码实现安装后，不会在右下角出现托盘图标

环境&#xff1a; Rustdesk1.1.9 问题描述&#xff1a; Rustdesk如何编译代码实现安装后&#xff0c;不会在右下角出现托盘图标 解决方案&#xff1a; 安装后只有自定义进程图标 详细方案&#xff0c;有需要私聊
阅读更多...
L2-1 堆宝塔分数

L2-1 堆宝塔分数

本题链接&#xff1a;PTA | 程序设计类实验辅助教学平台 题目&#xff1a; 样例&#xff1a; 输入 11 10 8 9 5 12 11 4 3 1 9 15 输出 4 5 思路&#xff1a; 这是一道模拟题&#xff0c;需要有耐心读题&#xff0c;跟着题目走一遍&#xff0c;就可以了。 代码详解如下&…
阅读更多...
中霖教育：没有计量相关工作经验可以考注册计量师吗?

中霖教育：没有计量相关工作经验可以考注册计量师吗?

不可以&#xff0c;报考注册计量师需要满足相关工作年限要求&#xff0c;如果没有相关工作经验是不能报考的。 具体要求如下&#xff1a; 一级计量师; 1.取得理学类或工学类专业大学专科学历&#xff0c;工作满6年&#xff0c;其中从事计量技术工作满4年; 2.取得理学类或工…
阅读更多...
每日OJ题_完全背包②_力扣322. 零钱兑换

每日OJ题_完全背包②_力扣322. 零钱兑换

目录 力扣322. 零钱兑换 问题解析 解析代码 优化代码&#xff08;滚动数组&#xff09; 力扣322. 零钱兑换 322. 零钱兑换 难度 中等 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以…
阅读更多...
外观模式：简化复杂系统的统一接口

外观模式：简化复杂系统的统一接口

在面向对象的软件开发中&#xff0c;外观模式是一种常用的结构型设计模式&#xff0c;旨在为复杂的系统提供一个简化的接口。通过创建一个统一的高级接口&#xff0c;这个模式帮助客户端通过一个简单的方式与复杂的子系统交互。本文将详细介绍外观模式的定义、实现、应用场景以…
阅读更多...
链表拓展之双向链表

链表拓展之双向链表

前言 在前面已经总结了单链表&#xff0c;有了单链表的基础会很好理解双链表的实现&#xff0c;忘记了可以跳转——>http://t.csdnimg.cn/GFPk9 接下来就由我带着各位看官来认识今天的主角吧~ 什么是双向链表 在单链表的基础上&#xff0c;它有两个方向的链接&#xff0c;一…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站