网页CAD的mxdraw库实现Autocad中的圆
前言Web端显示CAD图纸的应用场景很广泛，单纯的浏览DWG逐渐满足不了用户的实际需求，浏览的同时再加上简单的绘制和批注更符合大家的应用场景，接下来我们讲一下如何利用Mxdraw库实现AutoCAD中的画圆命令。首先我们知道DWG图纸要在网页上显示需要安装转换程序，在测试开始之前，我们要熟悉转换方法和原理，请查看快速入门中的《如何在自己系统中浏览dwg文件》章节，如下图所示： 如果还有疑问可以查看：https://help.mxdraw.com/?pid=107中《mxdraw前端库预览图纸》章节，如下图： 关于mxdraw库是一款用于绘制CAD图形的JavaScript库，它提供了一系列的图形形状类，可以实现类似于Autocad的绘图功能，在此之前先看一下圆弧形状类的描述：https://mxcadx.gitee.io/mxdraw_api_docs/classes/MxDbCircleShape.html基于这个形状类, 我们可以实现类似autocad绘制圆的功能，首先我们先通过继承类的方式，为圆提供可以改变这个圆的夹点，代码如下：<font size="3">import { MxDbCircleShape } from "mxdraw";class MxDbCircle extends MxDbCircleShape {
/**是否闭合到中心位置 */
isClosedToCenter = false
/**
* 返回自定义对象的夹点.
* @param
* @returns Array<THREE.Vector3>
*/
getGripPoints() {
const { x, y, z } = this.center;
// 计算圆的上下左右夹点
let upPoint = new THREE.Vector3(x, y + this.radius, z),
downPoint = new THREE.Vector3(x, y - this.radius, z),
leftPoint = new THREE.Vector3(x - this.radius, y, z),
rightPoint = new THREE.Vector3(x + this.radius, y, z);
return ;
}
/**
* 移动自定义对象的夹点.
* @param
* @returns boolean
*/
moveGripPointsAt(index: number, offset: THREE.Vector3) {
const =
this.getGripPoints();
// 改变上下左右的夹点则改变radius半径
if (index === 0) this.center = center.add(offset);
if (index === 1) this.radius = upPoint.add(offset).distanceTo(this.center);
if (index === 2)
this.radius = downPoint.add(offset).distanceTo(this.center);
if (index === 3)
this.radius = leftPoint.add(offset).distanceTo(this.center);
if (index === 4)
this.radius = rightPoint.add(offset).distanceTo(this.center);
return true;
}
}</font>属性列表如下：
属性名 类型 描述
center Vector3 圆心坐标
radiusnumber圆半径
startAnglenumber弧开始角度
endAnglenumber弧结束角度
clockwiseboolean是否以顺时针方向创建（扫过）弧线
isClosedToCenterboolean是否闭合到中心位置
需要注意的是，MxDbCircleShape继承自(https://mxcadx.gitee.io/mxdraw_api_docs/classes/MxDbEllipseShape.html)，因此MxDbCircleShape也拥有MxDbEllipseShape的所有属性。我们只需要知道圆心和半径就可与直接绘制一个圆了。绘制圆的方法方法1：两点绘制圆参考代码如下：<font size="3">import { MrxDbgUiPrPoint, MxFun, MxDbCircleShape, McEdGetPointWorldDrawObject, } from "mxdraw";
const drawCircleAtTwoPoints = async () => {
const getPoint = new MrxDbgUiPrPoint();
const circle = new MxDbCircle();
// 直接确定圆心
circle.center = await getPoint.go()
getPoint.setUserDraw(
(
currentPoint: THREE.Vector3,
pWorldDraw: McEdGetPointWorldDrawObject
)=> {
// 根据圆心和圆弧上任意一点确定半径
circle.radius = circle.center.distanceTo(currentPoint)
pWorldDraw.drawCustomEntity(circle);
// 再绘制一根圆弧和圆心的连接线表示现在正在确定半径
pWorldDraw.drawLine(circle.center, currentPoint);
}
);
// 确定最后绘制的圆的半径
circle.radius = circle.center.distanceTo(await getPoint.go())
MxFun.getCurrentDraw().addMxEntity(circle);
}
drawCircleAtTwoPoints()</font>方法2：三点绘制圆通过三元一次方程组求解圆心的坐标的具体步骤如下：1）假设圆心的坐标为(cx, cy, cz)，将三个点的坐标代入圆的一般方程，得到三个方程：a1 * cx + b1 * cy + c1 * cz + d1 = 0a2 * cx + b2 * cy + c2 * cz + d2 = 0a3 * cx + b3 * cy + c3 * cz + d3 = 0
2）将三个方程进行整理，得到以下形式的方程：(a1 * b2 * c3 - a1 * b3 * c2 - a2 * b1 * c3 + a2 * b3 * c1 + a3 * b1 * c2 - a3 * b2 * c1) * cx +(b1 * c2 * d3 - b1 * c3 * d2 - b2 * c1 * d3 + b2 * c3 * d1 + b3 * c1 * d2 - b3 * c2 * d1) * cy +(a1 * b2 * d3 - a1 * b3 * d2 - a2 * b1 * d3 + a2 * b3 * d1 + a3 * b1 * d2 - a3 * b2 * d1) * cz +(a1 * b2 * c3 - a1 * b3 * c2 - a2 * b1 * c3 + a2 * b3 * c1 + a3 * b1 * c2 - a3 * b2 * c1) = 0
3）根据方程的系数，将cx、cy和cz的系数分别除以(a1 * b2 * c3 - a1 * b3 * c2 - a2 * b1 * c3 + a2 * b3 * c1 + a3 * b1 * c2 - a3 * b2 * c1)，得到cx、cy和cz的值。将得到的cx、cy和cz的值作为圆心的坐标，返回一个新的THREE.Vector3对象。4）这样就可以通过三元一次方程组的求解方法，求得三个点确定的圆心的坐标，代码如下:.......篇幅限制，更多的内容请查询梦想CAD控件Demo源码：https://gitee.com/mxcadx/mxdraw-article/tree/master/mxdraw%E5%BA%93%E5%AE%9E%E7%8E%B0autocad%E4%B8%AD%E7%9A%84%E5%9C%86篇幅限制，更多的内容请查询梦想CAD控件
在线CAD编辑版DEMO：https://demo.mxdraw3d.com:3000/mxcad/（谷歌打开）
页:
[1]