VUE使用DXFParser组件解析dxf文件生成图片
<template><div><input type="file" @change="handleFileChange" /></div><el-table :data="tableData" style="width: 100%"><el-table-column prop="Control_No" label="序号" width="180" /><el-table-column prop="Index" label="编号" width="180" /><el-table-column prop="ID" label="ID" width="180" /><el-table-column prop="BH" label="编号" width="180" /><el-table-column prop="Piece_Name" label="部位名称" width="180" /><el-table-column prop="data" label="日期" />'<el-table-column label="精品图片"><template v-slot="scope"><!-- 在这里访问tableData.vertices中的数据 --><div id="imageContainer"><!-- 使用scope.row来获取当前行的数据 --><img :src="generateCanvasImage(scope.row.vertices)" alt="精品图片" /></div></template></el-table-column></el-table>
</template><script>
import DXFParser from 'dxf-parser';export default {data() {return {tableData: [],}},methods: {handleFileChange(event) {const file = event.target.files[0];const reader = new FileReader();reader.onload = (e) => {const contents = e.target.result;// const decoder = new TextDecoder('utf-8');// const decodedContents = decoder.decode(contents);const parser = new DXFParser();const dxf = parser.parseSync(contents);// 处理解析后的DXF数据this.processDXF(dxf);// console.log(this.processDXF(dxf))};reader.readAsText(file);// reader.readAsArrayBuffer(file)},processDXF(dxf) {// 在这里处理解析后的DXF数据console.log(dxf);this.tableData.splice(0, this.tableData.length);// 示例:绘制一些图形到canvas上console.log(dxf.blocks)// dxf.blocks.forEach((e)=>{// console.log(e)// })var Control_No = 1;for (var key in dxf.blocks) {if ('entities' in dxf.blocks[key]) {// console.log(dxf.blocks[key].entities[0].type)for (var i in dxf.blocks[key].entities) {if ("TEXT" === dxf.blocks[key].entities[i].type) {var ver = [];for (var w = 4; w < dxf.blocks[key].entities.length; w++) {if (dxf.blocks[key].entities[w].vertices) {dxf.blocks[key].entities[w].vertices[0].new = truever = ver.concat(dxf.blocks[key].entities[w].vertices);}}console.log(ver.concat(dxf.blocks[key].entities[5].vertices))var newItem = {Control_No: Control_No++,Index: key,ID: dxf.blocks[key].entities[0].text,BH: dxf.blocks[key].entities[1].text,Piece_Name: dxf.blocks[key].entities[2].text,vertices: ver,data: dxf.blocks[key].entities[3].text};this.tableData.push(newItem); // 将新对象添加到tableData数组中break;}}}}},generateCanvasImage(vertices) {// 获取Canvas元素var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");// 设置多边形的颜色var color = "#FF0000"; // 十六进制颜色值,例如 16711680 对应的颜色为红色// 顶点坐标列表// 计算图形的包围框var minX = Number.MAX_VALUE;var minY = Number.MAX_VALUE;var maxX = Number.MIN_VALUE;var maxY = Number.MIN_VALUE;for (var i = 0; i < vertices.length; i++) {var vertex = vertices[i];minX = Math.min(minX, vertex.x);minY = Math.min(minY, vertex.y);maxX = Math.max(maxX, vertex.x);maxY = Math.max(maxY, vertex.y);}// 计算缩放因子var width = maxX - minX;var height = maxY - minY;var scale = Math.min(canvas.width / width, canvas.height / height);// 绘制多边形ctx.beginPath();ctx.strokeStyle = color; // 设置描边颜色ctx.lineWidth = 1; // 设置线宽// 移动到第一个顶点ctx.moveTo((vertices[0].x - minX) * scale, (vertices[0].y - minY) * scale);// 依次连接顶点for (var e = 1; e < vertices.length; e++) {if (vertices[e].new === true) {console.log("true");// 如果条件成立,移动到当前顶点位置,不连接上一次的顶点ctx.moveTo((vertices[e].x - minX) * scale, (vertices[e].y - minY) * scale);} else {// 否则继续连接顶点ctx.lineTo((vertices[e].x - minX) * scale, (vertices[e].y - minY) * scale);}}// 关闭多边形路径ctx.closePath();// 绘制多边形ctx.stroke();// 将Canvas内容转换为图片路径var imgDataURL = canvas.toDataURL("image/png");// 在HTML页面上显示图片var imgElement = document.createElement("img");imgElement.src = imgDataURL;return imgElement.src// 将图片元素添加到页面中的图片容器// var container = document.getElementById("imageContainer");// container.appendChild(imgElement);}}
}
</script>

大致效果图如果大家有疑问欢迎评论我将在更新问题解析!
相关文章:
VUE使用DXFParser组件解析dxf文件生成图片
<template><div><input type"file" change"handleFileChange" /></div><el-table :data"tableData" style"width: 100%"><el-table-column prop"Control_No" label"序号" width…...
SpringBoot 集成 AKKA
文章目录 应用场景与 SpringBoot 集成示例 应用场景 AKKA 是一个用于构建高并发、分布式和容错应用程序的开源框架。它基于Actor模型,提供了强大的并发抽象和工具,适用于各种业务场景。以下是一些使用AKKA框架的常见业务场景的示例: 实时数据…...
什么是Service Worker?它在PWA中的作用是什么?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Service Worker的作用是什么?⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前…...
【算法深入浅出】字符串匹配之 KMP 算法
KMP 算法是一种字符串匹配算法。字符串匹配算法的目标是:在字符串 s 中找到与模式串 p 相等的子串,输出其位置。例如:s “abcdef”,p “cdef”,p 在 s 中的位置是 2(从 0 开始计数)。 容易想到…...
放弃webstrom转战vscode
本来是webstrom的忠实用户,无奈webstrom要么需要在网上找一个破解版或者不断的去找激活码,且破解版和激活码的文章总是很多,但是要找到真正有效的却总是要花费不少功夫。终于忍无可忍,转战vscode。(注:文中…...
VSCode 和 CLion
文章目录 一、VSCode1、文档2、插件3、智能编写4、VSCode 与 C(1)安装(2)调试(a)使用 CMake 进行跨平台编译与调试(b)launch.json(c)传参 (3&…...
Learn Prompt- Midjourney Prompt:Prompt 提示语
基础结构 一个基本的提示可以简单到一个单词、短语或表情符号。非常短的提示将在很大程度上依赖于 Midjourney 的默认样式。 完整 prompt:可以包括一个或多个图像链接、多个文本短语或单词,以及一个或多个后缀参数 Image Prompts: 可以将图像 URL 添加…...
uvm白皮书练习_ch2_ch223_加入objection机制
UVM中通过objection机制来控制验证平台的关闭。 在每个phase中,UVM会检查是否有objection被提起(raise_ objection),如果有,那么等待这个objection被撤销(drop_objection)后停止仿真;…...
利用C++开发一个迷你的英文单词录入和测试小程序-增强功能
小玩具基本完成之后,在日常工作中,记录一些单词,然后定时再复习下,还真的有那么一点点用(毕竟自己做的小玩具)。 在使用过程中,遇到不认识的单词,总去翻译软件翻译,然后…...
kibana启动报错
1.响应 超过时间30000ms (1) docker rm elasticsearch #从docker中删除es docker rm kibana #从docker中删除kibana (2)重新安装启动es加大最大运行内存 :1024M docker run --name elasticsearch -p 9200:9200 -p 9300:9300 \ -e "discovery.typesingle-node" \ -…...
排查内存泄露
1 通过Performance确认是否存在内存泄露 一个存在内存泄露的 DEMO 代码: App.vue <template><div><button click"myFn" style"width: 200px; height: 200px;"></button><home v-if"ishow"></hom…...
【LeetCode-简单题】501. 二叉搜索树中的众数
文章目录 题目方法一:暴力哈希方法二:利用二叉搜索树的特性(递归双指针) 题目 方法一:暴力哈希 这是针对于普通二叉树的解法 统计number出现次数 然后将次数最大的众数集 取出来 Map<Integer , Integer > map …...
MAC word 如何并列排列两张图片
系统:MAC os 参考博客 https://baijiahao.baidu.com/s?id1700824516945958911&wfrspider&forpc 步骤1 新建一个word文档和表格 修改表格属性 去掉自动重调尺寸以适应内容 插入图片 在表格的位置插入对应的图片如下 去除边框 最终结果如下...
PTA第三章作业题
文章目录 前言7-1 比较大小Ⅰ. 方法一 :直接判断法Ⅱ. 方法二:交换法 7-2 比较两个数的大小Ⅰ. 方法 :直接判断法 7-3 成绩等级Ⅰ. 方法 :直接判断法 7-4 打鱼晒网Ⅰ. 方法 :直接判断法 7-5 计算奖金Ⅰ. 方法 …...
vscode vue html 快捷键
css文件 选择多行 按下ctrl不放 按下鼠标滚轮不放(鼠标中键) 鼠标向下移动 同时修改多个相同的字符串 <style> .base-goods-item li {width: 304px;height: 404px;background-color: #eef9f4; } .base-goods-item li {display: block; } .base-…...
mysql锁相关的总结
1、参考文章 MySQL 主键索引在 RR 和 RC 隔离级别下的加锁情况总结_51CTO博客_mysql二级索引加锁 2、 show OPEN TABLES where In_use > 0; -- 类似rc的需求 show variables like innodb_locks_unsafe_for_binlog; SELECT * FROM INFORMATION_SCHEMA.INNODB_TRX; -- …...
计算机竞赛 深度学习乳腺癌分类
文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度,召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…...
docker-compose搭建的mysql,如何定时备份数据
一、前言 使用docker-compose搭建的mysql中自带了mysqldump,所以在服务器上如何使用容器中的mysqldump命令是实现备份的原理,下面是主要实现的命令 docker exec -it mysql mysqldump -u root -p$mysql_password $database_name > $backup_file二、备…...
webpack:关于处理html文件的插件html-webpack-plugin、add-asset-html-webpack-plugin
简介 add-asset-html-webpack-plugin 将 JavaScript或CSS文件添加到由html-webpack-plugin插件生成的HTML中去。 html-webpack-plugin 默认配置会在出口目录中(通过output.path选项配置)生成一个index.html文件; 生成的index.html文件将会…...
如何两个不同的脚本文件之间传递参数
两个不同的Shell脚本之间如何访问传递的参数取决于它们是如何调用的。如果一个Shell脚本1调用另一个Shell脚本2并且想要将参数传递给被调用的脚本2,可以使用以下方法: 方法1:通过位置参数传递参数 这是一种常见的方法,其中一个脚…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
消防一体化安全管控平台:构建消防“一张图”和APP统一管理
在城市的某个角落,一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延,滚滚浓烟弥漫开来,周围群众的生命财产安全受到严重威胁。就在这千钧一发之际,消防救援队伍迅速行动,而豪越科技消防一体化安全管控平台构建的消防“…...
验证redis数据结构
一、功能验证 1.验证redis的数据结构(如字符串、列表、哈希、集合、有序集合等)是否按照预期工作。 2、常见的数据结构验证方法: ①字符串(string) 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...
基于Python的气象数据分析及可视化研究
目录 一.🦁前言二.🦁开源代码与组件使用情况说明三.🦁核心功能1. ✅算法设计2. ✅PyEcharts库3. ✅Flask框架4. ✅爬虫5. ✅部署项目 四.🦁演示效果1. 管理员模块1.1 用户管理 2. 用户模块2.1 登录系统2.2 查看实时数据2.3 查看天…...
