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

2024-04-13 17:20
文章标签 进行 使用 编程 前端 frontend 缩放 svg 突破 平移 zoom pan

本文主要是介绍突破编程_前端_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();

这篇关于突破编程_前端_SVG（使用 svg-pan-zoom 库进行平移与缩放）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/900752。

相关文章

C语言中联合体union的使用

C语言中联合体union的使用

本文编辑整理自： http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union）与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量
阅读更多...
如何突破底层思维方式的牢笼

如何突破底层思维方式的牢笼

我始终认为，牛人和普通人的根本区别在于思维方式的不同，而非知识多少、阅历多少。 在这个世界上总有一帮神一样的人物存在。就像读到的那句话：“人类就像是一条历史长河中的鱼，只有某几条鱼跳出河面，看到世界的法则，但是却无法改变，当那几条鱼中有跳上岸，进化了，改变河道流向，那样才能改变法则。”  最近一段时间一直在不断寻在内心的东西，同时也在不断的去反省和否定自己的一些思维模式，尝试重
阅读更多...
Tolua使用笔记（上）

Tolua使用笔记（上）

目录   1.准备工作 2.运行例子 01.HelloWorld：在C#中，创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile：在C#中，对一个lua文件的执行调用 03.CallLuaFunction：在C#中，对lua函数的操作 04.AccessingLuaVariables：在C#中，对lua变量的操作 05.LuaCoroutine：在Lua中，
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...
零基础STM32单片机编程入门(一)初识STM32单片机

零基础STM32单片机编程入门(一)初识STM32单片机

文章目录 一.概要二.单片机型号命名规则三.STM32F103系统架构四.STM32F103C8T6单片机启动流程五.STM32F103C8T6单片机主要外设资源六.编程过程中芯片数据手册的作用1.单片机外设资源情况2.STM32单片机内部框图3.STM32单片机管脚图4.STM32单片机每个管脚可配功能5.单片机功耗数据6.FALSH编程时间，擦写次数7.I/O高低电平电压表格8.外设接口
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
Lipowerline5.0 雷达电力应用软件下载使用

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据，优化了分类算法，支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类；一键生成危险点报告和交跨报告；还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com，资源源于网络，本介绍用于学习使用，如有侵权请您联系删除！ 2.新增快速版，简洁易上手 支持快速版和专业版切换使用，快速版界面简洁，保留主
阅读更多...
如何免费的去使用connectedpapers？

如何免费的去使用connectedpapers？

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录（也就是访客模式）4. 两次用完，关闭无痕模式（继续重复步骤 2 - 4） 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址：https://www.connectedpapers.com/ 3. 不需要登录（也就是
阅读更多...
16.Spring前世今生与Spring编程思想

16.Spring前世今生与Spring编程思想

1.1.课程目标 1、通过对本章内容的学习,可以掌握Spring的基本架构及各子模块之间的依赖关系。 2、 了解Spring的发展历史，启发思维。 3、 对 Spring形成一个整体的认识，为之后的深入学习做铺垫。 4、 通过对本章内容的学习，可以了解Spring版本升级的规律，从而应用到自己的系统升级版本命名。 5、Spring编程思想总结。 1.2.内容定位 Spring使用经验
阅读更多...
大语言模型（LLMs）能够进行推理和规划吗？

大语言模型（LLMs）能够进行推理和规划吗？

大语言模型（LLMs），基本上是经过强化训练的 n-gram 模型，它们在网络规模的语言语料库（实际上，可以说是我们文明的知识库）上进行了训练，展现出了一种超乎预期的语言行为，引发了我们的广泛关注。从训练和操作的角度来看，LLMs 可以被认为是一种巨大的、非真实的记忆库，相当于为我们所有人提供了一个外部的系统 1（见图 1）。然而，它们表面上的多功能性让许多研究者好奇，这些模型是否也能在通常需要系
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2