梦想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.rhkb.cn/news/364003.html

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

相关文章

50-2 内网信息收集 - 内网工作环境(域相关知识)

一、工作组 工作组(Work Group)是局域网中最基本的资源管理模式,适用于小规模网络环境。 工作组的定义: 工作组是将不同功能或部门的计算机分组管理的方式。它提供了层次化的网络资源管理,使得组织内的计算机可以按照功能或部门分类。每个工作组有一个自定义的主机名称,…

Java访问修饰符的区别

public&#xff1a;公开的&#xff0c;任何地方都可以访问。 protected&#xff1a;受保护的&#xff0c;同一个包中的类和所有子类(可跨包)可以访问。 private&#xff1a;私有的&#xff0c;只有在同一个类中可以访问。 默认&#xff08;无修饰符&#xff09;&#xff1a;包级…

零基础STM32单片机编程入门(四)ADC详解及实战含源码视频

文章目录 一.概要二.STM32F103C8T6单片机ADC外设特点三.STM32单片机ADC内部结构图1.ADC相关引脚说明2.ADC通道分类3.触发源4.转换周期5.电压转换计算6.更精确电压转换计算 四.规则通道ADC采集信号流向1.单次转换模式2.连续转换模式 五.CubeMX配置一个ADC采集例程六.CubeMX工程源…

AI基础:从线性回归到梯度下降

一个简单的问题&#xff1a; 如果此时你正站在迷路缭绕的山坡上&#xff0c;能见度不高&#xff0c;但是你又想去往最低的山谷的位置&#xff0c;怎么走&#xff1f; 很简单&#xff0c;哪里陡那就往那里走呗——而这就是梯度下降算法的思想。 古话说&#xff1a;“先发制于人…

mindspore打卡第9天 transformer的encoder和decoder部分

mindspore打卡第9天 transformer的encoder和decoder部分 import mindspore from mindspore import nn from mindspore import ops from mindspore import Tensor from mindspore import dtype as mstypeclass ScaledDotProductAttention(nn.Cell):def __init__(self, dropout_…

计算机毕业设计hadoop+spark+hive知识图谱酒店推荐系统 酒店数据分析可视化大屏 酒店爬虫 高德地图API 酒店预测系统 大数据毕业设计

酒店推荐系统开题报告 一、研究背景与意义 随着旅游业的蓬勃发展和人们生活水平的提高&#xff0c;酒店行业迎来了前所未有的发展机遇。然而&#xff0c;面对众多的酒店选择&#xff0c;消费者往往难以在短时间内找到最适合自己需求和预算的酒店。因此&#xff0c;开发一款高…

推荐一款免费的GIF编辑器——【ScreenToGif编辑器】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️木道寻的主页 文章目录 &#x1f525;前言&#x1f680;素材准备&#x1f680;逐帧制作&#x1f680;保存图片⭐️⭐️⭐️总结 &#…

LangGPT:高质量提示词框架

题目&#xff1a;LangGPT: Rethinking Structured Reusable Prompt Design Framework for LLMs from the Programming Language作者: Ming Wang; Yuanzhong Liu; Xiaoming Zhang; Songlian Li; Yijie Huang; Chi Zhang; Daling Wang; Shi Feng; Jigang LiDOI: 10.48550/arXiv.2…

【排序算法】—— 希尔排序

目录 一、希尔排序原理 二、希尔排序的思路 三、希尔排序为什么快 四、如何取增量 五、源码 希尔排序是简单插入排序的一种升级版&#xff0c;它也是用了插入的思想&#xff0c;而插入排序相比冒泡排序和选择排序的效率要高的多&#xff0c;再将它优化为希尔排序后效率跟原…

【C++11(二)】lambda表达式和可变参数模板

一、可变参数模板 C11的新特性可变参数模板 能够让您创建可以接受 可变参数的函数模板和类模板 // Args是一个模板参数包&#xff0c;args是一个函数形参参数包 // 声明一个参数包Args...args&#xff0c;这个参数包中可以包含0到任意个模板参数。 template <class ...Arg…

智慧记账,轻松管理,让借还款明细一目了然,一键导出

在繁忙的生活中&#xff0c;财务记账管理往往成为我们的一大难题。尤其是面对频繁的借还款项&#xff0c;如何快速、准确地记录每一笔收支明细&#xff0c;并确保数据的清晰、完整&#xff0c;成为许多人关注的焦点。现在&#xff0c;我们为您带来一款全新的记账管理工具——晨…

【第三方JSON库】org.json.simple用法初探—Java编程【Eclipse平台】【不使用项目管理工具】【不添加依赖解析】

本文将重点介绍&#xff0c;在不使用项目管理工具&#xff0c;不添加依赖解析情况下&#xff0c;【第三方库】JSON.simple库在Java编程的应用。 JSON.simple是一种由纯java开发的开源JSON库&#xff0c;包含在JSON.simple.jar中。它提供了一种简单的方式来处理JSON数据和以JSO…

有趣的仿神经猫html5圈小猫游戏源码

有趣的仿神经猫html5圈小猫游戏源码,点击小圆点&#xff0c;围住小猫游戏。猫已经跑到地图边缘&#xff0c;你输了。内含json数据&#xff0c;部署到服务器方可运行 微信扫码免费获取源码

Kafka 位移

Consumer位移管理机制 将Consumer的位移数据作为一条条普通的Kafka消息&#xff0c;提交到__consumer_offsets中。可以这么说&#xff0c;__consumer_offsets的主要作用是保存Kafka消费者的位移信息。使用Kafka主题来保存位移。 消息格式 位移主题就是普通的Kafka主题。也是…

Type-C接口OTG转接器的应用与发展

随着科技的飞速发展&#xff0c;智能移动设备已成为我们生活中不可或缺的一部分。而在这些设备的连接与数据传输中&#xff0c;Type-C接口以其高效、便捷的特性逐渐占据了主导地位。OTG&#xff08;On-The-Go&#xff09;技术则进一步扩展了Type-C接口的功能&#xff0c;使得设…

JavaSE主要内容(全套超完整)

一、为什么选择Java&#xff08;Java的优势&#xff09; 1、应用面广&#xff1a; 相较于其他语言&#xff0c;Java的应用面可谓是非常广&#xff0c;这得益于他的跨平台性和其性能的稳定性。他在服务器后端&#xff0c;Android应用开发&#xff0c;大数据开发&#xf…

鼠尾草(洋苏草)

鼠尾草&#xff08;Salvia japonica Thunb.&#xff09;&#xff0c;又名洋苏草、普通鼠尾草、庭院鼠尾草&#xff0c;属于唇形科鼠尾草属多年生草本植物。鼠尾草以其独特的蓝紫色花序和长而细密的叶片为特点&#xff0c;常用于花坛、庭院和药用植物栽培。 鼠尾草的名字源自于…

25考研:今年初试时间比去年更早了?

过去5年考研初试时间安排如下&#xff1a; 24考研&#xff1a;2023年12月23-24日&#xff08;倒数第二个周末&#xff09; 23考研&#xff1a;2022年12月24-25日&#xff08;倒数第二个周末&#xff09; 22考研&#xff1a;2021年12月25-26日&#xff08;最后一个周末&#xf…

Al+医学,用这个中文多模态医学大模型帮你看胸片

随着人工智能技术的飞速发展&#xff0c;AI 在医学领域的应用已经成为现实。特别是在医学影像诊断方面&#xff0c;AI 大模型技术展现出了巨大的潜力和价值&#xff0c;但目前针对中文领域医学大多模态大模型还较少。 今天马建仓为大家介绍的这款 XrayGLM&#xff0c;就是由澳…

浅谈安科瑞ACRELCLOUD-1200光伏发电系统在建筑节能中的应用

摘要&#xff1a;21世纪以来&#xff0c;随着不可再生能源的逐渐减少&#xff0c;人们越来越重视能源的利用率&#xff0c;不断开发绿色能源。通过光伏发电系统&#xff0c;能够提升能源利用率&#xff0c;减少不可再生能源的开发。同时&#xff0c;也能加强我国建筑节能系统的…