前端之电力系统SVG图低代码
其实所有的图形都是由点，线，面组成的。点线面可以组成一个设备。下面就简单讲讲点线面是怎么画的吧
对于线，可以用path
<g><path:d="`M ${beginX},${beginY} L ${endX},${endY}`":stroke-width="lineWidth":stroke="stroke":style="{ transform: `rotate(${rotateAngle}deg)`, transformOrigin: transformOrigin }"><animate attributeName="stroke" :values="animateStyle" dur="1s" begin="0s" repeatCount="indefinite" v-if="animation" /></path></g>两点一线，只要知道两个点的坐标就可以，但是基础图元可以旋转，也可以闪烁，所以这些属性都需要动态计算。
两点可以组成线，多点可以组成折线，这就需要一个polyline类去解析每个折线。
ployline也是用path就可以了，但是中间的点需要连起来，样式的计算需要循环拼接字符串
const d = computed(() => {if (polyline.value && centerPoint.value) {let tmp = "";for (let i = 0; i < pointList.value.length; i++) {const point = pointList.value[i];if (i === 0) {beginX.value = (point.X() + centerPoint.value.X()) * scaleX.value;beginY.value = (point.Y() + centerPoint.value.Y()) * scaleY.value;tmp += `M ${beginX.value},${beginY.value}`;} else {if (i === pointList.value.length - 1) {endX.value = (point.X() + centerPoint.value.X()) * scaleX.value;endY.value = (point.Y() + centerPoint.value.Y()) * scaleY.value;}tmp += `L ${(point.X() + centerPoint.value.X()) * scaleX.value},${(point.Y() + centerPoint.value.Y()) * scaleY.value}`;}}transformOrigin.value = `${(beginX.value + endX.value) / 2}px ${(beginY.value + endY.value) / 2}px`;return tmp;}return "";
});有了线，当然需要面，这时候一个polygon类就可以解决，唯一和polyline不同的是，path最后一个点需要Z闭合
tmp += "Z";svg里面的渲染最有难度的大圆弧和小圆弧，需要用到三角函数
<pathv-else:d="`M ${beginX},${beginY}A ${r} ${r} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}L ${cx} ${cy}Z`":style="style"><animate attributeName="stroke" :values="animateStyle" dur="1s" begin="0s" repeatCount="indefinite" v-if="animation" /></path>
整圆就用<circle>标签
剩下的都是用foreignObject写的
<foreignObject :x="beginX" :y="beginY" :width="countWidth" :height="countHeight" requiredExtensions="http://www.w3.org/1999/xhtml"><body xmlns="http://www.w3.org/1999/xhtml" class="textBg" :style="{ transform: `rotate(${rotateAngle}deg)` }"><div :class="[isVertical ? 'isVertical' : '', 'textStyle']" v-if="!htmlText" :id="`${str._id}`">{{ strText }}</div><div :class="[isVertical ? 'isVertical' : '', 'textStyle']" v-else v-html="strText" :id="`${str._id}`"></div></body></foreignObject>相关文章：
前端之电力系统SVG图低代码
其实所有的图形都是由点，线，面组成的。点线面可以组成一个设备。下面就简单讲讲点线面是怎么画的吧 对于线，可以用path <g><path:d"M ${beginX},${beginY} L ${endX},${endY}":stroke-width"lineWidth":strok…...
括号生成[中等]
优质博文：IT-BLOG-CN 一、题目 数字n代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且 有效的 括号组合。 示例 1： 输入：n 3 输出：["((()))","(()())","(())(…...
配置ubuntu的VNC时遇到报错_XSERVTransmkdir: Mode of /tmp/.X11-unix should be set to 1777
现在win11内嵌了ubuntu系统，我在根据打造基于 VNC 的 Ubuntu 20.04 的远程桌面 配置VNC server时，到了 vncserver :1 这一步，遇到报错： vncserver: /usr/bin/Xtigervnc did not start up, please look into /root/.vnc/xxxxx.:1.…...
openstack部署nova中出现的问题：
[rootcontroller nova]# su -s /bin/sh -c “nova-manage db sync” nova /usr/lib/python2.7/site-packages/pymysql/cursors.py:170: Warning: (1831, u’Duplicate index block_device_mapping_instance_uuid_virtual_name_device_name_idx. This is deprecated and will be…...
【OpenCV 基础知识 3】边缘检测
文章目录 cvCanny完整示例代码 cvCanny 这行代码使用OpenCV库中的 cvCanny 函数对灰度图像进行边缘检测。让我解释一下： cvCanny(gray, dst, 10, 100, 3);gray: 这是输入的灰度图像，即要进行边缘检测的图像。dst: 这是输出的边缘图像，即将结…...
拓宽知识储备量（指数级成长）
对于增强自己的知识储备，不是什么知识都往脑袋里去塞，最好的办法就是让自己的心态回到自己初心的时候，始终保值一颗学者的心，你像那些成功人士，比如格力，华为，腾讯等这样的大公司创始人哪个不是…...
x264 帧类型代价计算原理：slicetype_mb_cost 函数分析
slicetype_mb_cost 函数 函数功能 计算每个宏块 MB 的代价 cost。函数参数分析 x264_t *h：全局编码结构体x264_mb_analysis_t *a：宏块分析结构体x264_frame_t **frames：系列帧数据结构体int p0：帧序号之一，一般指向靠前帧int p1：帧序号之一，一般指向靠后帧int b：帧标志…...
战网国际服加速器哪个好用 暴雪战网免费加速器分享
战网国际服（Battle.net International或Battle.net Global）是由暴雪娱乐公司（Blizzard Entertainment）运营的面向全球玩家的多人在线游戏平台。与专注于特定地区的版本不同，国际服允许玩家不受地域限制地访问暴雪的多款…...
Java入门基础学习笔记26——break，continue
跳转关键字： break： 跳出并结束当前所在循环的执行。 continue： 用于跳出当前循环中的当次执行，直接进入循环中的下一次执行。 package cn.ensource.loop;public class BreakContinueDemo8 {public static void main(String[] a…...
HNU-算法设计与分析-作业6
第六次作业【分支限界法】 文章目录 第六次作业【分支限界法】<1> 算法实现题6-2 最小权顶点覆盖问题<2> 算法实现题6-6 n后问题<3> 算法实现题6-7 布线问题 <1> 算法实现题6-2 最小权顶点覆盖问题 ▲问题重述 问题描述： 给定一个赋权无向…...
2D Chests Assets - Mega Pack
科幻/奇幻/经典主题的箱子和容器。AAA质量，高分辨率，VFX，源PSD文件。 这是一个带有手绘套装的大包装： -【梦幻之栗】 -【科幻钱包】 AAA质量。高分辨率。一切都已准备就绪，可供使用。包括PSD文件。 在1.1版本中添加了VFX并将项目更新为URP。请注意，新的VFX仅适用于URP/HD…...
一种基于电场连续性的高压MOSFET紧凑模型，用于精确表征电容特性
来源：A Compact Model of High-Voltage MOSFET Based on Electric Field Continuity for Accurate Characterization of Capacitance（TED 24年） 摘要 本文提出了一种新的高压MOSFET（HV MOS）紧凑模型，以消…...
vue阶段性测试题，内容丰富，案例典型，题目配有答案
阶段性测试 理论题实践题 1）理论题 请简述Vue、Node.js、Vscode是什么，以及有什么关系 1. vue是一个轻量级、比较灵活的且支持组件开发的网络框架 2. node.js是让JavaScript运行在服务器上的一直环境 3. Vscode是一款有着丰富插件的代码编辑器 4. 关系…...
如何查看PC电脑已经已经连接上的网络WiFi密码？
运行ncpa.cpl...
Java 语言的特点分析及应用
Java语言自问世以来，因其独特的设计理念和广泛的应用领域，成为了编程语言中的一颗璀璨明星。以下是对Java语言特点的详细分析及其实际应用场景，希望能帮助面试者更好地理解和掌握Java的优势。 1. 简单易学 Java的语法简单，类似于…...
Golang | Leetcode Golang题解之第84题柱状图中最大的矩形
题目： 题解： func largestRectangleArea(heights []int) int {n : len(heights)left, right : make([]int, n), make([]int, n)for i : 0; i < n; i {right[i] n}mono_stack : []int{}for i : 0; i < n; i {for len(mono_stack) > 0 &&am…...
linux实用命令
一、常用命令 mkdir -p mkdir -p 命令用于在Unix和Linux系统中创建目录。其中，-p参数确保目录名称存在，如果目录不存在的就新创建一个。换句话说，-p参数允许创建一个目录和它不存在的父目录，确保了指定的整个目录路径都会被…...
创建和管理数据库
1. 一条数据的存储过程 存储数据是处理数据的第一步.只有正确的把数据存储起来，我们才能进行有效的处理和分析.否则，只能是一团乱麻.在MySQL中，一个完整的数据存储过程一共有四步 : 创建数据库，确认字段，创建数据表&a…...
Spring STOMP-发送消息
如果你想要从应用程序的任何地方向连接的客户端发送消息，要怎么做？任何应用程序组件都可以向brokerChannel发送消息。要这样做，最简单方法是注入一个SimpMessagingTemplate并使用它来发送消息。通常，你会按类型注入它，…...
kubernetes多master集群架构
一、完成master02节点的初始化操作 master02环境准备，详细过程参考上一期博客环境准备 #添加主机映射 vim /etc/hosts 192.168.88.3 master01 192.168.88.8 master02 192.168.88.4 node01 192.168.88.5 node021、准备master02节点需要的文件 从 master01 节点上拷…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）
考察一般的三次多项式，以r为参数： p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]； 此多项式的根为： 尽管看起来这个多项式是特殊的，其实一般的三次多项式都是可以通过线性变换化为这个形式…...
轻量级Docker管理工具Docker Switchboard
简介 什么是 Docker Switchboard ？ Docker Switchboard 是一个轻量级的 Web 应用程序，用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器，使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...
npm安装electron下载太慢，导致报错
npm安装electron下载太慢，导致报错 背景 想学习electron框架做个桌面应用，卡在了安装依赖（无语了）。。。一开始以为node版本或者npm版本太低问题，调整版本后还是报错。偶尔执行install命令后，可以开始下载…...