大家好，我是前端西瓜哥。

最近更文比較少，是因?yàn)楸救嗽谧鰝€(gè)人開源項(xiàng)目，用 Canvas 做一個(gè)設(shè)計(jì)工具，做個(gè)乞丐版 figma。期間遇到了不少問題，在這里記錄一下。

今天開始會(huì)恢復(fù)高頻更新的，一兩天一更。內(nèi)容主要會(huì)圍繞我打造的設(shè)計(jì)工具遇到的一些問題和解決方案，也會(huì)有其他主題。

項(xiàng)目地址：

https://github.com/F-star/suika

線上體驗(yàn)：

https://blog.fstars.wang/app/suika/

元素和它的包圍盒（bBox）

元素指的是一些圖形，比如矩形、橢圓。

為了方便描述，后面都會(huì)用矩形作為例子。

元素有一個(gè)包圍盒（Bounding Box），是能包裹元素的最小矩形。當(dāng)然大一點(diǎn)也行，但必須能包裹元素。

const bBox = {
  x: 100,
  y: 100,
  width: 30,
  height: 40
}

x 和 y 代表包圍盒的位置，width 和 height 代表盒子的尺寸。

另外元素一個(gè) rotation 屬性，表示元素以其中心位置（即包圍盒的正中心）的旋轉(zhuǎn)弧度。

bBox 是考慮旋轉(zhuǎn)的（最外層的矩形）：

bBox

還有一種不考慮旋轉(zhuǎn)，我暫且稱其為 bBoxWithoutRotation。它會(huì)忽視 rotation 的存在，得到一個(gè)旋轉(zhuǎn)前的 bBox。我們使用它配合渲染層（ctx.rotate(angle)），繪制一個(gè)進(jìn)行了旋轉(zhuǎn)的盒子。

bBoxWithoutRotation

選中元素

選中的元素需要分兩種情況討論，一種是選中單個(gè)元素，一種是選中多個(gè)元素。

對(duì)于單個(gè)元素，要繪制 bBoxWithoutRotation。原因是只有一個(gè)元素，也就一個(gè)旋轉(zhuǎn)角度，旋轉(zhuǎn)起來更能表現(xiàn)這個(gè)元素的情況。見下圖：

對(duì)于多個(gè)元素，情況則不同了，因?yàn)椴煌脑赜胁煌男D(zhuǎn)角度，所以要計(jì)算所有元素的 bBox，然后取出其中最小的 x、y 和最大的 x、y，組成包圍所有元素的選中框：

旋轉(zhuǎn)元素

旋轉(zhuǎn)元素同樣分兩種情況討論：旋轉(zhuǎn)單個(gè)元素，以及旋轉(zhuǎn)多個(gè)元素。

先講解 旋轉(zhuǎn)單個(gè)元素。我們看看效果：

旋轉(zhuǎn)單個(gè)元素

首先，從圖形的中點(diǎn)連接光標(biāo)位置，得到一個(gè)向量。我們的旋轉(zhuǎn)角度就是這個(gè)向量和向上向量（即 [0, -1]）的夾角。

求向量角度

這里我們可以用 點(diǎn)積公式 來計(jì)算這個(gè)夾角。

計(jì)算好這個(gè)夾角，將其賦值給選中的元素的 rotation 屬性，然后進(jìn)行渲染，讓渲染引擎根據(jù)新的角度進(jìn)行繪制。

然后是 旋轉(zhuǎn)多個(gè)元素。效果：

旋轉(zhuǎn)多個(gè)元素

旋轉(zhuǎn)多個(gè)元素則復(fù)雜一些。

我們需要改變每個(gè)元素的旋轉(zhuǎn)角度 rotation，以及 x、y 值。

這里我們需要知道一個(gè)很重要的信息：元素上所有的點(diǎn)的旋轉(zhuǎn)結(jié)果坐標(biāo)，都是根據(jù)大包圍盒中心旋轉(zhuǎn) rotation 得到的。

首先是 rotation，旋轉(zhuǎn)中心是這個(gè)大 bBox 的中心。

我們從元素的中點(diǎn)畫一個(gè)向上的向量，這個(gè)向量是跟隨著多元素旋轉(zhuǎn)角度改變的。

所以，和單元素直接賦值不同，多元素旋轉(zhuǎn)情況下，拖拽中產(chǎn)生的旋轉(zhuǎn)角度需要作為增量，加在每個(gè)旋轉(zhuǎn)前的元素起始角度上，即：

element.rotation = prevElementRotation + dRotation;

然后是計(jì)算每個(gè)元素 新的 x 和 y 值。

也很簡(jiǎn)單，對(duì)旋轉(zhuǎn)前的中點(diǎn) cx 和 cy，使用旋轉(zhuǎn)算法，計(jì)算出新的 cx 和 cy ，然后減去寬高/2即可。

需要實(shí)現(xiàn)的算法

在這個(gè)過程中你需要實(shí)現(xiàn)的算法有：

1. 求向量夾角，需要用點(diǎn)積公式。
2. 旋轉(zhuǎn)算法，需要考慮旋轉(zhuǎn)中心。
3. 計(jì)算 bBox，其實(shí)就是將 bBox 轉(zhuǎn)換為 4 個(gè)邊角的坐標(biāo)，然后取最小的 x、y 和最大的 x、y 重新組合成一個(gè) box。

然后其他就是繁瑣的交互邏輯了。

結(jié)尾

至此，我們就實(shí)現(xiàn)了元素的旋轉(zhuǎn)邏輯。晚點(diǎn)我會(huì)再出一篇縮放元素的文章。