HarmonyOS鸿蒙Next在线CAD(H5网页CAD SDK)实现阵列功能

HarmonyOS鸿蒙Next在线CAD(H5网页CAD SDK)实现阵列功能

前言

在线CAD SDK的集成过程中,甲方客户可能有阵列功能的需求,作为开发者如何利用WEB CAD SDK展现此功能效果呢?本章节我们重点讲述一下。

首先看一下在线CAD的DEMO:https://demo.mxdraw3d.com:3000/mxcad/,阵列功能如下图:

cke_127.png

环境搭建

首先按照 mxcad入门文档 创建环境,如下图:

cke_128.png

基于mxcad库实现阵列功能

阵列功能是按一定规律对某个或多个图形组合进行复制偏移,生成出新的图形组合,在实现它之前我们要确保已经用mxcad库在页面中显示了一个cad图纸,

然后我们用鼠标点击一个或者多个图形, 就可以选中它们,选中后执行以下代码:

const rowNum = Number(prompt("输入行数"))
const colNum = Number(prompt("输入列数"))
if (isNaN(rowNum) || isNaN(colNum)) return alert("点击画布两点之间的距离作为偏移量")
let offset = await MxCADUtility.getCorner("输入偏移距离");
if (!offset) return
let dColOffset = offset.pt2.x - offset.pt1.x;
let dRowOffset = offset.pt2.y - offset.pt1.y;
// 得到选中的图形
let aryId = await MxCADUtility.userSelect("选择陈列对象");
// 得到这些图形的包围盒
let ext = MxCADUtility.getMcDbEntitysBoundingBox(aryId);
if (!ext) return;
let cenPt = new McGePoint3d();
if (dColOffset > 0)
    cenPt.x = ext.minPt.x;
else
    cenPt.x = ext.maxPt.x;
if (dRowOffset > 0)
    cenPt.y = ext.minPt.y;
else
    cenPt.y = ext.maxPt.y;
// 角度
let dAng = Number(prompt("输入角度"));
if (isNaN(dAng)) return
let matRot = new McGeMatrix3d().setToRotation(dAng * Math.PI / 180.0, McGeVector3d.kZAxis, cenPt);
// 循环渲染
let iMaxNum = 50000;
let iCount = 0;
for (let i = 0; i < rowNum; i++) {
    // 行 平移矩阵
    let yOffsetVec = new McGeVector3d(0.0, dRowOffset * i, 0.0);
    let offsetMatY = new McGeMatrix3d().setToTranslation(yOffsetVec);
    for (let j = 0; j < colNum; j++) {
        if (i == 0 && j == 0) continue;
        // 列 平移矩阵
        let xOffsetVec = new McGeVector3d(dColOffset * j, 0.0, 0.0);
        let ofssetMatX = new McGeMatrix3d().setToTranslation(xOffsetVec);
        let vecOffset = new McGePoint3d(cenPt.x, cenPt.y, cenPt.z);
        // 应用对应矩阵
        vecOffset.transformBy(offsetMatY);
        vecOffset.transformBy(ofssetMatX);
        vecOffset.transformBy(matRot);
        // 最终的变换矩阵
        let tmpMat = new McGeMatrix3d().setToTranslation(new McGeVector3d(vecOffset.x - cenPt.x, vecOffset.y - cenPt.y, vecOffset.z - cenPt.z));
        for (let m = 0; m < aryId.length; m++) {
            let tmp = aryId[m].clone() as McDbEntity
            if (!tmp) {
                continue;
            }
            // 将该变换矩阵应用在图形对象上
            tmp.TransformBy(tmpMat);
            MxCpp.GetCurrentMxCAD().DrawEntity(tmp);
            iCount++;
            if (iCount > iMaxNum) {
                alert("超出最大阵列对象个数" + iMaxNum + "限制. \n");
                return;
            }
        }
    }
}

代码中主要让用户输入一些行列数和偏移距离以及角度值, 然后得到选中图形, 得到其包围盒,并计算出变换矩阵, 复制这些对象然后绘制在画布,效果如下图:

cke_129.png

cke_130.png

cke_131.png

对于需要自己二次开发cad相关功能, 可以参考:

mxcad入门: https://mxcadx.gitee.io/mxcad_docs/zh/

mxcad API文档 :https://mxcadx.gitee.io/mxcad_docs/api/README.html

DEMO源码:https://gitee.com/mxcadx/mxdraw-article/tree/master/%E5%AE%9E%E7%8E%B0%E9%98%B5%E5%88%97%E5%8A%9F%E8%83%BD


更多关于HarmonyOS鸿蒙Next在线CAD(H5网页CAD SDK)实现阵列功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中实现H5网页CAD SDK的阵列功能,可以通过以下步骤进行:

  1. 初始化CAD环境:首先,确保在H5页面中正确加载并初始化CAD SDK。这通常涉及到引入SDK的JavaScript文件,并调用初始化函数。

  2. 创建阵列对象:使用SDK提供的API创建阵列对象。阵列功能通常包括矩形阵列、环形阵列等。根据需求选择合适的阵列类型。

  3. 设置阵列参数:为阵列对象设置必要的参数,如行数、列数、间距、旋转角度等。这些参数将决定阵列的具体形态。

  4. 应用阵列:将阵列应用到选定的图形对象上。这通常涉及到调用SDK的阵列应用函数,并传入目标图形对象和阵列对象。

  5. 渲染与更新:应用阵列后,调用渲染函数更新H5页面中的CAD视图,以显示阵列效果。

  6. 交互与调整:提供用户交互接口,允许用户调整阵列参数,并实时更新阵列效果。

以下是一个简化的代码示例,展示如何在H5网页CAD SDK中实现矩形阵列功能:

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

// 创建矩形阵列对象
const array = cadSDK.createRectangularArray({
    rows: 3,
    columns: 4,
    rowSpacing: 50,
    columnSpacing: 50
});

// 选择目标图形对象
const targetShape = cadSDK.selectShape('rectangle1');

// 应用阵列
cadSDK.applyArray(targetShape, array);

// 渲染更新
cadSDK.render();

更多关于HarmonyOS鸿蒙Next在线CAD(H5网页CAD SDK)实现阵列功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现H5网页CAD SDK的阵列功能,可通过以下步骤:

  1. 初始化Canvas:使用HTML5的<canvas>元素进行绘图初始化。
  2. 定义阵列参数:设置阵列的行数、列数、间距及旋转角度等参数。
  3. 绘制基础图形:在指定位置绘制基础的CAD图形。
  4. 应用阵列:通过循环计算每个图形的位置,并调用绘制函数实现阵列效果。
  5. 交互优化:添加事件监听,支持用户动态调整阵列参数并实时更新视图。

示例代码可参考使用CanvasRenderingContext2D进行图形绘制和变换,确保兼容性和性能优化。

回到顶部