圖形編輯器：旋轉(zhuǎn)選中的元素

作者：前端西瓜哥 2023-01-18 08:30:40

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

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

最近更文比較少，是因為本人在做個人開源項目，用 Canvas 做一個設(shè)計工具，做個乞丐版 figma。期間遇到了不少問題，在這里記錄一下。

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

項目地址：
https://github.com/F-star/suika
線上體驗：
https://blog.fstars.wang/app/suika/

元素和它的包圍盒（bBox）

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

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

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

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

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

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

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

bBox

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

bBoxWithoutRotation

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

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

對于多個元素，情況則不同了，因為不同的元素有不同的旋轉(zhuǎn)角度，所以要計算所有元素的 bBox，然后取出其中最小的 x、y 和最大的 x、y，組成包圍所有元素的選中框：

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

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

旋轉(zhuǎn)單個元素

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

求向量角度

這里我們可以用 點積公式 來計算這個夾角。

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

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

旋轉(zhuǎn)多個元素

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

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

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

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

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

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

element.rotation = prevElementRotation + dRotation;

然后是計算每個元素新的 x 和 y 值。

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

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

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

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

責(zé)任編輯：姜華來源：前端西瓜哥