前言 Web端显示CAD图纸的应用场景很广泛,单纯的浏览DWG逐渐满足不了用户的实际需求,浏览的同时再加上简单的绘制和批注更符合大家的应用场景,接下来我们讲一下如何利用Mxdraw库实现AutoCAD中的画圆命令。 首先我们知道DWG图纸要在网页上显示需要安装转换程序,在测试开始之前,我们要熟悉转换方法和原理,请查看快速入门中的《如何在自己系统中浏览dwg文件》章节,如下图所示: 关于[MxDbCircleShape]mxdraw库是一款用于绘制CAD图形的JavaScript库,它提供了一系列的图形形状类,可以实现类似于Autocad的绘图功能,在此之前先看一下圆弧形状类的描述: [MxDbCircleShape圆(弧)形状类] 基于这个形状类, 我们可以实现类似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 [this.center, upPoint, downPoint, leftPoint, rightPoint];
- }
- /**
- * 移动自定义对象的夹点.
- * @param
- * @returns boolean
- */
- moveGripPointsAt(index: number, offset: THREE.Vector3) {
- const [center, upPoint, downPoint, leftPoint, rightPoint] =
- 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>
复制代码属性列表如下: 需要注意的是,MxDbCircleShape继承自 绘制圆的方法方法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 = 0 a2 * cx + b2 * cy + c2 * cz + d2 = 0 a3 * 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源码:篇幅限制,更多的内容请查询梦想CAD控件
|