QQ登录

只需一步,快速开始

快捷登录

登录 或者 注册 请先

UG爱好者

查看: 825|回复: 1
打印 上一主题 下一主题

[经典资料] 网页CAD的mxdraw库实现Autocad中的圆

[复制链接]

中尉

Rank: 5Rank: 5

299

主题

319

帖子

3984

积分

活跃会员

跳转到指定楼层
楼主
发表于 2023-8-18 10:49:33 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
前言
Web端显示CAD图纸的应用场景很广泛,单纯的浏览DWG逐渐满足不了用户的实际需求,浏览的同时再加上简单的绘制和批注更符合大家的应用场景,接下来我们讲一下如何利用Mxdraw库实现AutoCAD中的画圆命令。
首先我们知道DWG图纸要在网页上显示需要安装转换程序,在测试开始之前,我们要熟悉转换方法和原理,请查看快速入门中的《如何在自己系统中浏览dwg文件》章节,如下图所示:
如果还有疑问可以查看:https://help.mxdraw.com/?pid=107中《mxdraw前端库预览图纸》章节,如下图:
关于[MxDbCircleShape]
mxdraw库是一款用于绘制CAD图形的JavaScript库,它提供了一系列的图形形状类,可以实现类似于Autocad的绘图功能,在此之前先看一下圆弧形状类的描述:
[MxDbCircleShape圆(弧)形状类]
基于这个形状类, 我们可以实现类似autocad绘制圆的功能,首先我们先通过继承类的方式,为圆提供可以改变这个圆的夹点,代码如下:
  1. <font size="3">import { MxDbCircleShape } from "mxdraw";

  2. class MxDbCircle extends MxDbCircleShape {

  3.    /**是否闭合到中心位置 */

  4.   isClosedToCenter = false

  5.   /**

  6.    * 返回自定义对象的夹点.

  7.    * @param

  8.    * @returns Array<THREE.Vector3>

  9.    */

  10.   getGripPoints() {

  11.     const { x, y, z } = this.center;

  12.     // 计算圆的上下左右夹点

  13.     let upPoint = new THREE.Vector3(x, y + this.radius, z),

  14.       downPoint = new THREE.Vector3(x, y - this.radius, z),

  15.       leftPoint = new THREE.Vector3(x - this.radius, y, z),

  16.       rightPoint = new THREE.Vector3(x + this.radius, y, z);



  17.     return [this.center, upPoint, downPoint, leftPoint, rightPoint];

  18.   }

  19.   /**

  20.    * 移动自定义对象的夹点.

  21.    * @param

  22.    * @returns boolean

  23.    */

  24.   moveGripPointsAt(index: number, offset: THREE.Vector3) {

  25.     const [center, upPoint, downPoint, leftPoint, rightPoint] =

  26.       this.getGripPoints();

  27.     // 改变上下左右的夹点则改变radius半径

  28.     if (index === 0) this.center = center.add(offset);

  29.     if (index === 1) this.radius = upPoint.add(offset).distanceTo(this.center);

  30.     if (index === 2)

  31.       this.radius = downPoint.add(offset).distanceTo(this.center);

  32.     if (index === 3)

  33.       this.radius = leftPoint.add(offset).distanceTo(this.center);

  34.     if (index === 4)

  35.       this.radius = rightPoint.add(offset).distanceTo(this.center);

  36.     return true;

  37.   }

  38. }</font>
复制代码
属性列表如下:
属性名
类型
描述
center           
Vector3
圆心坐标         
radius
number
圆半径
startAngle
number
弧开始角度
endAngle
number
弧结束角度
clockwise
boolean
是否以顺时针方向创建(扫过)弧线
isClosedToCenter
boolean
是否闭合到中心位置
需要注意的是,MxDbCircleShape继承自
[MxDbEllipseShape](https://mxcadx.gitee.io/mxdraw_api_docs/classes/MxDbEllipseShape.html),因此MxDbCircleShape也拥有MxDbEllipseShape的所有属性。我们只需要知道圆心和半径就可与直接绘制一个圆了。
绘制圆的方法方法1:两点绘制圆
参考代码如下:
  1. <font size="3">import { MrxDbgUiPrPoint, MxFun, MxDbCircleShape, McEdGetPointWorldDrawObject, } from "mxdraw";

  2. const drawCircleAtTwoPoints = async () => {

  3.     const getPoint = new MrxDbgUiPrPoint();

  4.     const circle = new MxDbCircle();

  5.     // 直接确定圆心

  6.     circle.center = await getPoint.go()

  7.     getPoint.setUserDraw(

  8.         (

  9.             currentPoint: THREE.Vector3,

  10.             pWorldDraw: McEdGetPointWorldDrawObject

  11.         )=> {

  12.             // 根据圆心和圆弧上任意一点确定半径

  13.             circle.radius = circle.center.distanceTo(currentPoint)

  14.             pWorldDraw.drawCustomEntity(circle);

  15.             // 再绘制一根圆弧和圆心的连接线表示现在正在确定半径

  16.             pWorldDraw.drawLine(circle.center, currentPoint);

  17.         }

  18.     );

  19.     // 确定最后绘制的圆的半径

  20.     circle.radius = circle.center.distanceTo(await getPoint.go())

  21.     MxFun.getCurrentDraw().addMxEntity(circle);

  22. }

  23. 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控件

有奖推广贴子: 

回复

使用道具 举报

中尉

Rank: 5Rank: 5

299

主题

319

帖子

3984

积分

活跃会员

沙发
 楼主| 发表于 2023-9-1 14:20:00 | 只看该作者
在线CAD编辑版DEMO:https://demo.mxdraw3d.com:3000/mxcad/  (谷歌打开)

展示效果.png (47.87 KB, 下载次数: 56)

展示效果.png
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

 
 
QQ:1359218528
工作时间:
9:00-17:00
 
微信公众号
手机APP
机械社区
微信小程序

手机版|UG爱好者论坛 ( 京ICP备10217105号-2 )    论坛管理员QQ:1359218528

本站信息均由会员发表,不代表本网站立场,如侵犯了您的权利请联系管理员,邮箱:1359218528@qq.com  

Powered by UG爱好者 X3.2  © 2001-2014 Comsenz Inc. GMT+8, 2024-11-8 23:11

返回顶部