mxcad v1.0.208
快速入门
mxcad必须和mxdraw一起使用 如果你不了解mxdraw库 请参考:https://mxcadx.gitee.io/mxdraw_docs/
安装
CDN
<script scr="https://unpkg.com/mxdraw/dist/mxdraw.umd.js" ></script>
<script scr="https://unpkg.com/mxcad/dist/mxcad.umd.js"></script>
NPM
npm install mxdraw mxcad
基本用法
::: tip 重要提示
因为mxcad默认使用了SharedArrayBuffer
需要在服务端设置相应对应的响应头:
// nodejs 为例
const http = require('http');
http.createServer((req, res)=> {
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
})
:::
需要canvas元素
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
推荐使用vite作为构建工具
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)
// 我想保存我修改后的文件?
// (你可以在dom元素事件函数中调用,这样可以使用一些最新的浏览器特性保存文件)
mxcad.saveFile()
})
示例参考
或者通过 执行以下命令查看所有实例
git clone https://github.com/mxcad/mxcad_docs
cd examples
npm install -g pnpm
pnpm install
pnpm run -r dev
你还可以通过演练场在线编辑修改代码查看运行后的效果
在vite中使用
1.安装vite
npm install vite -D
2.在项目根目录新建html文件
<!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>vite use mxcad</title>
</head>
<body>
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
3.在根目录下新建src
目录 在src
目录下新建index.ts
文件(vite默认支持ts)代码如下:
import { createMxCad } from "mxcad"
import { MxFun } from "mxdraw"
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
})
4.在src
目录下创建assets
并复制test.mxweb
文件到该目录下
5.在根目录下创建vite.config.ts
文件
import { defineConfig } from "vite"
export default defineConfig({
server: {
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
}
}
})
6.完成以上步骤在根目录执行如下命令
npx vite
在webpack中使用
1.安装
npm install webpack webpack-cli copy-webpack-plugin@5 -D
2.在根目录下创建webpack.config.js
文件
const path = require('path');
// copy-webpack-plugin@5 兼容webpack4和5的版本请放心使用
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
mode: process.env.development === "development" ? "development" : "production",
entry: './src/index.js',
devServer: {
static: './dist',
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp"
}
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
plugins: [
new CopyWebpackPlugin([
// 拷贝mxcad wasm 相关的核心代码 mxcad默认请求的路径是 /* 所有 需要把文件放dist2d下
{
from: "node_modules/mxcad/dist/wasm/2d/*",
to: path.resolve(__dirname, "dist"),
flatten: true
},
// 必须要字体文件来显示图纸中的文字,mxcad库默认请求URL路径为 /fonts/* 所有需要放在dist/fonts下
{
from: "node_modules/mxcad/dist/fonts",
to: path.resolve(__dirname, "dist/fonts"),
flatten: true,
toType: "dir"
},
])
],
// mxcad 和 mxdraw库的js代码打包超过webpack默认限制的大小,需要设置hints: false关闭警告
performance: {
hints: false,
}
};
3.在根目录新建index.html
文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
<script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
<script src="./src/index.js"></script>
</body>
</html>
4.在根目录新建src
目录 并在src
目录下新建index.js
文件
createMxCad({
canvas: "#myCanvas",
// 通过需要访问:http:xxx.com/test.mxweb 获取对应的文件
// 请你自行提供该文件
fileUrl: "test.mxweb"
})
5.完成上述步骤执行npx webpack serve
命令运行查看效果
在h5中直接使用
<!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>Document</title>
<script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
<script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
<script>
const { MxFun } = Mx
const { createMxCad } = mxcad
window.onload = function() {
createMxCad({
canvas: "#myCanvas",
locateFile(fileName) {
/***
* 你可以不设置locateFile属性,
* 默认通过该https://unpkg.com CDN加载或者无法使用SharedArrayBuffer的情况
* mxcad会自动引入2d-st的资源
* 2d与2d-st的区别就是2d-st未使用worker多线程优化,
* 导致在打开图纸时会阻塞js线程导致打开图纸过程中页面卡死的情况
* 推荐使用2d wasm资源,你需要在服务器设置响应头:
* "Cross-Origin-Opener-Policy": "same-origin",
* "Cross-Origin-Embedder-Policy": "require-corp"
*
* 并对于2d wasm资源遵从浏览器同源策略
* (也就是说 locateFile返回的url需要是和自己的服务器域名相同的域名端口才行)
* */
return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
},
// 请自行在静态服务器上添加test.mxweb文件 如http://xxx.com/test.mxweb
fileUrl: "test.mxweb"
})
}
</script>
</head>
<body>
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
</body>
</html>
createMxCad 的实现
// 这是createMxCad 实现的大致代码
// 如果你希望整个创建过程是透明公开的,
// 你可以不使用createMxCad 而是使用下面的代码自行创建
import { MxFun, loadCoreCode } from "mxdraw";
import { loadMxCADassembly } from "mxcad"
export default () => {
loadCoreCode()
.then(() => loadMxCADassembly((MxCpp)=> {
MxFun.setIniset({
EnableIntelliSelect: true
})
MxFun.createMxObject({
canvasId: "myCanvas",
isCPPMxCAD: true,
callback(mxDraw, dom) {
mxDraw.initRendererParam({ webgl2: true });
mxDraw.setMouseMiddlePan(true);
mxDraw.on("initObject", () => {
const THREE = MxFun.getMxFunTHREE()
let size = new THREE.Vector2();
mxDraw.getRenderer().getSize(size);
const mxcadObj = MxCpp.App.CreateMxCAD(size.width, size.height, "myCanvas", mxDraw.isWebgl2(), mxDraw.getId());
mxDraw.initMxCpp(mxcadObj);
mxcadObj.openWebFile("test2.mxweb");
});
}
})
}
,
(fileName: string)=> {
// CDN 加载必须使用wasm/2d-st中的资源、因为github的限制无法使用wasm/2d 资源
// 需要使用wasm/2d需要遵循浏览器同源策略或使用其他手段规避浏览器同源策略
return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
}),
)
return (<div style="height: 600px; overflow: hidden;"><canvas id="myCanvas" style="height: 300px"></canvas></div>)
}
15 days ago
16 days ago
20 days ago
21 days ago
22 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago