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

前端之电力系统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图低代码

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

括号生成[中等]

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

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

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 函数对灰度图像进行边缘检测。让我解释一下&#xff1a; cvCanny(gray, dst, 10, 100, 3);gray: 这是输入的灰度图像&#xff0c;即要进行边缘检测的图像。dst: 这是输出的边缘图像&#xff0c;即将结…...

拓宽知识储备量(指数级成长)

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

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

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

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

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

跳转关键字&#xff1a; break&#xff1a; 跳出并结束当前所在循环的执行。 continue&#xff1a; 用于跳出当前循环中的当次执行&#xff0c;直接进入循环中的下一次执行。 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 最小权顶点覆盖问题 ▲问题重述 问题描述&#xff1a; 给定一个赋权无向…...

2D Chests Assets - Mega Pack

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

一种基于电场连续性的高压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;以消…...

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

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

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

运行ncpa.cpl...

Java 语言的特点分析及应用

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

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

linux实用命令

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

创建和管理数据库

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

Spring STOMP-发送消息

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

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 节点上拷…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...