梦想CAD二次开发

1.mxdraw简介
mxdraw是一个HTML5 Canvas JavaScript框架,它在THREE.js的基础上扩展开发,为用户提供了一套在前端绘图更为方便,快捷,高效率的解决方案,mxdraw的实质为一个前端二维绘图平台。你可以使用mxdraw在画布上绘制图形,给图形添加事件,移动、缩放和旋转图形等。

2.快速使用
安装mxdraw
使用包管理器(未避免影响后续使用,建议始终安装最新版的mxdraw库)
npm install mxdraw@latest

也可使用< script >标签引入

<script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js"></script>

3.基础使用:
mxdraw.js依赖canvas标签打开画布,但由于canvas会根据父元素的宽高来自动调整大小,为保证绘制不失真需要固定canvas父级的宽高,且在父元素上设置属性overflow:hidden。在页面中创建好画布后,可根据自身需求执行不同的绘制函数,创建画布的示例代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mxdraw基础使用示例</title><script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js"></script>
</head>
<script type="module">Mx.loadCoreCode().then(() => {// 创建控件对象Mx.MxFun.createMxObject({canvasId: "mxdraw", // canvas元素的idcallback: (mxobj, dom) => {//图纸展示控件创建完成后的回调函数 回调参数mxDraw和domconsole.log(mxobj, dom);mxobj.on("openFileComplete", (iRet) => {// 绘制直线let line = new Mx.MxDbLine();line.pt1 = new THREE.Vector3(0, 0, 0);line.pt2 = new THREE.Vector3(100, 100, 0);mxobj.addMxEntity(line);// 绘制圆let circle = new Mx.MxDbCircleShape()circle.center = new THREE.Vector3(50, 50, 0)circle.xRadius = circle.yRadius = 20circle.isClosedToCenter = falsemxobj.addMxEntity(circle)// 绘制文本let text = new Mx.MxDbText()text.position = new THREE.Vector3(50, 50, 0)text.height = Mx.MxFun.screenCoordLong2Doc(50)text.text = '测试文本'mxobj.addMxEntity(text)mxobj.zoomW(line.pt1, line.pt2);});},});})
</script><body><div style="height: 80vh; overflow: hidden;"><canvas id="mxdraw"></canvas></div>
</body></html>

4.下载云图开发包

下载地址(https://www.mxdraw.com/download.html)

下载完后进行解压:启动服务

启动MxCAD如下图,演示效果

在这里插入图片描述

5.找到目标项目文件夹

  • dist:MxCAD APP 在线打包后的前端资源

  • MxCAD: MxCAD APP 插件的二次开发项目(用户可在该基础上开发功能)

  • MxCADiframe: 通过 iframe 嵌入 MxCAD APP 的示例 demo

在这里插入图片描述

6.MxCAD APP 插件的二次开发项目

  • 进入 MxCAD 目录, 运行npm install安装依赖
  • 调用npm run dev命令运行 MxCAD APP在线CAD

在这里插入图片描述

7.配置说明
Mxcad App 项目文件夹下的 dist 目录是打包后的前端资源,我们可以通过修改该目录下的 mxUiConfig.json 配置文件修改项目UI设置

如下图,调用cmd命令可进行功能操作
在这里插入图片描述
打开文件命令: “cmd”: “OpenDwg”,
另存为mxweb文件命令:“cmd”: “Mx_SaveAs”
绘制圆弧命令: “cmd”: “Mx_Arc”,
等等。

8.具体相关api属性可参考mxCAD在线文档:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/37200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Token管理用户session

起因&#xff1a;单点登录问题&#xff0c;登录时访问的是tomcat1&#xff0c;访问获取用户数据时访问的是tomcat2&#xff0c;而用户的session信息在tomcat1上存储&#xff0c;tomcat2并不知道该用户来过&#xff0c;所以在获取个人信息时从session中获取不到数据&#xff0c;…

Django 日志配置解析

在 Django 中设置和使用日志是一个有效的方式来监控和调试应用程序。日志可以帮助你理解应用的运行状态&#xff0c;记录错误信息&#xff0c;以及跟踪重要的系统事件。Django 使用 Python 的标准 logging 模块来配置和管理日志。 目录 配置日志写日志日志中间件日志配置与日志…

复盘|接口自动化测试框架建设的经验与教训

为什么选择这个话题&#xff1f; 一是发现很多“点工”在转型迷茫期都会问一些自动化测试相关的问题&#xff0c;可以说自动化测试是“点工”升级的必经之路&#xff1b;二是Google一下接口自动化测试&#xff0c;你会发现很多自动化测试框架相关的文章&#xff0c;但是大部分…

VBA 批量变换文件名

1. 页面布局 在“main”Sheet中按照下面的格式编辑。 2. 实现代码 Private wsMain As Worksheet Private intIdx As LongPrivate Sub getExcelBookList(strPath As String)Dim fso As ObjectDim objFile As ObjectDim objFolder As ObjectSet fso CreateObject("Script…

CAN和CANFD数据写入.asc文件的dll

因为工作需要&#xff0c;需要做一些硬件不是CANoe的上位机&#xff08;比如说周立功CAN,NI-CAN&#xff09;&#xff0c;上位机需要有记录数据的功能&#xff0c;所以用Qt制作了一个记录数据的dll&#xff0c;方便重复使用&#xff08;因为有的客户指定了编程软件&#xff0c;…

Android高级面试_12_项目经验梳理

Android 高级面试-1&#xff1a;Handler 相关 问题&#xff1a;Handler 实现机制&#xff08;很多细节需要关注&#xff1a;如线程如何建立和退出消息循环等等&#xff09; 问题&#xff1a;关于 Handler&#xff0c;在任何地方 new Handler 都是什么线程下? 问题&#xff1a…

Redis主从复制、哨兵以及Cluster集群

1.Redis高可用 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;除了保证提供…

加密教程:pdf怎么加密?7个pdf加密技巧任你选(图文详解)

pdf作为一种便携式文档&#xff0c;是展示内容的首选格式&#xff0c;目前也已广泛应用于交换和分享重要等温&#xff0c;例如内部报告、人力资源文件&#xff0c;以及商业提案等包含敏感信息的文档。然而&#xff0c;在如今的数字化时代&#xff0c;随着越来越多的企业将其文档…

划分子网、子网掩码、地址范围、网络地址和广播地址。

一公司原来使用 192.168.1.0/24 这个标准网络&#xff0c;现在想为公司的每个部门(共六个)单独配置一个子网&#xff0c;其中最大的部门要分配 IPv4 地址的数量不超过 25 个。求每个子网的子网掩码、地址范围、网络地址和广播地址。 因为2&#xff0c;4&#xff0c;8所以划分为…

el-date-picker设置时间范围

下面这种写法会报错&#xff1a;找不到expirationDate&#xff0c;这是因为涉及到this的指向问题 在普通函数中&#xff0c;this 的上下文并不指向 Vue 组件实例&#xff0c;而是取决于函数的调用方式或者是否使用了严格模式 <el-date-pickerclass"date-icon-common&q…

capitalize()方法——字符串首字母转换为大写

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 capitalize()方法用于将字符串的首字母转换为大写&#xff0c;其他字母为小写&#xff0c;例如图1所示的效果。 图1 字符串首字母大写效果…

代码随想录算法训练营第五十二天-复习|LeetCode704 二分查找、LeetCode35 搜索插入位置、LeetCode27 移除元素

题1&#xff1a; 指路&#xff1a;704. 二分查找 - 力扣&#xff08;LeetCode&#xff09; 代码&#xff1a; class Solution { public:int search(vector<int>& nums, int target) {int left 0; int right nums.size() - 1;while (left < right) {int middl…

动手实现一个可发送短信随机密码的高安全性用户密码系统

动手实现一个可发送短信随机密码的高安全性用户密码系统 1、背景2、设计3、代码实现3.1、首先先看一下ThreadSpecificSecureRandom组件代码实现,如图所示3.2、调用nextInt的UserPasswordSystemManager组件的代码实现3.3、UserPasswordSystemManager组件所提供的方法,请看下图…

智慧数据中心可视化:高效管理与直观监控的未来

随着数据中心的规模和复杂性不断增加&#xff0c;传统管理方式难以满足需求。智慧数据中心通过图扑可视化实现实时数据监控和智能分析&#xff0c;将复杂的基础设施直观呈现&#xff0c;极大提升了运维效率、故障排查速度和资源优化能力&#xff0c;为企业提供现代化、智能化的…

Android使用WorkManager实现循环定时通知

引入包 def work_version “2.9.0” // (Java only) implementation “androidx.work:work-runtime:$work_version” // Kotlin coroutines implementation "androidx.work:work-runtime-ktx:$work_version"// optional - RxJava2 support implementation "a…

农业新质生产力数据(2012-2022年)原始+dofile+测算数据集

数据简介&#xff1a;农业新质生产力是指在现代农业发展中&#xff0c;通过融合尖端科技、信息技术与创新管理模式&#xff0c;实现农业生产效率飞跃、产品质量显著提升及生产可持续性增强的一种革新性生产能力&#xff0c;农业新质生产力代表了从依赖传统资源转向依靠科技创新…

一加Ace3 刷机救砖简化说明

注意&#xff1a;工具使用英文目录&#xff0c;支持救砖和降级。PJE110国行版&#xff0c;CPH2609国际版。目前国行版不能完美转换国际版&#xff0c;每次升级都需要刷oplusstanvbk&#xff0c;不建议使用。跨国转换或ROOT一定先解锁Bootloader&#xff0c;可以使用“一加全能工…

【java 执行 postgresql sql 结果不一致】

java 执行 postgresql sql 结果不一致 问题描述&#xff1a;pk_deptdoc&#xff0c;deptname 这两个字段只显示第一个字符。解决方案&#xff1a;是因为用到了UNION ALL&#xff0c;为了两边查询结果一致&#xff0c;我们一般会定一个空值&#xff0c;却没有定义数据类型&#…

Linux免交互

免交互 交互&#xff1a;我们发出指令控制程序的运行&#xff0c;程序在接受到指令之后按照指令的效果做出对应的反应 免交互&#xff1a;间接的通过第三方的方式把指令传送给指定的程序&#xff0c;不用直接的下达指令 Here Document 免交互&#xff1a; 这是命令行格式&…

国外Essay写作需要哪些明确规划?

Essay是一项有挑战性的任务&#xff0c;因此需要一个明确的写作规划&#xff0c;以确保您的Essay有逻辑性、准确性和连贯性。以下是一些不同寻常的写作规划的建议&#xff0c;以帮助您编写一篇成功的Essay。 创意闪光&#xff1a; 一个好的Essay写作规划应该让您的创意闪光。…