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

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

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

1）首先我們?cè)?/span>src/App.vue文件中找打<script setup></script>中的內(nèi)容繼續(xù)往下寫，代碼如下：

import { MxDbShape } from "mxdraw"

// ...其他內(nèi)容

export class MxDbTriangle extends MxDbShape {

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

     points: THREE.Vector3[] = []

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

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

    getShapePoints(): THREE.Vector3[] {

        return this.points

    }

}

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

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

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

import { MxDbShape } from "mxdraw"

export class MxDbTriangle extends MxDbShape {

  // ...

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

  getCenter() {

        const _points = this.getShapePoints()

        // 計(jì)算點(diǎn)的數(shù)量

        const numPoints = _points.length;

        // 計(jì)算所有點(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)坐標(biāo), 只有知道要操作的點(diǎn)在上面位置才能進(jìn)行操作呀

   getGripPoints() {

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

    }

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

    // 那么如果是中點(diǎn)的話，我們就把三角形的三個(gè)點(diǎn)都進(jìn)行偏移， 這樣就實(shí)現(xiàn)移動(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.有了三角形，那么我們?cè)偎伎嫉妊切问鞘裁礃拥哪? 以下只是其中一種實(shí)現(xiàn)方式，你也可以通過其他方式實(shí)現(xiàn)。

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

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

// 等腰三角形

export class MxDbIsoscelesTriangle extends MxDbTriangle {

    protected _propertyDbKeys = [...this._propertyDbKeys]

    getShapePoints() {

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

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

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

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

        const height = topPoint.distanceTo(midpoint);

        // 計(jì)算topPoint相對(duì)于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í)針方向排列

        const _points = [baseStart, baseEnd, vertex];

        return _points;

    }

    getGripPoints() {

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

    }

}

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

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

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

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

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

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

// 等腰三角形

export class MxDbIsoscelesTriangle extends MxDbTriangle {

    protected _propertyDbKeys = [...this._propertyDbKeys]

    getShapePoints() {

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

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

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

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

        const height = topPoint.distanceTo(midpoint);

        // 計(jì)算topPoint相對(duì)于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í)針方向排列

        const _points = [baseStart, baseEnd, vertex];

        return _points;

    }

    getGripPoints() {

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

    }

}

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

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

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

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

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

最后沒有問題，我們可以通過在項(xiàng)目根目錄運(yùn)行命令:

npm run build

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