当前位置：首页 > news >正文

封装svg图片展示及操作组件——svgComponent——js技能提升

news 来源：原创 2025/5/28 7:39:33

在这里插入图片描述

template部分

<template><div class="canvas-wrapper" ref="canvasWrapper"><svg:viewBox="computedViewBox"ref="svgCanvas"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"class="schematic-svg"@mousedown="startDrag"@mousemove="onDrag"@mouseup="endDrag"@wheel="onScroll"v-html="svgContent"preserveAspectRatio="xMinYMin meet"></svg></div>
</template>

在这里插入图片描述
this.klFile = "data:image/svg+xml;base64," + data[0].kl_svg
<svg-component v-if="klFile !== null" :svg-base64="klFile" view-box="0 0 2000 2000"></svg-component>

script部分

<script>
export default {name:'SvgComponent',props: {svgBase64: {type: String,required: true},viewBox: {type: String,required: true},},data() {return {computedViewBox: this.viewBox, // 用于动态修改的 viewBoxdragging: false,startX: 0,startY: 0,viewBoxX: 0,viewBoxY: 0,svgContent: "", // 存储解码后的 SVG 内容};},watch: {svgBase64() {// 响应 props 变化并重新渲染 SVGthis.decodeSvgBase64();},},mounted() {this.decodeSvgBase64();},methods: {decodeSvgBase64() {// 解码 Base64 数据// 检查并移除可能存在的 Base64 数据头let base64String = this.svgBase64;const prefix = "data:image/svg+xml;base64,";if (base64String.startsWith(prefix)) {base64String = base64String.replace(prefix, "");}// 尝试解码 Base64 数据const decodedData = atob(base64String);this.svgContent = decodedData; // 将解码后的内容赋值给 svgContent},startDrag(event) {this.dragging = true;this.startX = event.clientX;this.startY = event.clientY;},onDrag(event) {if (this.dragging) {const dx = this.startX - event.clientX;const dy = this.startY - event.clientY;this.viewBoxX += dx;this.viewBoxY += dy;this.updateViewBox();this.startX = event.clientX;this.startY = event.clientY;}},endDrag() {this.dragging = false;},onScroll(event) {event.preventDefault();const zoomAmount = 1.1;const [x, y, w, h] = this.computedViewBox.split(" ").map(Number);// Zoom in or outif (event.deltaY < 0) {// Zoom inthis.computedViewBox = `${x + w * (1 - 1 / zoomAmount) / 2} ${y + h * (1 - 1 / zoomAmount) / 2} ${w / zoomAmount} ${h / zoomAmount}`;} else {// Zoom outthis.computedViewBox = `${x - w * (zoomAmount - 1) / 2} ${y - h * (zoomAmount - 1) / 2} ${w * zoomAmount} ${h * zoomAmount}`;}},updateViewBox() {const [x, y, w, h] = this.viewBox.split(" ").map(Number);this.computedViewBox = `${this.viewBoxX} ${this.viewBoxY} ${w} ${h}`;}},
};
</script>

css部分

<style scoped>
.canvas-wrapper {border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);overflow: hidden;
}.schematic-svg {width: 100%;height: 100%;
}
</style>

封装svg图片展示及操作组件——svgComponent——js技能提升

template部分 <template><div class"canvas-wrapper" ref"canvasWrapper"><svg:viewBox"computedViewBox"ref"svgCanvas"xmlns"http://www.w3.org/2000/svg"xmlns:xlink"http://www.w3.org/1999/xlink…...

编程日记 2025/5/28 7:39:33

数据从前端传到后端入库过程分析

数据从前端传到后端入库过程分析概述积累了一些项目经验，成长为一个老程序员了，自认为对各种业务和技术都能得心应手的应对了，殊不知很多时候我们借助了搜索引擎的能力，当然现在大家都是通过AI来武装自己。今天要分析的话题是…...

编程日记 2025/5/24 6:16:13

【Pytest】结构介绍

1.目录结构介绍 project_root/ │ ├── tests/ # 测试用例存放目录 │ ├── __init__.py │ ├── test_module1.py │ ├── module1.py # 被测试的模块 ├── conftest.py # pytest配置文件，可定义fixture和钩子函数 ├── py…...

编程日记 2025/5/24 15:21:24

每日十题八股-2025年1月23日

1.快排为什么时间复杂度最差是O（n^2） 2.快排这么强，那冒泡排序还有必要吗？ 3.如果要对一个很大的数据集，进行排序，而没办法一次性在内存排序，这时候怎么办？ 4.面试官：你的…...

编程日记 2025/5/28 3:34:27

mysql相关知识(详细)

一、什么是数据库？ 概念：数据库(Database,简称DB)，长期存放在计算机内，有组织，可共享的大量数据的集合，是一个数据"仓库"。作用：存放管理数据分类：关系型数据库、NoSQL数…...

编程日记 2025/5/27 6:35:03

C++ 静态变量static的使用方法

static概述： static关键字有三种使用方式，其中前两种只指在C语言中使用，第三种在C中使用。静态局部变量（C) 静态全局变量/函数（C) 静态数据成员/成员函数（C） 静态局部变量静态局部变量&…...

编程日记 2025/5/26 17:52:35

对grid布局有哪些了解【css】

CSS Grid 布局是现代网页设计中非常强大的布局方式之一，它能够使你以更加灵活且直观的方式来设计网页的布局，特别适用于复杂的多行多列的布局。它允许你在网页上创建非常精确的网格，帮助你把内容放置在多个行和列中。 1. Grid 布局的基本概念…...

编程日记 2025/5/26 20:46:55

IOS 安全机制拦截 window.open

摘要在ios环境，在某些情况下执行window.open不生效一、window.open window.open(url, target, windowFeatures) 1. url：「可选参数」，表示你要加载的资源URL或路径，如果不传，则打开一个url地址为about:blank的空…...

编程日记 2025/5/24 14:32:57

低空经济（9）低空飞行器零部件供应商国内外厂家

低空飞行器零部件供应商国内外厂家 1.概述2.国内供应商2.1 动力系统2.2 航电系统2.3 机身结构部件2.4 传动系统2.5 液压系统与气动系统 3.国外供应商3.1 动力系统3.2 航电系统3.3 机身结构部件3.4 传动系统3.5 液压与气动系统 tips：资料来自网络，仅供参考…...

编程日记 2025/5/25 10:12:46

3b1b线性代数基础

零、写在前面 3b1b之前没认真看，闲了整理整理。一、向量学习物理的时候，向量是空间中的箭头。由其方向和长度决定。学习数据结构的时候，向量是有序的数字列表。向量的每一维度有着不同含义。线性代数中，我们通常认为**向量…...

编程日记 2025/5/27 10:34:27

困境如雾路难寻，心若清明步自轻---2024年创作回顾

文章目录前言博客创作回顾第一次被催更第一次获得证书周榜几篇博客互动最多的最满意的引发思考的写博契机碎碎念时也运也部分经验尾前言今年三月份，我已写下一篇《近一年多个人总结》，当时还没开始写博客。四月份写博后，就顺手将那篇总…...

编程日记 2025/5/28 7:26:48

文章目录 1 : Introduction2 : Summary3: Reerence document4 : Example 1 : Introduction In the abap development we deal with data and the carrier is internal table . it is transfered in the whole programe. In the interview we offten meet it . What is the dif…...

编程日记 2025/5/28 7:09:11

从0到1学习机器学习实践--1 安装Anaconda

机器学习首先安装conda环境，这个是比较靠谱手把手执行的安装教程最新最全（亲测）的conda安装教程和虚拟环境安装环境配置...

编程日记 2025/5/6 7:52:57

整合管理输入、工具与技术、输出

过程输入工具与技术输出制定项目章程1.项目立项文件2.协议3.事业环境因素4.组织过程资产1.专家判断2.数据收集头脑风暴、焦点小组、访谈3.人际关系与团队技能冲突管理、引导、会议管理4.会议1.项目章程2.假设日志制订项目管理计划1.项目章程2.其他过程输出3.事业环境因素4.组织…...

编程日记 2025/5/24 15:04:07

sed — 流编辑器：从入门到精通

内容速览简介 sed（Stream Editor）是一个功能强大的文本处理工具，广泛应用于文本文件的自动化编辑和批量处理。它通过逐行读取文件内容并在内存中的临时缓冲区（即“模式空间”）中处理文本，实现高效的文本…...

编程日记 2025/5/28 6:52:25

【玩转全栈】----Django基本配置和介绍

目录 Django基本介绍： Django基本配置： 安装Django 创建项目创建app 注册app Django配置路由URL Django创建视图启动项目 Django基本介绍： Django是一个开源的、基于Python的高级Web框架，旨在以快速、简洁的方式构建高质量的Web…...

编程日记 2025/5/24 15:03:26

【Linux】文件操作、系统IO相关操作、inode和输入输出重定向

⭐️个人主页：小羊 ⭐️所属专栏：Linux 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录 1、理解文件1.1 狭义理解1.2 广义理解1.3 文件操作1.4 系统角度 2、系统文件IO2.1 文件相关操作2.2 文件描述符2.3 重定向 3、动静…...

编程日记 2025/5/27 17:54:31

Prometheus+grafana实践：Doris数据库的监控

文章来源：乐维社区 Doris数据库背景 Doris（Apache Doris）是一个现代化的MPP（Massive Parallel Processing，大规模并行处理）数据库，主要用于在线分析处理（OLAP）场景。 D…...

编程日记 2025/5/28 7:07:51

c语言（转义字符）

前言： 内容： 然后记一下转义字符 \? 在书写连续多个问号时使用，防止他们被解析成三字母词 \ 用于表示字符常量 \\ 用于表示一个反斜杠，防止他被解析为一个转义序列符 \n 换行 \r …...

编程日记 2025/5/28 7:21:39

TOGAF之架构标准规范-信息系统架构 | 数据架构

TOGAF是工业级的企业架构标准规范，信息系统架构阶段是由数据架构阶段以及应用架构阶段构成，本文主要描述信息系统架构阶段中的数据架构阶段。如上所示，信息系统架构（Information Systems Architectures）在TOGAF标准规…...

编程日记 2025/5/26 9:18:42

快速排序：一种高效的排序算法

前言排序是最基本和最常用的操作之一。无论是数据处理、搜索优化，还是各种应用程序的内部逻辑，排序算法的选择都直接影响到程序的性能。快速排序（Quick Sort）作为一种典型的分治算法，以其平均时间复杂度 O(n log n) 和优越的实际表现，成为了现代编程中最常用的排序算法…...

编程日记 2025/5/28 6:52:25

PHP：从入门到进阶的编程之旅

在Web开发的广阔天地中，PHP（Hypertext Preprocessor，超文本预处理器）无疑是一颗璀璨的明星。自1995年问世以来，PHP凭借其开源、跨平台、易于学习和使用的特性，迅速成为Web开发领域中最受欢迎的语言之一。本…...

编程日记 2025/5/26 3:50:09

Windows的docker中安装gitlab

一.Windows的docker中安装gitlab 1.通过阿里云拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/lab99/gitlab-ce-zh 2.在本地创建备份数据的目录 mkdir -p D:home/software/gitlab/etc mkdir -p D:home/software/gitlab/logs mkdir -p D:home/software/gitlab/dat…...

编程日记 2025/5/27 11:29:34

计算机网络（58）无线局域网WLAN

前言无线局域网WLAN（Wireless Local Area Network）是一种利用无线通信技术将计算机设备互联起来，构成可以互相通信和实现资源共享的网络体系。一、定义与特点定义： WLAN通过无线信道代替有线传输介质连接两个或多个设备形成一个…...

编程日记 2025/5/28 7:41:27

LeetCode： 45.跳跃游戏II

跟着carl学算法，本系列博客仅做个人记录，建议大家都去看carl本人的博客，写的真的很好的！ 代码随想录 LeetCode： 45.跳跃游戏II 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。每个元素 nums[i] 表示…...

编程日记 2025/5/27 3:46:46

Blazo-Blazor Web App项目结构

让我们还是从创建项目开始，来一起了解下Blazor Web App的项目情况创建项目呈现方式这里我们可以看到需要选择项目的呈现方式，有以上四种呈现方式 ● WebAssembly ● Server ● Auto(Server and WebAssembly) ● None 纯静态界面静态SSR呈现方式 WebAs…...

编程日记 2025/5/27 17:55:09

汇编语法及相关指令

1.汇编指令的基本格式： <opcode>{<cond>}{s} <Rd>, <Rn>, <shifter_operand> opcode：指令的功能码，用来表示当前指令的作用 cond：条件码，需要在指令执行之前先判断条件受否满足&…...

编程日记 2025/5/28 7:35:02

数据结构——堆（介绍，堆的基本操作、堆排序）

我是一个计算机专业研0的学生卡蒙Camel🐫🐫🐫（刚保研） 记录每天学习过程（主要学习Java、python、人工智能），总结知识点（内容来自：自我总结网上借鉴&#xff0…...

编程日记 2025/5/28 7:39:32

linux+docker+nacos+mysql部署

一、下载 docker pull mysql:5.7 docker pull nacos/nacos-server:v2.2.2 docker images 二、mysql部署 1、创建目录存储数据信息 mkdir ~/mysql cd ~/mysql 2、运行 MySQL 容器 docker run -id \ -p 3306:3306 \ --name mysql \ -v $PWD/conf:/etc/mysql/conf.d \ -v $PWD/…...

编程日记 2025/5/25 10:28:00

10个非常基础的 Javascript 问题

Javascript是一种用于Web开发的编程语言。JavaScript在网络的客户端上运行。根据MDN，JavaScript（通常缩写为JS）是一种轻量级的，解释性的，面向对象的语言，具有一流的功能，并且最著名的是Web页面…...

编程日记 2025/5/24 1:08:11

SCP收容物221~225

注 ：此文接SCP收容物211~215,本文只供开玩笑 ,与steve_gqq_MC合作 --------------------------------------------------------------------------------------------------------------------------------- 目录 scp-221 scp-222 scp-223 scp-224 scp-225 s…...

编程日记 2025/5/27 7:01:03

基于迁移学习的ResNet50模型实现石榴病害数据集多分类图片预测

完整源码项目包获取→点击文章末尾名片！ 番石榴病害数据集背景描述番石榴 （Psidium guajava） 是南亚的主要作物，尤其是在孟加拉国。它富含维生素 C 和纤维，支持区域经济和营养。不幸的是，番石榴生产受到降…...

编程日记 2025/5/22 22:01:26

网络(三) 协议

目录 1. IP协议; 2. 以太网协议; 3. DNS协议, ICMP协议, NAT技术. 1. IP协议: 1.1 介绍: 网际互连协议, 网络层是进行数据真正传输的一层, 进行数据从一个主机传输到另一个主机. 网络层可以将数据主机进行传送, 那么传输层保证数据可靠性, 一起就是TCP/IP协议. 路径选择: 确…...

编程日记 2025/5/28 7:32:19

【mptcp】ubuntu18.04和MT7981搭建mptcp测试环境操作说明

目录安装ubuntu18.04，可以使用虚拟机安装... 2 点击安装VMware Tool 2 更新ubuntu18.04源... 4 安装ifconfig指令工具包... 5 安装vim工具包... 5...

编程日记 2025/5/22 22:00:17

递归的本质

字节面试题叠罗汉，很遗憾没想出来，看了答案挺巧妙的，但是居然是个案例题。。。复习一下递归的本质正面解决问题利用子问题来解决可以通过规约推导的，基本可以用递归解决！ 在写这道算法题时，我想规…...

编程日记 2025/5/28 2:11:25

如何使用tmux !

在tmux的界面按住shift，就可以和普通linux界面一样！！！！！！！！ 单击右键可以复制粘贴，滚动鼠标可以上下翻页！！！！…...

编程日记 2025/5/25 21:23:09

【Vim Masterclass 笔记25】S10L45：Vim 多窗口的常用操作方法及相关注意事项

文章目录 S10L45 Working with Multiple Windows1 水平分割窗口2 在水平分割的新窗口中显示其它文件内容3 垂直分割窗口4 窗口的关闭5 在同一窗口水平拆分出多个窗口6 关闭其余窗口7 让四个文件呈田字形排列8 光标在多窗口中的定位9 调节子窗口的尺寸大小10 变换子窗口的位置11…...

编程日记 2025/5/28 0:54:06

C语言练习（16）

猴子吃桃问题。猴子第一天摘下若干个桃子，当即吃了一半，还不过瘾，又多吃了一个。第二天早上又将剩下的桃子吃掉一半，又多吃了一个。以后每天早上都吃了前一天剩下的一半加一个。到第10天早上想再吃时，见只剩一个桃子了…...

编程日记 2025/5/27 10:34:33

【0x0012】HCI_Delete_Stored_Link_Key命令详解

目录一、命令参数二、命令格式及参数 2.1. HCI_Delete_Stored_Link_Key 命令格式 2.2. BD_ADDR 2.3. Delete_All 三、生成事件及参数 3.1. HCI_Command_Complete事件 3.2. Status 3.3. Num_Keys_Deleted 四、命令执行流程 4.1. 命令发送阶段 4.2. 控制器处理阶段…...

编程日记 2025/5/26 9:54:14

学习ASP.NET Core的身份认证（基于JwtBearer的身份认证10）

基于Cookie传递token的主要思路是通过用户身份验证后，将生成的token保存到Response.Cookies返回客户端，后续客户端访问服务接口时会自动携带Cookie到服务端以便验证身份。之前一直搞不清楚的是服务端程序如何从Cookie读取token进行认证（一般都…...

编程日记 2025/5/26 17:26:35

应用层协议 HTTP 讲解实战：从0实现HTTP 服务器

🌈 个人主页：Zfox_ 🔥 系列专栏：Linux 目录一：🔥 HTTP 协议 🦋 认识 URL🦋 urlencode 和 urldecode 二：🔥 HTTP 协议请求与响应格式 🦋 HTTP 请求…...

编程日记 2025/5/19 17:50:43

Linux权限管理：从用户切换到文件权限

在Linux系统中，权限管理是确保系统安全和资源合理分配的核心机制。它通过用户和用户组的管理、文件权限的设置以及特殊权限的使用，实现了对系统资源的精细控制。一、用户切换：su 和 sudo 1. 用户切换命令 su su（switch user&a…...

编程日记 2025/5/23 19:12:43

PyQt5超详细教程终篇

PyQt5超详细教程前言接： [【Python篇】PyQt5 超详细教程——由入门到精通（序篇）](【Python篇】PyQt5 超详细教程——由入门到精通（序篇）-CSDN博客) 建议把代码复制到pycahrm等IDE上面看实际效果，方便理…...

编程日记 2025/5/27 13:04:12

Alibaba Spring Cloud 四 Seata 的核心组件：TC

Seata 的 Transaction Coordinator (TC) 是分布式事务架构中的核心组件之一，它负责管理全局事务的生命周期，包括事务的创建、状态维护以及协调各分支事务的提交和回滚。以下是有关 TC 的详细解析及其配置和使用方法： 1. TC 的核心功能全局事…...

编程日记 2025/5/23 4:05:11

机器学习-线性回归（简单回归、多元回归）

这一篇文章，我们主要来理解一下，什么是线性回归中的简单回归和多元回归，顺便掌握一下特征向量的概念。一、简单回归简单回归是线性回归的一种最基本形式，它用于研究**一个自变量（输入）与一个因变量&…...

编程日记 2025/5/22 11:59:13

Java如何向http/https接口发出请求

用Java发送web请求所用到的包都在java.net下，在具体使用时可以用如下代码，你可以把它封装成一个工具类 import javax.net.ssl.*; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.Outpu…...

编程日记 2025/5/22 21:31:45

three.js+WebGL踩坑经验合集(1):THREE.Line无故消失的元凶

在项目开发过程中，笔者两次遇到同事的一个提问，我场景中的Line在相机旋转到某些角度或者移动到某些位置的时候会无故消失。由于业务场景复杂，所以这两位同事都是先花费了大量时间排查业务问题，然后才找我求助。这个问题抽象出来的…...

编程日记 2025/5/27 21:55:01

【ROS】RViz2源码分析（四）：初始化、启动

【ROS】郭老二博文之：ROS目录 1、简述 RViz2在main函数中，首先注册日志处理函数；将 RCLCPP_DEBUG 等日志记录函数，通过 rviz_common::set_logging_handlers() 注册到 rviz_common 中。然后，创建界面类 rviz_common::VisualizerApp，并执行初始化 vapp.init(argc, argv)…...

编程日记 2025/5/26 13:47:42

【MySQL】库的操作

欢迎拜访：雾里看山-CSDN博客本篇主题：【MySQL】库的操作发布时间：2025.1.23 隶属专栏：MySQL 目录库的创建语法使用编码规则认识编码集查看数据库默认的编码集和校验集查看数据库支持的编码集和校验集指定编码创建数据库验证不…...

编程日记 2025/5/24 17:27:39

豆包MarsCode 蛇年编程大作战 | 高效开发“蛇年运势预测系统”

🌟 嗨，我是LucianaiB！ 🌍 总有人间一两风，填我十万八千梦。 🚀 路漫漫其修远兮，吾将上下而求索。豆包MarsCode 蛇年编程大作战 | 🐍 蛇年运势预测在线体验地址：蛇年…...

编程日记 2025/5/28 6:56:57

template部分

script部分

css部分

相关文章：