HarmonyOS鸿蒙Next中Web cad（私有云CAD SDK）实现插入图块的方法

HarmonyOS鸿蒙Next中Web cad（私有云CAD SDK）实现插入图块的方法

前言

CAD制图的过程中会有很多重复的图元需要绘制，为了节约绘制时间，我们会把部分图元保存成图块，下次就可以快速和多次的插入到相应的图纸位置中，提高绘图效率。

网页版CAD页面中要实现插入图块功能，首先需要将这个图块dwg文件转换成mxweb文件，我们需要下载MxDraw云图开发包,根据入门文档的操作, 实现dwg文件到mxweb文件的转换, 让它支持在页面中显示。

下载试用包之后，我们按下图所示将dwg文件转成mxweb文件:

更多关于图纸转换程序的使用说明可以参考入门文档或者mxcad文档-图纸转换

有了mxweb文件,就可以通过mxcad npm包实现插入图块功能。

注意：无论是图纸还是图块 最终转换后都是mxweb文件。

在阅读了mxcad文档-快速入门后, 你可以自己按照步骤去实现页面加载mxweb文件显示图纸，也可以直接下载或者参考我们提供的示例源码：

示例源码

实现插入图块功能

我们就基于示例源码中vite目录这个由vite打包工具使用mxcad的初始化示例项目为例 来开始实现一个插入图纸的功能，代码如下:

import { createMxCad } from "mxcad"

(async () => {
    const mxcad = await createMxCad({
        canvas: "#myCanvas",
        locateFile: (fileName) => {
            return new URL(`/${mode}/${fileName}`, import.meta.url).href;
        },
        fileUrl: new URL("../public/test2.mxweb", import.meta.url).href,
        fontspath: new URL("../node_modules/mxcad/dist/fonts", import.meta.url).href,
    })

    // 这里用定时器是保证稳定的测试, 正常来说是在需要的时候调用就好
    setTimeout(async () => {
        // 加载图块转换的mxweb文件
        let blkrecId = await mxcad.insertBlock(new URL("../public/tree.mxweb", import.meta.url).href, "tree");
        // id是否有效
        if (!blkrecId.isValid()) {
            return;
        }
        // 实例化一个块
        let blkRef = new McDbBlockReference();
        // 将加载的图块ID赋值给它
        blkRef.blockTableRecordId = blkrecId;
        // 然后计算一下这个块的包围盒
        let box = blkRef.getBoundingBox();
        if (box.ret) {
            let dLen = box.maxPt.distanceTo(box.minPt);
            // 如果图块包围盒特别小
            if (dLen > 0.00001) {
                // 则需要放大
                blkRef.setScale(mxcad.getMxDrawObject().screenCoordLong2Doc(100) / dLen);
            }
        }
        // 这里开始做用户交互
        let getPoint = new MxCADUiPrPoint();
        getPoint.setMessage("指定插入基点");
        // 动态绘制这个图块
        getPoint.setUserDraw((v, worldDraw) => {
            blkRef.position = v;
            worldDraw.drawMcDbEntity(blkRef);
        });
        // 用户鼠标点击时得到位置
        let pt = await getPoint.go();
        if (!pt) return;
        blkRef.position = pt;
        // 绘制这个图块
        mxcad.drawEntity(blkRef);
    }, 1000)
})()

效果如下图：

这样我们就完成了图块的插入。

DEMO源码:

DEMO源码


更多关于HarmonyOS鸿蒙Next中Web cad（私有云CAD SDK）实现插入图块的方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，使用Web CAD SDK实现插入图块的方法主要涉及以下几个步骤：

  1. 初始化Web CAD SDK：首先需要确保Web CAD SDK已正确初始化，并加载到鸿蒙应用中。通常，这涉及到在HTML页面中引入SDK的JavaScript文件，并在鸿蒙的Web组件中加载该页面。

  2. 加载CAD文件：使用Web CAD SDK提供的API加载CAD文件。通常，可以通过loadDocument或类似的方法加载CAD文件，并确保文件成功加载后，才能进行后续操作。

  3. 创建图块：在加载的CAD文档中，使用SDK提供的API创建图块。通常，可以通过createBlock或类似的方法创建图块，并指定图块的名称、位置、大小等属性。

  4. 插入图块：在CAD文档的指定位置插入图块。通常，可以通过insertBlock或类似的方法插入图块，并指定插入点的坐标、旋转角度等参数。

  5. 保存或更新文档：插入图块后，可以选择保存或更新CAD文档。通常，可以通过saveDocument或类似的方法保存文档，或者通过updateDocument更新文档内容。

以下是一个简化的代码示例，展示如何在鸿蒙Next中使用Web CAD SDK插入图块：

// 假设Web CAD SDK已正确加载并初始化
const cadSDK = window.CADSDK;

// 加载CAD文档
cadSDK.loadDocument('path/to/cad/file.dwg', function(document) {
    // 创建图块
    const block = document.createBlock('MyBlock', { x: 0, y: 0, width: 100, height: 100 });

    // 在指定位置插入图块
    document.insertBlock(block, { x: 200, y: 200, rotation: 0 });

    // 保存或更新文档
    document.saveDocument('path/to/save/file.dwg');
});

更多关于HarmonyOS鸿蒙Next中Web cad（私有云CAD SDK）实现插入图块的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，通过Web CAD SDK实现插入图块的方法如下：

  1. 加载图块资源：首先，确保图块资源已上传至私有云，并通过SDK加载到当前绘图环境中。

  2. 创建图块实例：使用SDK提供的API创建图块实例，指定图块名称、插入点、缩放比例和旋转角度等参数。

  3. 插入图块：调用insertBlock方法，将图块实例插入到指定位置。例如：

    const block = new Block('blockName', {x: 100, y: 100}, 1, 0);
cadView.insertBlock(block);

  4. 更新视图：插入完成后，调用refresh方法更新视图，确保图块显示正确。

通过以上步骤，即可在鸿蒙Next中实现图块的插入操作。

回到顶部