快速入门

mxcad必须和mxdraw一起使用如果你不了解mxdraw库请参考：https://mxcadx.gitee.io/mxdraw_docs/

联系方式: 710714273@qq.com

安装

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中查看示例 github | gitee

或者通过执行以下命令查看所有实例

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>)
}

mxcadx/mxcad_docs

快速入门

安装

CDN

NPM

基本用法

示例参考

在vite中使用

在webpack中使用

在h5中直接使用

createMxCad 的实现

简介

发行版

贡献者

语言

近期动态

mxcadx/mxcad_docs .gitee-modal { width: 500px !important; }

快速入门

安装

CDN

NPM

基本用法

示例参考

在vite中使用

在webpack中使用

在h5中直接使用

createMxCad 的实现

简介

发行版

贡献者

语言

近期动态

搜索帮助

mxcadx/mxcad_docs