前言

网页版 CAD 是指可以在 Web 浏览器中运行的计算机辅助设计软件,也被称为 Web CAD，它可以通过网页浏览器进行交互和操作,使用户无需下载和安装 CAD 应用程序,而是在 Web 界面上直接浏览、修改、交互和保存CAD图纸。目前网页版 CAD 已经成为一种流行的设计工具,许多设计师和工程师都在使用它进行设计工作。但是由于网页版 CAD 的功能和性能限制,它相对于桌面版 CAD 仍然有一定的局限性,下面我们使用行业内代表产品梦想CAD云图（H5在线CAD），完成一个自定义等腰三角形的图形。

写一个等腰三角形的形状类

1.我们知道要构成三角形一定是需要三个点的, 所以我们可以通过mxdraw库提供的自定义形状类MxDbShape扩展出一个三角形。

1）首先我们在src/App.vue文件中找到中的内容继续往下写，代码如下：

import{ MxDbShape} from"mxdraw"
// ...其他内容
exportclassMxDbTriangleextendsMxDbShape{
// 这是必须的,这里相当于增加了一个传输值 points属性, 这个points就表示三个点的坐标位置
points: THREE.Vector3[] = []
protected_propertyDbKeys= [...this._propertyDbKeys, "points"]
// 我们直接重写getShapePoints 方法, 这样就可以直接把三个点渲染出来了
getShapePoints(): THREE.Vector3[] {
returnthis.points

以上就是实现了一个普通三角形类, 只需要往points中添加3个点,就会构成一个三角形, 你也可以用其他属性表示三角形的三个点，比如point1、point2 、point3；

2）但是这个三角形只是一个静态的三角形,你不能对三角形的三个点进行移动,也不能移动整个三角形；

3）因此我们还可以再重写几个方法,让它支持再画布上移动三角形或者构成三角形的点，代码如下：

import{ MxDbShape} from"mxdraw"
exportclassMxDbTriangleextendsMxDbShape{
// 计算一下三角形的中间位置 这样我们我们就可以通过中点控制整个三角形的位置
getCenter() {
const_points= this.getShapePoints()
// 计算点的数量
constnumPoints= _points.length;
// 计算所有点的向量之和
letsum= newTHREE.Vector3();
for(leti= 0; i< numPoints; i++) {
sum.add(_points[i]);
constcenter= sum.divideScalar(numPoints);
returncenter
// 返回可以操作和移动的多个点坐标, 只有知道要操作的点在上面位置才能进行操作呀
getGripPoints() {
return[...this.points, this.getCenter()]
// 这里就开始移动点的位置了 offset就是鼠标点击操作点后的偏移量， 我们就可以通过add的方式改变点的位置了
// 那么如果是中点的话，我们就把三角形的三个点都进行偏移， 这样就实现移动整个三角形的功能了
moveGripPointsAt(index: number, offset: THREE.Vector3): boolean{
if(index=== 3) {
this.points= [this.points[0].clone().add(offset), this.points[1].clone().add(offset), this.points[2].clone().add(offset)]
} else{
this.points[index] = this.points[index].clone().add(offset)
returntrue

2.有了三角形，那么我们再思考等腰三角形是什么样的呢? 以下只是其中一种实现方式，你也可以通过其他方式实现。

1）首先等腰三角形也是三角形， 所以我们用三个点来表示等腰三角形的三个点， 分别是底部开始点和结束点以及顶点。

2）我们需要先知道中点，去计算这个三角形的高度， 然后通过三个点的位置关系确认三角形的方向，最好得到三角形的实际顶点位置，代码如下：

// 等腰三角形
exportclassMxDbIsoscelesTriangleextendsMxDbTriangle{
protected_propertyDbKeys= [...this._propertyDbKeys]
getShapePoints() {
const[baseStart, baseEnd, topPoint] = this.points
// 计算等腰三角形底边的中点
constmidpoint= baseStart.clone().add(baseEnd).multiplyScalar(0.5);
// 计算高度和顶点位置
constheight= topPoint.distanceTo(midpoint);
// 计算topPoint相对于baseStart和baseEnd的位置关系
constbaseVector= newTHREE.Vector3().subVectors(baseEnd, baseStart).normalize();
constperpendicularVector= newTHREE.Vector3().crossVectors(baseVector, newTHREE.Vector3(0, 0, 1)).normalize();
constdirection= newTHREE.Vector3().subVectors(topPoint, midpoint).dot(perpendicularVector);
constvertex= midpoint.clone().addScaledVector(perpendicularVector, direction>= 0? height: -height);
// 将三个点按照逆时针方向排列
const_points= [baseStart, baseEnd, vertex];
return_points;
getGripPoints() {
return[...this.getShapePoints(), this.getCenter()]

以上就是实现一个等腰三角形的全部过程。

3.那么我们要在画布上画出这个等腰三角形应该如何实现呢？

1）首先我们需要点击一个按钮, 表示开始画等腰三角形；

2）然后我们需要监听canvas上的点击事件， 并记录点击位置转换成three.js坐标；

3）最后将坐标值添加到MxDbIsoscelesTriangle实例中。

我们需要三个点的位置坐标，所以需要监听三次点击。上述步骤比较繁琐, 为此mxdraw库提供了MrxDbgUiPrPoint 来帮助我们简化上述步骤，代码如下：

  • import { MrxDbgUiPrPoint } from "mxdraw"
  • const getPoint = new MrxDbgUiPrPoint()
  • async function drawTriangle() {
  • // 表示一个等腰三角形
  • const triangle = new MxDbIsoscelesTriangle()
  • // 这里就是获取第一个鼠标点击的位置，并自动帮你转换成three.js坐标
  • const pt1 = await getPoint.go()
  • triangle.points.push(pt1)
  • // 我们可能需要一个绘制的过程， 通过这样的方式就可以实现
  • getPoint.setUserDraw((currentPoint, draw)=> {
  • // 因为现在这个动态绘制只有两个已知点，所以无法构成三角形，我们就画一个直线，表示我们正在画三角形的底边
  • draw.drawLine(currentPoint, pt1)
  • // 这时又在屏幕上点了以下得到了pt2这个坐标
  • const pt2 = await getPoint.go()
  • triangle.points.push(pt2)
  • // 这时triangle三角形示例已经又两个点了，我们可以直接动态绘制过程绘制出这个三角形了，可以实时看见现在画出的三角形的样子。
  • getPoint.setUserDraw((currentPoint, draw)=> {
  • // 去设置三角形的最好一个点
  • triangle.points[2] = currentPoint
  • // 并且把它绘制出来
  • draw.drawCustomEntity(triangle)
  • // 最后我们再次点击屏幕，确定下这个三角形的形状
  • const pt3 = await getPoint.go()
  • triangle.points[2] = pt3
  • // 最后将它添加渲染到控件中，就完成了整个三角形的绘制
  • MxFun.getCurrentDraw().addMxEntity(triangle)
  • // 最后将这个drawTriangle函数在点击按钮时触发就可以开始画等腰三角形了

4）我们将这个函数放在一个按钮的点击事件中，在App.vue的中继续新增代码:

绘制等腰三角形button>

现在就可以看看画等腰三角形的功能是否实现了，效果如下图：

打开网易新闻 查看更多图片

试试点击中间夹点移动等腰三角形，效果如下图：

打开网易新闻 查看更多图片

4.我们最后总结一下，首先需要先搭建一个在线CAD的网页，在网页上可以绘制自定义的等腰三角形，其次需要Node环境、Vite前端工程化项目、使用mxdraw、对CAD图纸进行转换、实现自定义形状，而自定义形状，我们先定义了三角形，又根据三角形定义了等腰三角形的类。在效果图中，我们可以看见等腰三角形是有描边效果和填充效果，这些都是自定义形状的基类提供的功能，只需要设置对应的属性就可以实现对应的效果，自定义图形类的属性和方法说明请参考:

https://mxcad.github.io/mxdraw_api_docs/classes/MxDbShape.html

最后没有问题，我们可以通过在项目根目录运行命令:

npmrunbuild

打包文件用打包线上的版本前端资源，在dist目录中是具体打包后的代码。

DEMO源码链接：

https://github.com/mxcad/mxdraw-article/tree/master/mxdraw%E5%A6%82%E4%BD%95%E9%85%8D%E5%90%88three.js%E5%AE%9E%E7%8E%B0%E5%B8%A6%E7%BA%BF%E5%AE%BD%E7%9A%84%E7%BA%BF%E6%AE%B5/demo