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

前端之电力系统SVG图低代码

news 2025/7/9 17:12:08

其实所有的图形都是由点，线，面组成的。点线面可以组成一个设备。下面就简单讲讲点线面是怎么画的吧

对于线，可以用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图低代码

其实所有的图形都是由点&#xff0c;线&#xff0c;面组成的。点线面可以组成一个设备。下面就简单讲讲点线面是怎么画的吧 对于线&#xff0c;可以用path <g><path:d"M ${beginX},${beginY} L ${endX},${endY}":stroke-width"lineWidth":strok…...

编程日记 2024/5/16 6:21:58

括号生成[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 数字n代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())(…...

编程日记 2024/5/16 6:20:57

配置ubuntu的VNC时遇到报错_XSERVTransmkdir: Mode of /tmp/.X11-unix should be set to 1777

现在win11内嵌了ubuntu系统&#xff0c;我在根据打造基于 VNC 的 Ubuntu 20.04 的远程桌面 配置VNC server时&#xff0c;到了 vncserver :1 这一步&#xff0c;遇到报错&#xff1a; vncserver: /usr/bin/Xtigervnc did not start up, please look into /root/.vnc/xxxxx.:1.…...

编程日记 2024/5/16 6:19:56

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…...

编程日记 2024/5/16 6:18:54

【OpenCV 基础知识 3】边缘检测

文章目录 cvCanny完整示例代码 cvCanny 这行代码使用OpenCV库中的 cvCanny 函数对灰度图像进行边缘检测。让我解释一下&#xff1a; cvCanny(gray, dst, 10, 100, 3);gray: 这是输入的灰度图像&#xff0c;即要进行边缘检测的图像。dst: 这是输出的边缘图像&#xff0c;即将结…...

编程日记 2024/5/16 6:16:53

拓宽知识储备量（指数级成长）

对于增强自己的知识储备&#xff0c;不是什么知识都往脑袋里去塞&#xff0c;最好的办法就是让自己的心态回到自己初心的时候&#xff0c;始终保值一颗学者的心&#xff0c;你像那些成功人士&#xff0c;比如格力&#xff0c;华为&#xff0c;腾讯等这样的大公司创始人哪个不是…...

编程日记 2024/5/16 6:15:51

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：帧标志…...

编程日记 2024/5/16 6:14:50

战网国际服加速器哪个好用 暴雪战网免费加速器分享

战网国际服&#xff08;Battle.net International或Battle.net Global&#xff09;是由暴雪娱乐公司&#xff08;Blizzard Entertainment&#xff09;运营的面向全球玩家的多人在线游戏平台。与专注于特定地区的版本不同&#xff0c;国际服允许玩家不受地域限制地访问暴雪的多款…...

编程日记 2024/5/16 6:11:47

Java入门基础学习笔记26——break，continue

跳转关键字&#xff1a; break&#xff1a; 跳出并结束当前所在循环的执行。 continue&#xff1a; 用于跳出当前循环中的当次执行&#xff0c;直接进入循环中的下一次执行。 package cn.ensource.loop;public class BreakContinueDemo8 {public static void main(String[] a…...

编程日记 2024/5/16 6:10:45

HNU-算法设计与分析-作业6

第六次作业【分支限界法】 文章目录 第六次作业【分支限界法】<1> 算法实现题6-2 最小权顶点覆盖问题<2> 算法实现题6-6 n后问题<3> 算法实现题6-7 布线问题 <1> 算法实现题6-2 最小权顶点覆盖问题 ▲问题重述 问题描述&#xff1a; 给定一个赋权无向…...

编程日记 2024/5/16 6:08:43

2D Chests Assets - Mega Pack

科幻/奇幻/经典主题的箱子和容器。AAA质量，高分辨率，VFX，源PSD文件。 这是一个带有手绘套装的大包装： -【梦幻之栗】 -【科幻钱包】 AAA质量。高分辨率。一切都已准备就绪，可供使用。包括PSD文件。 在1.1版本中添加了VFX并将项目更新为URP。请注意，新的VFX仅适用于URP/HD…...

编程日记 2024/5/16 6:07:42

一种基于电场连续性的高压MOSFET紧凑模型，用于精确表征电容特性

来源&#xff1a;A Compact Model of High-Voltage MOSFET Based on Electric Field Continuity for Accurate Characterization of Capacitance&#xff08;TED 24年&#xff09; 摘要 本文提出了一种新的高压MOSFET&#xff08;HV MOS&#xff09;紧凑模型&#xff0c;以消…...

编程日记 2024/5/16 6:05:39

vue阶段性测试题，内容丰富，案例典型，题目配有答案

阶段性测试 理论题实践题 1&#xff09;理论题 请简述Vue、Node.js、Vscode是什么&#xff0c;以及有什么关系 1. vue是一个轻量级、比较灵活的且支持组件开发的网络框架 2. node.js是让JavaScript运行在服务器上的一直环境 3. Vscode是一款有着丰富插件的代码编辑器 4. 关系…...

编程日记 2024/5/16 6:03:37

如何查看PC电脑已经已经连接上的网络WiFi密码？

运行ncpa.cpl...

编程日记 2024/5/16 6:02:36

Java 语言的特点分析及应用

Java语言自问世以来&#xff0c;因其独特的设计理念和广泛的应用领域&#xff0c;成为了编程语言中的一颗璀璨明星。以下是对Java语言特点的详细分析及其实际应用场景&#xff0c;希望能帮助面试者更好地理解和掌握Java的优势。 1. 简单易学 Java的语法简单&#xff0c;类似于…...

编程日记 2024/5/16 6:01:35

Golang | Leetcode Golang题解之第84题柱状图中最大的矩形

题目&#xff1a; 题解&#xff1a; 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…...

编程日记 2024/5/16 6:00:34

linux实用命令

一、常用命令 mkdir -p mkdir -p 命令用于在Unix和Linux系统中创建目录。其中&#xff0c;-p参数确保目录名称存在&#xff0c;如果目录不存在的就新创建一个。换句话说&#xff0c;-p参数允许创建一个目录和它不存在的父目录&#xff0c;确保了指定的整个目录路径都会被…...

编程日记 2024/5/16 5:59:33

创建和管理数据库

1. 一条数据的存储过程 存储数据是处理数据的第一步.只有正确的把数据存储起来&#xff0c;我们才能进行有效的处理和分析.否则&#xff0c;只能是一团乱麻.在MySQL中&#xff0c;一个完整的数据存储过程一共有四步 : 创建数据库&#xff0c;确认字段&#xff0c;创建数据表&a…...

编程日记 2024/5/16 5:58:31

Spring STOMP-发送消息

如果你想要从应用程序的任何地方向连接的客户端发送消息&#xff0c;要怎么做&#xff1f;任何应用程序组件都可以向brokerChannel发送消息。要这样做&#xff0c;最简单方法是注入一个SimpMessagingTemplate并使用它来发送消息。通常&#xff0c;你会按类型注入它&#xff0c;…...

编程日记 2024/5/16 5:56:29

kubernetes多master集群架构

一、完成master02节点的初始化操作 master02环境准备&#xff0c;详细过程参考上一期博客环境准备 #添加主机映射 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 节点上拷…...

编程日记 2024/5/16 5:55:27

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/6/17 12:57:30

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/7/8 11:34:15

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/7/9 10:15:39

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/7/8 5:37:23

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/6/21 22:37:01

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/7/9 4:17:05

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/7/7 13:13:31

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2025/7/7 5:56:10