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

梦想CAD二次开发

news 2026/2/7 16:26:02

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在线文档：

相关文章：

梦想CAD二次开发

1.mxdraw简介 mxdraw是一个HTML5 Canvas JavaScript框架&#xff0c;它在THREE.js的基础上扩展开发&#xff0c;为用户提供了一套在前端绘图更为方便&#xff0c;快捷&#xff0c;高效率的解决方案&#xff0c;mxdraw的实质为一个前端二维绘图平台。你可以使用mxdraw在画布上绘…...

编程日记 2024/6/29 18:52:18

Eureka的介绍与使用

Eureka 是 Netflix 开源的一款服务注册与发现组件&#xff0c;在微服务架构中扮演着重要的角色。 一、Eureka 的介绍 工作原理 服务注册&#xff1a;各个微服务在启动时&#xff0c;会向 Eureka Server 发送注册请求&#xff0c;将自身的服务名、实例名、IP 地址、端口等信息注…...

编程日记 2024/6/29 18:51:17

ChatGPT之母：AI自动化将取代人类，创意性工作或将消失

目录 01 AI取代创意性工作的担忧 1.1 CTO说了啥 02 AI已开始大范围取代人类 01 AI取代创意性工作的担忧 几天前的采访中&#xff0c;OpenAI的CTO直言&#xff0c;AI可能会扼杀一些本来不应该存在的创意性工作。 近来一篇报道更是印证了这一观点。国外科技媒体的老板Miller用…...

编程日记 2024/6/29 18:49:15

【深度学习驱动流体力学】湍流仿真到深度学习湍流预测

目录 一、湍流项目结构二、三个OpenFOAM湍流算例1. motorBike背景和目的文件结构和关键文件使用和应用湍流仿真深度学习湍流预测深度学习湍流预测的挑战和应用结合湍流仿真与深度学习2. pitzDaily背景和目的文件结构和关键文件使用和应用3. pitzDailyMapped背景和目的文件结构和…...

编程日记 2024/6/29 18:47:13

如何从0构建一款类似pytest的工具

Pytest主要模块 Pytest 是一个强大且灵活的测试框架&#xff0c;它通过一系列步骤来发现和运行测试。其核心工作原理包括以下几个方面&#xff1a;测试发现&#xff1a;Pytest 会遍历指定目录下的所有文件&#xff0c;找到以 test_ 开头或 _test.py 结尾的文件&#xff0c;并且…...

编程日记 2024/6/29 18:46:12

6.27-6.29 旧c语言

#include<stdio.h> struct stu {int num;float score;struct stu *next; }; void main() {struct stu a,b,c,*head;//静态链表a.num 1;a.score 10;b.num 2;b.score 20;c.num 3;c.score 30;head &a;a.next &b;b.next &c;do{printf("%d,%5.1f\n&…...

编程日记 2024/6/29 18:44:10

Unidbg调用-补环境V3-Hook

结合IDA和unidbg，可以在so的执行过程进行Hook，这样可以让我们了解并分析具体的执行步骤。 应用场景：基于unidbg调试执行步骤 或 还原算法（以Hookzz为例）。 1.大姨妈 1.1 0x1DA0 public void hook1() {...

编程日记 2024/6/29 18:43:08

从AICore到TensorCore：华为910B与NVIDIA A100全面分析

华为NPU 910B与NVIDIA GPU A100性能对比&#xff0c;从AICore到TensorCore&#xff0c;展现各自计算核心优势。 AI 2.0浪潮汹涌而来&#xff0c;若仍将其与区块链等量齐观&#xff0c;视作炒作泡沫&#xff0c;则将错失新时代的巨大机遇。现在&#xff0c;就是把握AI时代的关键…...

编程日记 2024/6/29 18:41:05

Edge 浏览器退出后，后台占用问题

Edge 浏览器退出后&#xff0c;后台占用问题 环境 windows 11 Microsoft Edge版本 126.0.2592.68 (正式版本) (64 位)详情 在关闭Edge软件后&#xff0c;查看后台&#xff0c;还占用很多系统资源。实在不明白&#xff0c;关了浏览器还不能全关了&#xff0c;微软也学流氓了。…...

编程日记 2024/6/29 18:40:04

实验八 T_SQL编程

题目 以电子商务系统数据库ecommerce为例 1、在ecommerce数据库&#xff0c;针对会员表member首先创建一个“呼和浩特地区”会员的视图view_hohhot&#xff0c;然后通过该视图查询来自“呼和浩特”地区的会员信息&#xff0c;用批处理命令语句将问题进行分割&#xff0c;并分…...

编程日记 2024/6/29 18:39:03

【爆肝34万字】从零开始学Python第2天： 判断语句【入门到放弃】

目录 前言判断语句True、False简单使用作用 比较运算符引入比较运算符的分类比较运算符的结果示例代码总结 逻辑运算符引入逻辑运算符的简单使用逻辑运算符与比较运算符一起使用特殊情况下的逻辑运算符 if 判断语句引入基本使用案例演示案例补充随堂练习 else 判断子句引入else…...

编程日记 2024/6/29 18:38:02

React 19 新特性集合

前言&#xff1a;https://juejin.cn/post/7337207433868197915 新 React 版本信息 伴随 React v19 Beta 的发布&#xff0c;React v18.3 也一并发布。 React v18.3相比最后一个 React v18 的版本 v18.2 &#xff0c;v18.3 添加了一些警告提示&#xff0c;便于尽早发现问题&a…...

编程日记 2024/6/29 18:37:01

耐高温水位传感器有哪些

耐高温水位传感器在现代液位检测技术中扮演着重要角色&#xff0c;特别适用于需要高温环境下稳定工作的应用场合。这类传感器的设计和材质选择对其性能和可靠性至关重要。 一种典型的耐高温水位传感器是FS-IR2016D&#xff0c;它采用了PPSU作为主要材质。PPSU具有优良的耐高温…...

编程日记 2024/6/29 18:36:00

Symfony国际化与本地化：打造多语言应用的秘诀

标题&#xff1a;Symfony国际化与本地化&#xff1a;打造多语言应用的秘诀 摘要 Symfony是一个高度灵活的PHP框架&#xff0c;用于创建Web应用程序。它提供了强大的国际化&#xff08;i18n&#xff09;和本地化&#xff08;l10n&#xff09;功能&#xff0c;允许开发者轻松创…...

编程日记 2024/6/29 18:34:59

ApolloClient GraphQL 与 ReactNative

要在 React Native 应用程序中设置使用 GraphQL 的简单示例&#xff0c;您需要遵循以下步骤&#xff1a; 设置一个 React Native 项目。安装 GraphQL 必要的依赖项。创建一个基本的 GraphQL 服务器&#xff08;或使用公共 GraphQL 端点&#xff09;。从 React Native 应用中的…...

编程日记 2024/6/29 18:33:57

【贡献法】2262. 字符串的总引力

本文涉及知识点 贡献法 LeetCode2262. 字符串的总引力 字符串的 引力 定义为&#xff1a;字符串中 不同 字符的数量。 例如&#xff0c;“abbca” 的引力为 3 &#xff0c;因为其中有 3 个不同字符 ‘a’、‘b’ 和 ‘c’ 。 给你一个字符串 s &#xff0c;返回 其所有子字符…...

编程日记 2024/6/29 18:30:53

C#基于SkiaSharp实现印章管理（3）

本系列第一篇文章中创建的基本框架限定了印章形状为矩形&#xff0c;但常用的印章有方形、圆形等多种形状&#xff0c;本文调整程序以支持定义并显示矩形、圆角矩形、圆形、椭圆等4种形式的印章背景形状。   定义印章背景形状枚举类型&#xff0c;矩形、圆形、椭圆相关的尺寸…...

编程日记 2024/6/29 18:29:52

如何理解泛型的编译期检查

既然说类型变量会在编译的时候擦除掉&#xff0c;那为什么我们往 ArrayList 创建的对象中添加整数会报错呢&#xff1f;不是说泛型变量String会在编译的时候变为Object类型吗&#xff1f;为什么不能存别的类型呢&#xff1f;既然类型擦除了&#xff0c;如何保证我们只能使用泛型…...

编程日记 2024/6/29 18:28:51

计算机组成原理：海明校验

在上图中&#xff0c;对绿色的7比特数据进行海明校验&#xff0c;需要添加紫色的4比特校验位&#xff0c;总共是蓝色的11比特。紫色的校验位pi分布于蓝色的hi的1, 2, 4, 8, 16, 32, 64位&#xff0c;是2i-1位。绿色的数据位bi分布于剩下的位。 在下图中&#xff0c;b1位于h3&a…...

编程日记 2024/6/29 18:27:50

信息学奥赛初赛天天练-39-CSP-J2021基础题-哈夫曼树、哈夫曼编码、贪心算法、满二叉树、完全二叉树、前中后缀表达式转换

PDF文档公众号回复关键字:20240629 2022 CSP-J 选择题 单项选择题&#xff08;共15题&#xff0c;每题2分&#xff0c;共计30分&#xff1a;每题有且仅有一个正确选项&#xff09; 5.对于入栈顺序为a,b,c,d,e的序列&#xff0c;下列( )不合法的出栈序列 A. a&#xff0c;b&a…...

编程日记 2024/6/29 18:26:49

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/31 11:58:35

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/2/6 1:04:23

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28