在這篇文章中我們來了解一下“canvas怎樣實(shí)現(xiàn)邊框和控制點(diǎn)的繪制”，一些朋友可能會遇到這方面的問題，對此在下文小編向大家來講解一下，內(nèi)容詳細(xì)，易于理解，希望大家閱讀完這篇能有收獲哦，有需要的朋友就往下看吧！

在上一章中我們已經(jīng)搞定了下層畫布，也就是能夠?qū)ξ矬w進(jìn)行繪制了，現(xiàn)在就可以開始搞搞上層交互了。

不過在和畫布產(chǎn)生交互之前，我們還要做一件事情，就是讓物體支持邊框和控制點(diǎn)的繪制，亦即物體被選中時(shí)的狀態(tài)，就像下面這樣：

這樣一來如果要對物體進(jìn)行一些操作，那就變成了對上圖中的紅色和藍(lán)色邊框進(jìn)行一些操作，而邊框一定是矩形的

（很少有其他形狀的，反正我是沒咋見過），即便物體不是四四方方的，可以類比一些低代碼和可視化平臺的操作（調(diào)試頁面也是）。所以選中態(tài)是產(chǎn)生交互的前提，這個(gè)章節(jié)要搞定的就是邊框和控制點(diǎn)的繪制。

關(guān)于邊框

邊框很顯然就是用一個(gè)矩形把整個(gè)物體框起來，也就是所謂的包圍盒????。包圍盒顧名思義就是能夠把物體全部包起來的盒子，常見的有 OBB、AABB、球模型等等，按順序分別如下圖所示：

其中 AABB 最為簡單，應(yīng)用也最為廣泛，它的全稱是 Axis-aligned bounding box，也就是邊平行于坐標(biāo)軸的包圍盒，理解和計(jì)算起來都非常容易，就是取物體所有頂點(diǎn)（也可叫做離散點(diǎn)）坐標(biāo)的最大最小值，就像下面這樣：

class Utils {
    // 一個(gè)物體通常是一堆點(diǎn)的集合
    static makeBoundingBoxFromPoints(points: Point[]) {
        const xPoints = points.map(point => point.x);
        const yPoints = points.map(point => point.y);
        const minX = Util.min(xPoints);
        const maxX = Util.max(xPoints);
        const minY = Util.min(yPoints);
        const maxY = Util.max(yPoints);
        const width = Math.abs(maxX - minX);
        const height = Math.abs(maxY - minY);
        return {
            left: minX,
            top: minY,
            width: width,
            height: height,
        };
    }
}

這種包圍盒不僅易于理解、效率高，并且在碰撞檢測中效果明顯，比如一般我們判斷兩個(gè)物體是否發(fā)生碰撞通常都會先判斷它們的包圍盒是否相交，如果連包圍盒都不相交，那么兩個(gè)物體一定不相交，就不用再進(jìn)行其他精確繁瑣的計(jì)算了，是性價(jià)比很高的一種方法。事實(shí)上大部分碰撞檢測算法通常也分為這兩步（包圍盒計(jì)算+精確計(jì)算）。

當(dāng)然它的缺點(diǎn)也是比較明顯的，假如我們有一個(gè)很斜很長的三角形，那畫出來的包圍盒就比較冗余，就像下圖這樣：

這時(shí)候用 OBB（Oriented Bounding Box）包圍盒就會精確很多，就像下面這樣：

它能夠有效貼合物體，但是計(jì)算麻煩些，有興趣可以自行搜索一下。然后這里再簡單說一下球模型，就是用一個(gè)球?qū)⑽矬w包圍起來，那怎么計(jì)算這個(gè)球的大小呢，就是要算出球心和半徑，我們可以直接將所有頂點(diǎn)坐標(biāo)相加取平均值，當(dāng)做球心，再計(jì)算出離球心最遠(yuǎn)的頂點(diǎn)的距離，將其當(dāng)做半徑即可。

顯然我們采用的是 AABB 包圍盒。又因?yàn)榘鼑惺敲總€(gè)物體所共有的，所以它會被加在 FabricObject 物體基類里，并且應(yīng)該是在繪制物體之后才繪制，因?yàn)橄鄬碚f它的層級較高，當(dāng)然在 canvas 中沒有層級的概念，它就是一幅畫，只是后面繪制的會覆蓋之前繪制的，簡單看下代碼：

class FabricObject {
    render() {
        ...
        // 坐標(biāo)系變換
        this.transform(ctx);
        // 繪制物體
        this._render(ctx);
        // 如果是選中態(tài)
        if (this.active) {
            // 繪制物體邊框
            this.drawBorders(ctx);
            // 繪制物體四周的控制點(diǎn)，共⑨個(gè)
            this.drawControls(ctx);
        }
        ...
    }
}

那具體怎么繪制邊框呢？這個(gè)比較簡單，剛才也說了，它就是個(gè)普通矩形，所以矩形怎么畫它就怎么畫。

但要注意什么呢，因?yàn)槲覀兪窃?transform 之后進(jìn)行操作的，所以要考慮到 transform 的影響，主要是 scale。

比如我們放大了兩倍之后，如果不對邊框進(jìn)行處理，那畫出來的邊框線寬也會變成兩倍大，邊框?qū)挾染蜁S著 scale 的改變而改變，這顯然不是我們期望的結(jié)果，所以就需要把 scale 給縮回去，以保持邊框?qū)挾仁冀K一樣。

而相反的，邊框的寬高大小和物體本身一樣會受到 scale 的影響，當(dāng)我們把 scale 縮回去之后，繪制出來的邊框?qū)捀叽笮?yīng)該像這樣取值 this.width * this.scaleX 才能得到實(shí)際的大小，注意這里并沒有改變物體自身寬高，只是取值的時(shí)候需要簡單處理下。這里簡單貼下代碼：

class FabricObject {
    /** 繪制激活物體邊框 */
    drawBorders(ctx: CanvasRenderingContext2D): FabricObject {
        let padding = this.padding, // 邊框和物體的內(nèi)間距，也是個(gè)配置項(xiàng)，和 css 中的 padding 一個(gè)意思
            padding2 = padding * 2,
            strokeWidth = 1; // 邊框?qū)挾仁冀K是 1，不受縮放的影響，當(dāng)然可以做成配置項(xiàng)
        ctx.save();
        ctx.globalAlpha = this.isMoving ? 0.5 : 1; // 物體變換的時(shí)候使其透明度減半，提升用戶體驗(yàn)
        ctx.strokeStyle = this.borderColor;
        ctx.lineWidth = strokeWidth;
        /** 畫邊框的時(shí)候需要把 transform 變換中的 scale 效果抵消，這樣才能畫出原始大小的線條 */
        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
        let w = this.getWidth(),
            h = this.getHeight();
        // 這里直接用原生的 api strokeRect 畫邊框即可，當(dāng)然要考慮到邊寬和內(nèi)間距的影響
        // 就是畫一個(gè)規(guī)規(guī)矩矩的矩形
        ctx.strokeRect(
            (-(w / 2) - padding - strokeWidth / 2),
            (-(h / 2) - padding - strokeWidth / 2),
            (w + padding2 + strokeWidth),
            (h + padding2 + strokeWidth)
        );
        // 除了畫邊框，還要畫旋轉(zhuǎn)控制點(diǎn)和邊框相連接的那條線
        if (this.hasRotatingPoint && this.hasControls) {
            let rotateHeight = (-h - strokeWidth - padding * 2) / 2;
            ctx.beginPath();
            ctx.moveTo(0, rotateHeight);
            ctx.lineTo(0, rotateHeight - this.rotatingPointOffset); // rotatingPointOffset 是旋轉(zhuǎn)控制點(diǎn)到邊框的距離
            ctx.closePath();
            ctx.stroke();
        }
        ctx.restore();
        return this;
    }
    /** 獲取當(dāng)前大小，包含縮放效果 */
    getWidth(): number {
        return this.width * this.scaleX;
    }
    /** 獲取當(dāng)前大小，包含縮放效果 */
    getHeight(): number {
        return this.height * this.scaleY;
    }
}

有同學(xué)可能會覺得如果物體產(chǎn)生了旋轉(zhuǎn)，也還是直接畫一個(gè)規(guī)規(guī)矩矩的矩形么，不用稍微旋轉(zhuǎn)下矩形？其實(shí)不用的，正如前面所說，我們的邊框是在 transform 之后繪制的，所以已經(jīng)考慮了 transform 的影響，也就是說繪制邊框的時(shí)候坐標(biāo)系已經(jīng)變了（可以理解成變成物體自身的坐標(biāo)系），就像下面圖中這樣（扭個(gè)頭看看就正了）：

邊框還是那個(gè)普普通通的矩形，和上圖中的綠色坐標(biāo)系一個(gè)方向。

關(guān)于控制點(diǎn)

至于另外九個(gè)控制點(diǎn)，寫法和邊框差不多，也要考慮到抵消縮放的效果，只不過需要我們多計(jì)算下每個(gè)控制點(diǎn)的位置（各個(gè)頂點(diǎn)和中點(diǎn)），其實(shí)也就多畫 ⑨ 個(gè)矩形而已，這里以邊框左上角的控制點(diǎn)為例子，簡單看下代碼：

class FabricObject {
    /** 繪制控制點(diǎn) */
    drawControls(ctx: CanvasRenderingContext2D): FabricObject {
        if (!this.hasControls) return;
        // 因?yàn)楫嫴家呀?jīng)經(jīng)過變換，所以大部分?jǐn)?shù)值需要除以 scale 來抵消變換
        // 而上面那種畫邊框的操作則是把坐標(biāo)系縮放回去，寫法不同，效果是一樣的
        let size = this.cornerSize,
            size2 = size / 2,
            strokeWidth2 = this.strokeWidth / 2,
            // top 和 left 值為物體左上角的點(diǎn)
            left = -(this.width / 2),
            top = -(this.height / 2),
            _left,
            _top,
            sizeX = size / this.scaleX,
            sizeY = size / this.scaleY,
            paddingX = this.padding / this.scaleX,
            paddingY = this.padding / this.scaleY,
            scaleOffsetY = size2 / this.scaleY,
            scaleOffsetX = size2 / this.scaleX,
            scaleOffsetSizeX = (size2 - size) / this.scaleX,
            scaleOffsetSizeY = (size2 - size) / this.scaleY,
            height = this.height,
            width = this.width,
        ctx.save();
        ctx.lineWidth = this.borderWidth / Math.max(this.scaleX, this.scaleY);
        ctx.globalAlpha = this.isMoving ? 0.5 : 1;
        ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
        // top-left 左上角的控制點(diǎn)，也要考慮到線寬和 padding 的影響
        _left = left - scaleOffsetX - strokeWidth2 - paddingX;
        _top = top - scaleOffsetY - strokeWidth2 - paddingY;
        ctx.clearRect(_left, _top, sizeX, sizeY);
        ctx.fillRect(_left, _top, sizeX, sizeY);
        // 其他八個(gè)點(diǎn)...
        ctx.restore();
        return this;
    }
}

這里強(qiáng)調(diào)下上面代碼中的一個(gè)點(diǎn)：就是我們的邊框（線寬）和控制點(diǎn)（大小和線寬）不應(yīng)該隨物體縮放的改變而改變（另外兩個(gè)變換并不會改變物體大小，所以沒關(guān)系），但是我們繪制的時(shí)候已經(jīng)是在 transform 之后了，要想抵消變換有兩種方法：

• 調(diào)用 ctx.scale(1 / scaleX, 1 / scaleY) 把坐標(biāo)系縮放回去，接下來正常繪制
• 繪制的時(shí)候把線寬、大小的值除以 scale 來抵消變換

上面的邊框是包圍盒的一個(gè)簡單體現(xiàn)，后面講到 Group 類的時(shí)候還會重復(fù)一下這個(gè)包圍盒的概念?，F(xiàn)在我們已經(jīng)可以愉快的繪制物體的選中態(tài)啦！下一章節(jié)就可以開始真正的交互了，也就是 hover 和點(diǎn)選事件，算是這個(gè)系列的難點(diǎn)之一了，所以...敬請期待吧。

現(xiàn)在大家對于canvas怎樣實(shí)現(xiàn)邊框和控制點(diǎn)的繪制的內(nèi)容應(yīng)該都有一定的認(rèn)識了吧，希望這篇能對大家有所幫助。最后，想要了解更多，歡迎關(guān)注群英網(wǎng)絡(luò)，群英網(wǎng)絡(luò)將為大家推送更多相關(guān)的文章。

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• jQuery怎樣實(shí)現(xiàn)輪播效果，方法和代碼是什么？

  這篇文章給大家分享的是jQuery實(shí)現(xiàn)輪播效果的示例。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，文中的示例代碼介紹得很詳細(xì)，有需要的朋友可以參考，接下來就跟隨小編一起了解看看吧。

• JavaScript同一頁面內(nèi)與不同頁面引用對象怎么樣做

  JavaScript同一頁面內(nèi)與不同頁面引用對象怎么樣做？在實(shí)際項(xiàng)目的操作過程或是學(xué)習(xí)過程中，不少人都會遇到這樣的問題，接下來就讓小編帶大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

• CocosCreator做射擊游戲的具體過程及代碼是什么

  這篇文章主要介紹了CocosCreator制作射擊游戲，各個(gè)方面都講的比較詳細(xì)，希望同學(xué)們自己動手試一下

• 微信小程序中的底部彈出框效果怎樣做？

  這篇文章給大家分享的是微信小程序中的底部彈出框效果的實(shí)現(xiàn)。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，文中示例代碼介紹的非常詳細(xì)，感興趣的朋友接下來一起跟隨小編看看吧。

• 基于Vue框架怎樣實(shí)現(xiàn)一個(gè)帶有動畫的懸浮球

  Vue實(shí)現(xiàn)PC端靠邊懸浮球的代碼，我想把退出登錄的按鈕做成一個(gè)懸浮球的樣子，帶動畫的那種。