江苏龙网

  1. 主页 > 生活百科 > >

网页CAD的mxdraw库实现Autocad中的圆

cad

【网页CAD的mxdraw库实现Autocad中的圆】Web端显示CAD图纸的应用场景很广泛，单纯的浏览DWG逐渐满足不了用户的实际需求，浏览的同时再加上简单的绘制和批注更符合大家的应用场景，接下来我们讲一下如何利用Mxdraw库实现AutoCAD中的画圆命令 。
首先我们知道DWG图纸要在网页上显示需要安装转换程序，在测试开始之前，我们要熟悉转换方法和原理，请查看快速入门（https://help.mxdraw.com/?pid=32）中的《如何在自己系统中浏览dwg文件》章节，如下图所示：

网页CAD的mxdraw库实现Autocad中的圆

文章插图
如果还有不清楚的，可以查看：（https://help.mxdraw.com/?pid=107）中《mxdraw前端库预览图纸》章节，如下图：
网页CAD的mxdraw库实现Autocad中的圆

文章插图
关于[MxDbCircleShape]
mxdraw库是一款用于绘制CAD图形的JAVAScript库，它提供了一系列的图形形状类，可以实现类似于Autocad的绘图功能，在此之前先看一下圆弧形状类的描述：[MxDbCircleShape圆(弧)形状类]https://mxcadx.gitee.io/mxdraw_api_docs/classes/MxDbCircleShape.html 。
基于这个形状类, 我们可以实现类似autocad绘制圆的功能，首先我们先通过继承类的方式，为圆提供可以改变这个圆的夹点，代码如下：
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;
}
}
属性列表如下：
网页CAD的mxdraw库实现Autocad中的圆

文章插图
需要注意的是MxDbCircleShape继承自[MxDbEllipseShape](https://mxcadx.gitee.io/mxdraw_api_docs/classes/MxDbEllipseShape.html)，因此MxDbCircleShape也拥有MxDbEllipseShape的所有属性 。我们只需要知道圆心和半径就可与直接绘制一个圆了，在Autocad中绘制圆的方式有很多种, 下面介绍两种方式来绘制圆：
方法一：两点绘制圆
参考代码如下：
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);
// 再绘制一根圆弧和圆心的连接线表示现在正在确定半径


推荐阅读


上一篇：谷歌的Project IDX会扼杀其他应用程序开发框架吗？

下一篇：微软SAP甲骨文等全球软件巨头如何拥抱生成式AI？