网页CAD SDK绘制规则多边形图形

CAD画图 · 发表于 2023-11-22 10:16:03

前言
在 CAD（计算机辅助设计）领域，绘制多边形是常见的任务之一。MxCAD 是一款专注在线CAD的前端库，提供了丰富的绘图和设计功能，使得绘制多边形变得轻松而灵活。本文将带领您通过使用 MxCAD 实现绘制多边形的过程，深入了解其基本概念和功能。
mxcad 是一个基于 TypeScript 的前端库，专为 CAD 开发者设计。它提供了丰富的 API 和功能，用于创建、编辑和展示 CAD 图形。通过导入各种模块实现各种绘制任务。
我们以绘制规则多边形为例，介绍如何使用 mxcad 绘制多边形，将下面的代码片段导入 mxcad和mxdraw 在本文中会用到的模块。

import { DynamicInputType, MrxDbgUiPrInt, MrxDbgUiPrPoint, MxCursorType, MxFun } from "mxdraw";
import { MxCpp, McCmColor, McDbCircle, McDbPolyline, McGePoint3d, MxCADUiPrInt, MxCADUiPrPoint } from "mxcad";

复制代码

其中 DynamicInputType、MrxDbgUiPrInt 等是 MxCAD 提供的功能模块，而 McDbCircle、McDbPolyline 则是表示 CAD 图形的对象。
如果看了文中导出的API使用示例不理解可以在mxcadAPI文档或者mxdrawAPI文档中查找对应说明。
理解生成规则多边形的算法的每一步计算对于绘制正多边形非常重要。以下是 computeRegularPolygonVertices 函数的详细解释：

/**
* 生成规则多边形的顶点坐标
* @param {McGePoint3d} centerPoint - 多边形中心点
* @param {McGePoint3d} vertexPoint - 多边形顶点
* @param {number} sides - 多边形边数（至少为3）
* @returns {McGePoint3d[]} 多边形的顶点坐标数组
*/
export function computeRegularPolygonVertices(centerPoint = new McGePoint3d(), vertexPoint = new McGePoint3d(), sides = 3): McGePoint3d[] {
const verticesArray: McGePoint3d[] = [];
sides = Math.max(3, sides);
verticesArray.push(vertexPoint);
// 计算每个顶点的角度增量
const angleIncrement = (Math.PI * 2) / sides;
for (let i = 1; i < sides; i++) {
// 计算当前顶点对应的角度上的余弦和正弦值
const cosValue = Math.cos(angleIncrement * i),
sinValue = Math.sin(angleIncrement * i);
// 复制中心点和顶点，以免修改原始点的值
const startPt = centerPoint.clone();
const endPt = vertexPoint.clone();
// 计算相对于中心点的偏移量
const deltaX = endPt.x - startPt.x;
const deltaY = endPt.y - startPt.y;
// 根据旋转公式计算新的顶点坐标
const newX = deltaX * cosValue - deltaY * sinValue + startPt.x;
const newY = deltaX * sinValue + deltaY * cosValue + startPt.y;
// 创建新的顶点对象并加入数组
const point = new McGePoint3d(newX, newY);
verticesArray.push(point);
}
return verticesArray;
}

复制代码

多边形的计算
下面是算法的每一步计算的详细解释：
1.初始化参数：首先，函数初始化了一个空数组 verticesArray 用于存储多边形的顶点坐标。同时，确保多边形的边数至少为3，如果用户输入的边数小于3，就将边数设置为3。

const verticesArray: McGePoint3d[] = [];
sides = Math.max(3, sides);
verticesArray.push(vertexPoint);

复制代码

2.计算角度增量：通过将完整的圆周角（2π）除以多边形的边数，计算出每个顶点之间的角度增量。

const angleIncrement = (Math.PI * 2) / sides;

复制代码

3.计算顶点坐标：利用余弦和正弦值计算每个顶点相对于起始点的偏移量。这里采用了旋转公式，通过旋转坐标系来计算新的顶点坐标。

const cosValue = Math.cos(angleIncrement * i),
sinValue = Math.sin(angleIncrement * i);

复制代码

4.复制中心点和顶点：为了防止修改原始点的值，创建了中心点和顶点的副本。

const startPt = centerPoint.clone();
const endPt = vertexPoint.clone();

复制代码

5.计算偏移量：计算相对于中心点的偏移量，即顶点相对于中心点的位置。

const deltaX = endPt.x - startPt.x;
const deltaY = endPt.y - startPt.y;

复制代码

6.旋转计算新坐标：利用旋转公式计算新的顶点坐标，并将其添加到顶点数组中。

const newX = deltaX * cosValue - deltaY * sinValue + startPt.x;
const newY = deltaX * sinValue + deltaY * cosValue + startPt.y;
const point = new McGePoint3d(newX, newY);
verticesArray.push(point);

复制代码

7.返回结果：最终，返回计算得到的多边形的顶点坐标数组。

return verticesArray;

复制代码

通过这个算法，我们可以在 CAD 中绘制出规则多边形，而不仅仅是简单的直角坐标系中的顶点。这使得多边形的绘制更加灵活和适应性强。
与之对应的，我们从注释可以看出, 他们是通过多边形中心点和多边形顶点来计算出整个多边形的顶点坐标。
其他的计算方法
那么在AutoCAD中,还有其他方式可以绘制正多边形，那么我们接下来一一将这些算法实现。
下面是 computePolygonVerticesFromEdge 函数的详细解释：

/**
* 计算多边形顶点坐标（基于边）
* @param {McGePoint3d} startPoint - 多边形边的起始点
* @param {McGePoint3d} endPoint - 多边形边的结束点
* @param {number} sides - 多边形边数（至少为3）
* @returns {McGePoint3d[]} 多边形的顶点坐标数组
*/
export function computePolygonVerticesFromEdge(startPoint: McGePoint3d, endPoint: McGePoint3d, sides: number): McGePoint3d[] {
// 计算边的长度和角度
let dx = endPoint.x - startPoint.x;
let dy = endPoint.y - startPoint.y;
let length = Math.sqrt(dx * dx + dy * dy);
let angle = Math.atan2(dy, dx);
// 计算每个顶点的角度增量
let angleIncrement = (2 * Math.PI) / Math.max(3, sides);
let polygonVertices = [startPoint, endPoint];
for (let i = 0; i < sides; i++) {
// 计算当前顶点的坐标
let x = startPoint.x + length * Math.cos(angle + i * angleIncrement);
let y = startPoint.y + length * Math.sin(angle + i * angleIncrement);
// 更新起始点并加入数组
startPoint = new McGePoint3d(x, y);
polygonVertices.push(startPoint);
}
return polygonVertices;
}

复制代码

以下是该算法的每一步计算的详细解释：
1.计算边的长度和角度：首先，计算给定边的长度和角度。这是通过计算起始点和结束点的横向和纵向差异，然后使用勾股定理计算长度，最后使用反正切函数计算角度。

let dx = endPoint.x - startPoint.x;
let dy = endPoint.y - startPoint.y;
let length = Math.sqrt(dx * dx + dy * dy);
let angle = Math.atan2(dy, dx);

复制代码

2.计算每个顶点的角度增量：为了均匀地分布多边形的顶点，计算每个顶点之间的角度增量。

let angleIncrement = (2 * Math.PI) / Math.max(3, sides);

复制代码

3.初始化顶点数组：创建一个数组，其中包含起始点和结束点，这是为了确保多边形是封闭的。

let polygonVertices = [startPoint, endPoint];

复制代码

4.计算顶点坐标：循环计算每个顶点的坐标。利用极坐标系的转换，通过给定的角度增量计算出每个顶点相对于起始点的坐标。

for (let i = 0; i < sides; i++) {
let x = startPoint.x + length * Math.cos(angle + i * angleIncrement);
let y = startPoint.y + length * Math.sin(angle + i * angleIncrement);
startPoint = new McGePoint3d(x, y);
polygonVertices.push(startPoint);
}

复制代码

5.返回结果：最终，返回计算得到的多边形的顶点坐标数组。

return polygonVertices;

复制代码

通过这个算法，我们可以根据给定的起始点和结束点绘制多边形。
下面是 computePolygonVerticesFromMidpoint 函数的详细解释：

/**
* 计算多边形顶点坐标（基于中点）
* @param {McGePoint3d} centerPoint - 多边形中心点
* @param {McGePoint3d} edgeMidPoint - 多边形一条边的中点
* @param {number} sides - 多边形边数（至少为3）
* @returns {McGePoint3d[]} 多边形的顶点坐标数组
*/
function computePolygonVerticesFromMidpoint(centerPoint = new McGePoint3d(), edgeMidPoint = new McGePoint3d(), sides = 3): McGePoint3d[] {
const midX = edgeMidPoint.x;
const midY = edgeMidPoint.y;
const centerX = centerPoint.x;
const centerY = centerPoint.y;
const numberOfSides = Math.max(3, sides);
// 计算中点到多边形中心的距离
const distanceToCenter = Math.sqrt((midX - centerX) ** 2 + (midY - centerY) ** 2);
// 计算中点到多边形中心的半径
const radius = distanceToCenter / Math.cos(Math.PI / numberOfSides);
// 计算起始角度
const startAngle = Math.atan2(midY - centerY, midX - centerX) - Math.PI / numberOfSides;
const vertices = [];
for (let i = 0; i < numberOfSides; i++) {
// 计算当前顶点的角度
const angle = startAngle + (i * 2 * Math.PI / numberOfSides);
// 根据极坐标系转换成直角坐标系的坐标
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
// 创建新的顶点对象并加入数组
vertices.push(new McGePoint3d(x, y));
}
return vertices;
}

复制代码

篇幅限制，更多的内容请查询梦想CAD控件。
实际效果查看:https://demo.mxdraw3d.com:3000/mxcad/ 在页面的命令行输入Mx_Polygon

复仇云 · 发表于 2024-3-22 12:48:34

感谢分享

[图文教程] 网页CAD SDK绘制规则多边形图形

相关帖子

活跃会员