HarmonyOS鸿蒙Next中在线前端mxdraw和mxcad库预览编辑图纸
HarmonyOS鸿蒙Next中在线前端mxdraw和mxcad库预览编辑图纸
mxdraw 前端库预览图纸
在线CAD测试:https://demo.mxdraw3d.com:3000/mxcad/
mxdraw 的作用就是预览图纸,也可以绘制一些批注或者其他图形,首先进行安装,如果你没有前端工程化的基础,请先看mxdraw基础知识。mxdraw有详细的文档,建议点击mxdraw文档查看使用说明,然后我们讲一下转换后的图纸用mxdraw库显示的步骤:
1)新建工程
这里我们就用vite来创建一个前端工程化的项目
先创建一个目录vite-mxdraw 然后进入命令行输入以下命令:
# 初始化项目
npm init -y
# 创建vite 项目
npm create vite@latest
# 安装mxdraw库
npm install mxdraw
更多关于创建vite项目的说明,请参考:vite指南
2)使用mxdraw
在vite创建的项目中你选择了其中一种框架,而mxdraw它是不依赖于任何框架的,所以我们只需要在canvas元素创建完成后就可以直接使用mxdraw提供的方法,在页面中直接显示转换后的图纸文件。
如果你不知道mxdraw转换的图纸文件是什么,或怎么转换的,可以先看mxdraw转换说明
一般情况下我们不要只使用一个canvas元素,而是定义一个父级元素,并且这个父级的高度一定需要是固定的(不能使用百分比单位),宽度也必须有(可以是百分比单位),像下面这样:
<div style="width: 100%;height: 90vh">
<canvas id="myCanvas"></canvas>
</div>
然后我们可以在js/ts文件(根据前端框架的不同写的位置也不一样,但是只要canvas元素创建挂载,那么就可以使用下面的代码),输入如下代码:
import { MxFun } from "mxdraw"
MxFun.createMxObject({
canvasId: "myCanvas", // canvas元素的id
cadFile: "./demo/buf/$hhhh.dwg",
useWebsocket: false,
});
这里cadFile 对应的就算转换后的文件缩写,它会自动去请求转换后对应的多个文件,详细的入门文档请参考:mxdraw快速开始文档
mxcad 在线编辑图纸
如果只是在网页中显示、批注图纸,mxdraw就足够了,如果需要直接修改源图纸,就必须用到mxcad这个库,mxcad依赖mxdraw库,为mxdraw库赋予了编辑图纸的能力。
要使用mxcad,同样需要先有转换后的图纸文件,但这个文件和mxdraw显示的转换后的图纸文件是不一样的,下文只是简单尝试使用mxcad,如果你希望更多的使用它,建议你直接查看mxcad文档。
1)先初始化项目和创建vite项目
与使用mxdraw是一样,建议使用vite作为打包工具,如果使用其他打包工具或者不使用打包工具请直接查看mxcad文档,mxcad是基于WebAssembly的,我们需要找到vite.config.ts文件如果没有就在根目录创建一个,输入如下代码:
import { defineConfig } from "vite"
export default defineConfig({
server: {
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
}
}
})
服务器配置了这样的响应头,我们才能使用,如果不配置也可以,但打开图纸期间会阻塞js线程,详细的使用请查看mxcad文档。
2)编辑CAD图纸
安装好mxcad后,我们就可以直接使用可以在页面中显示并编辑cad图纸,输入如下代码:
import { createMxCad } from "mxcad"
createMxCad({
canvas: "#myCanvas",
locateFile: (fileName) => new URL(`node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
fileUrl: new URL("../assets/test.mxweb", import.meta.url).href
}).then((mxcad) => {
// 我想换一个文件显示?
// mxcad.openWebFile(new URL("../assets/test2.mxweb", import.meta.url).href)
// 保存文件?必须放在用户操作的事件(如点击)中调用它,因为这个行为必须是用户操作去触发
// mxcad.saveFile()
})
fileUrl 以及openWebFile的参数都是指的转换后的文件,如何转换文件在mxcad文档中有对应的说明,而更详细的可以看mxdraw转换说明中的相关内容。
使用示例源码合集
如果你仍然无法完成图纸展示或者编辑,建议在github上看我们写好的对应示例源码,然后直接git clone 我们在github上提供的示例代码来参考或者进行开发。
mxdraw相关示例:mxdraw示例
mxcad相关示例:mxcad示例
如果你不了解git 请参考:Git安装指南
注意:使用mxcad 你需要克隆的是mxcad仓库,而不是mxcad示例,具体如何启动这些示例,在示例项目中有详细说明。
更多关于HarmonyOS鸿蒙Next中在线前端mxdraw和mxcad库预览编辑图纸的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,mxdraw
和mxcad
库是用于在线前端预览和编辑图纸的工具。mxdraw
主要用于CAD图纸的在线预览,支持DWG、DXF等格式,并提供缩放、平移、图层控制等功能。mxcad
则更专注于CAD图纸的在线编辑,支持绘图、标注、修改等操作。
mxdraw
和mxcad
库通过HarmonyOS的分布式能力,可以在不同设备间无缝协同工作。开发者可以通过集成这些库,实现跨设备的图纸预览和编辑功能。具体使用时,需在HarmonyOS应用中引入相关库文件,并按照文档进行配置和调用。
mxdraw
和mxcad
库的API设计遵循HarmonyOS的开发规范,支持ArkTS语言调用。开发者可以通过API接口实现图纸的加载、显示、编辑等操作,并利用HarmonyOS的UI框架进行界面定制。
这些库的集成和使用需参考华为开发者官网提供的文档,确保与HarmonyOS系统的兼容性和性能优化。
更多关于HarmonyOS鸿蒙Next中在线前端mxdraw和mxcad库预览编辑图纸的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,使用在线前端库如mxdraw和mxcad进行图纸的预览和编辑,可以通过以下步骤实现:
-
集成库:首先,在项目中引入mxdraw和mxcad库。可以通过npm或直接下载库文件并引入到HTML中。
-
初始化:在页面加载完成后,初始化mxdraw和mxcad实例。配置必要的参数,如画布大小、图纸路径等。
-
加载图纸:使用mxcad提供的API加载图纸文件(如DWG格式)。确保文件路径正确,并处理加载完成后的回调。
-
预览与编辑:通过mxdraw提供的功能,用户可以在画布上预览图纸,并进行基本的编辑操作,如缩放、平移、标注等。
-
保存与导出:编辑完成后,使用mxcad的API将修改后的图纸保存或导出为所需格式。
通过这些步骤,可以在HarmonyOS鸿蒙Next中实现图纸的在线预览和编辑功能。