在線CAD（mxdraw庫）如何自定義一個等腰三角形

網頁CAD可以通過瀏覽器對DWG圖紙進行交互和操作,用戶無需下載和安裝 CAD應用程序,而是在Web界面上直接瀏覽、修改、交互和保存CAD圖紙。目前網頁版CAD已經成為一種流行的設計工具,許多設計師和工程師都在使用它進行設計工作,下面我們使用夢想CAD云圖（H5在線CAD）完成一個自定義等腰三角形的圖形。

1.我們知道要構成三角形一定是需要三個點的, 所以我們可以通過mxdraw庫提供的自定義形狀類MxDbShape擴展出一個三角形。

1）首先我們在src/App.vue文件中找打<script setup></script>中的內容繼續往下寫，代碼如下：

import { MxDbShape } from "mxdraw"

// ...其他內容

export class MxDbTriangle extends MxDbShape {

     // 這是必須的,這里相當于增加了一個傳輸值 points屬性, 這個points就表示三個點的坐標位置

     points: THREE.Vector3[] = []

     protected _propertyDbKeys = [...this._propertyDbKeys, "points"]

    //  我們直接重寫getShapePoints 方法, 這樣就可以直接把三個點渲染出來了

    getShapePoints(): THREE.Vector3[] {

        return this.points

    }

}

以上就是實現了一個普通三角形類, 只需要往points中添加3個點,就會構成一個三角形, 你也可以用其他屬性表示三角形的三個點，比如point1、 point2 、point3；

2）但是這個三角形只是一個靜態的三角形,你不能對三角形的三個點進行移動,也不能移動整個三角形；

3）因此我們還可以再重寫幾個方法,讓它支持再畫布上移動三角形或者構成三角形的點，代碼如下：

import { MxDbShape } from "mxdraw"

export class MxDbTriangle extends MxDbShape {

  // ...

  // 計算一下三角形的中間位置 這樣我們我們就可以通過中點控制整個三角形的位置

  getCenter() {

        const _points = this.getShapePoints()

        // 計算點的數量

        const numPoints = _points.length;

        // 計算所有點的向量之和

        let sum = new THREE.Vector3();

        for (let i = 0; i < numPoints; i++) {

            sum.add(_points[i]);

        }

        const center = sum.divideScalar(numPoints);

        return center

  }

  // 返回可以操作和移動的多個點坐標, 只有知道要操作的點在上面位置才能進行操作呀

   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)

        }

        return true

    }

}

2.有了三角形，那么我們再思考等腰三角形是什么樣的呢? 以下只是其中一種實現方式，你也可以通過其他方式實現。

1）首先等腰三角形也是三角形， 所以我們用三個點來表示等腰三角形的三個點， 分別是底部開始點和結束點以及頂點。

2）我們需要先知道中點，去計算這個三角形的高度， 然后通過三個點的位置關系確認三角形的方向，最好得到三角形的實際頂點位置，代碼如下：

// 等腰三角形

export class MxDbIsoscelesTriangle extends MxDbTriangle {

    protected _propertyDbKeys = [...this._propertyDbKeys]

    getShapePoints() {

        const [baseStart, baseEnd, topPoint] = this.points

        // 計算等腰三角形底邊的中點

        const midpoint = baseStart.clone().add(baseEnd).multiplyScalar(0.5);

        // 計算高度和頂點位置

        const height = topPoint.distanceTo(midpoint);

        // 計算topPoint相對于baseStart和baseEnd的位置關系

        const baseVector = new THREE.Vector3().subVectors(baseEnd, baseStart).normalize();

        const perpendicularVector = new THREE.Vector3().crossVectors(baseVector, new THREE.Vector3(0, 0, 1)).normalize();

        const direction = new THREE.Vector3().subVectors(topPoint, midpoint).dot(perpendicularVector);

        const vertex = 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 來幫助我們簡化上述步驟，代碼如下：

// 等腰三角形

export class MxDbIsoscelesTriangle extends MxDbTriangle {

    protected _propertyDbKeys = [...this._propertyDbKeys]

    getShapePoints() {

        const [baseStart, baseEnd, topPoint] = this.points

        // 計算等腰三角形底邊的中點

        const midpoint = baseStart.clone().add(baseEnd).multiplyScalar(0.5);

        // 計算高度和頂點位置

        const height = topPoint.distanceTo(midpoint);

        // 計算topPoint相對于baseStart和baseEnd的位置關系

        const baseVector = new THREE.Vector3().subVectors(baseEnd, baseStart).normalize();

        const perpendicularVector = new THREE.Vector3().crossVectors(baseVector, new THREE.Vector3(0, 0, 1)).normalize();

        const direction = new THREE.Vector3().subVectors(topPoint, midpoint).dot(perpendicularVector);

        const vertex = midpoint.clone().addScaledVector(perpendicularVector, direction >= 0 ? height : -height);

        // 將三個點按照逆時針方向排列

        const _points = [baseStart, baseEnd, vertex];

        return _points;

    }

    getGripPoints() {

        return [...this.getShapePoints(), this.getCenter()]

    }

}

4）我們將這個函數放在一個按鈕的點擊事件中，在App.vue的<template></template>中繼續新增代碼:

<button @click="drawTriangle">繪制等腰三角形</button>

現在就可以看看畫等腰三角形的功能是否實現了，效果如下圖：

試試點擊中間夾點移動等腰三角形，效果如下圖：

4.我們最后總結一下，首先需要先搭建一個在線CAD的網頁，在網頁上可以繪制自定義的等腰三角形，其次需要Node環境、Vite前端工程化項目、使用mxdraw、對CAD圖紙進行轉換、實現自定義形狀，而自定義形狀，我們先定義了三角形，又根據三角形定義了等腰三角形的類。在效果圖中，我們可以看見等腰三角形是有描邊效果和填充效果，這些都是自定義形狀的基類提供的功能，只需要設置對應的屬性就可以實現對應的效果。

最后沒有問題，我們可以通過在項目根目錄運行命令:

npm run build

打包文件用打包線上的版本前端資源，在dist目錄中是具體打包后的代碼。