在線(xiàn)CAD（mxdraw庫）如何自定義一個(gè)等腰三角形

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

1.我們知道要構成三角形一定是需要三個(gè)點(diǎn)的, 所以我們可以通過(guò)mxdraw庫提供的自定義形狀類(lèi)MxDbShape擴展出一個(gè)三角形。

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

import { MxDbShape } from "mxdraw"

// ...其他內容

export class MxDbTriangle extends MxDbShape {

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

     points: THREE.Vector3[] = []

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

    //  我們直接重寫(xiě)getShapePoints 方法, 這樣就可以直接把三個(gè)點(diǎn)渲染出來(lái)了

    getShapePoints(): THREE.Vector3[] {

        return this.points

    }

}

以上就是實(shí)現了一個(gè)普通三角形類(lèi), 只需要往points中添加3個(gè)點(diǎn),就會(huì )構成一個(gè)三角形, 你也可以用其他屬性表示三角形的三個(gè)點(diǎn)，比如point1、 point2 、point3；

2）但是這個(gè)三角形只是一個(gè)靜態(tài)的三角形,你不能對三角形的三個(gè)點(diǎn)進(jìn)行移動(dòng),也不能移動(dòng)整個(gè)三角形；

3）因此我們還可以再重寫(xiě)幾個(gè)方法,讓它支持再畫(huà)布上移動(dòng)三角形或者構成三角形的點(diǎn)，代碼如下：

import { MxDbShape } from "mxdraw"

export class MxDbTriangle extends MxDbShape {

  // ...

  // 計算一下三角形的中間位置 這樣我們我們就可以通過(guò)中點(diǎn)控制整個(gè)三角形的位置

  getCenter() {

        const _points = this.getShapePoints()

        // 計算點(diǎn)的數量

        const numPoints = _points.length;

        // 計算所有點(diǎn)的向量之和

        let sum = new THREE.Vector3();

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

            sum.add(_points[i]);

        }

        const center = sum.divideScalar(numPoints);

        return center

  }

  // 返回可以操作和移動(dòng)的多個(gè)點(diǎn)坐標, 只有知道要操作的點(diǎn)在上面位置才能進(jìn)行操作呀

   getGripPoints() {

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

    }

    // 這里就開(kāi)始移動(dòng)點(diǎn)的位置了 offset就是鼠標點(diǎn)擊操作點(diǎn)后的偏移量， 我們就可以通過(guò)add的方式改變點(diǎn)的位置了

    // 那么如果是中點(diǎn)的話(huà)，我們就把三角形的三個(gè)點(diǎn)都進(jìn)行偏移， 這樣就實(shí)現移動(dòng)整個(gè)三角形的功能了

    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.有了三角形，那么我們再思考等腰三角形是什么樣的呢? 以下只是其中一種實(shí)現方式，你也可以通過(guò)其他方式實(shí)現。

1）首先等腰三角形也是三角形， 所以我們用三個(gè)點(diǎn)來(lái)表示等腰三角形的三個(gè)點(diǎn)， 分別是底部開(kāi)始點(diǎn)和結束點(diǎn)以及頂點(diǎn)。

2）我們需要先知道中點(diǎn)，去計算這個(gè)三角形的高度， 然后通過(guò)三個(gè)點(diǎn)的位置關(guān)系確認三角形的方向，最好得到三角形的實(shí)際頂點(diǎn)位置，代碼如下：

// 等腰三角形

export class MxDbIsoscelesTriangle extends MxDbTriangle {

    protected _propertyDbKeys = [...this._propertyDbKeys]

    getShapePoints() {

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

        // 計算等腰三角形底邊的中點(diǎn)

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

        // 計算高度和頂點(diǎn)位置

        const height = topPoint.distanceTo(midpoint);

        // 計算topPoint相對于baseStart和baseEnd的位置關(guān)系

        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);

        // 將三個(gè)點(diǎn)按照逆時(shí)針?lè )较蚺帕?/span>

        const _points = [baseStart, baseEnd, vertex];

        return _points;

    }

    getGripPoints() {

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

    }

}

以上就是實(shí)現一個(gè)等腰三角形的全部過(guò)程。

3.那么我們要在畫(huà)布上畫(huà)出這個(gè)等腰三角形應該如何實(shí)現呢？

1）首先我們需要點(diǎn)擊一個(gè)按鈕, 表示開(kāi)始畫(huà)等腰三角形；

2）然后我們需要監聽(tīng)canvas上的點(diǎn)擊事件， 并記錄點(diǎn)擊位置轉換成three.js坐標；

3）最后將坐標值添加到MxDbIsoscelesTriangle實(shí)例中。

我們需要三個(gè)點(diǎn)的位置坐標，所以需要監聽(tīng)三次點(diǎn)擊。上述步驟比較繁瑣, 為此mxdraw庫提供了MrxDbgUiPrPoint 來(lái)幫助我們簡(jiǎn)化上述步驟，代碼如下：

// 等腰三角形

export class MxDbIsoscelesTriangle extends MxDbTriangle {

    protected _propertyDbKeys = [...this._propertyDbKeys]

    getShapePoints() {

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

        // 計算等腰三角形底邊的中點(diǎn)

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

        // 計算高度和頂點(diǎn)位置

        const height = topPoint.distanceTo(midpoint);

        // 計算topPoint相對于baseStart和baseEnd的位置關(guān)系

        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);

        // 將三個(gè)點(diǎn)按照逆時(shí)針?lè )较蚺帕?/span>

        const _points = [baseStart, baseEnd, vertex];

        return _points;

    }

    getGripPoints() {

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

    }

}

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

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

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

試試點(diǎn)擊中間夾點(diǎn)移動(dòng)等腰三角形，效果如下圖：

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

最后沒(méi)有問(wèn)題，我們可以通過(guò)在項目根目錄運行命令:

npm run build

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