快速入门

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中查看示例 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>)
}

mxcad

快速入门

安装

CDN

NPM

基本用法

示例参考

在vite中使用

在webpack中使用

在h5中直接使用

createMxCad 的实现

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

mxcad

快速入门

安装

CDN

NPM

基本用法

示例参考

在vite中使用

在webpack中使用

在h5中直接使用

createMxCad 的实现

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads