图形编辑器:旋转选中的元素

开发 前端
元素有一个包围盒(Bounding Box),是能包裹元素的最小矩形。当然大一点也行,但必须能包裹元素。

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

最近更文比较少,是因为本人在做个人开源项目,用 Canvas 做一个设计工具,做个乞丐版 figma。期间遇到了不少问题,在这里记录一下。

今天开始会恢复高频更新的,一两天一更。内容主要会围绕我打造的设计工具遇到的一些问题和解决方案,也会有其他主题。

项目地址:

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

线上体验:

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

元素和它的包围盒(bBox)

元素指的是一些图形,比如矩形、椭圆。

为了方便描述,后面都会用矩形作为例子。

元素有一个包围盒(Bounding Box),是能包裹元素的最小矩形。当然大一点也行,但必须能包裹元素。

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

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

另外元素一个 rotation 属性,表示元素以其中心位置(即包围盒的正中心)的旋转弧度。

bBox 是考虑旋转的(最外层的矩形):

图片

bBox

还有一种不考虑旋转,我暂且称其为 bBoxWithoutRotation。它会忽视 rotation 的存在,得到一个旋转前的 bBox。我们使用它配合渲染层(ctx.rotate(angle)),绘制一个进行了旋转的盒子。

图片

bBoxWithoutRotation

选中元素

选中的元素需要分两种情况讨论,一种是选中单个元素,一种是选中多个元素。

对于单个元素,要绘制 bBoxWithoutRotation。原因是只有一个元素,也就一个旋转角度,旋转起来更能表现这个元素的情况。见下图:

图片

对于多个元素,情况则不同了,因为不同的元素有不同的旋转角度,所以要计算所有元素的 bBox,然后取出其中最小的 x、y 和最大的 x、y,组成包围所有元素的选中框:

图片

旋转元素

旋转元素同样分两种情况讨论:旋转单个元素,以及旋转多个元素。

先讲解 旋转单个元素。我们看看效果:

图片

旋转单个元素

首先,从图形的中点连接光标位置,得到一个向量。我们的旋转角度就是这个向量和向上向量(即 [0, -1])的夹角。

图片

求向量角度

这里我们可以用 点积公式 来计算这个夹角。

计算好这个夹角,将其赋值给选中的元素的 rotation 属性,然后进行渲染,让渲染引擎根据新的角度进行绘制。

然后是 旋转多个元素。效果:

图片

旋转多个元素

旋转多个元素则复杂一些。

我们需要改变每个元素的旋转角度 rotation,以及 x、y 值。

这里我们需要知道一个很重要的信息:元素上所有的点的旋转结果坐标,都是根据大包围盒中心旋转 rotation 得到的。

首先是 rotation,旋转中心是这个大 bBox 的中心。

我们从元素的中点画一个向上的向量,这个向量是跟随着多元素旋转角度改变的。

所以,和单元素直接赋值不同,多元素旋转情况下,拖拽中产生的旋转角度需要作为增量,加在每个旋转前的元素起始角度上,即:

element.rotation = prevElementRotation + dRotation;

然后是计算每个元素 新的 x 和 y 值。

也很简单,对旋转前的中点 cx 和 cy,使用旋转算法,计算出新的 cx 和 cy ,然后减去宽高/2即可。

需要实现的算法

在这个过程中你需要实现的算法有:

  1. 求向量夹角,需要用点积公式。
  2. 旋转算法,需要考虑旋转中心。
  3. 计算 bBox,其实就是将 bBox 转换为 4 个边角的坐标,然后取最小的 x、y 和最大的 x、y 重新组合成一个 box。

然后其他就是繁琐的交互逻辑了。

结尾

至此,我们就实现了元素的旋转逻辑。晚点我会再出一篇缩放元素的文章。

责任编辑:姜华 来源: 前端西瓜哥
相关推荐

2011-01-10 16:17:49

2023-01-17 09:16:57

视口坐标图形编辑器

2010-03-24 09:20:07

CentOS vi编辑

2011-03-22 13:54:57

UbuntuPHP编辑器

2013-06-18 01:22:46

CocoStudio工Cocos2d-x

2017-03-09 11:45:16

LinuxVim编辑器

2018-09-25 09:25:11

Vim编辑器命令

2020-10-14 14:00:39

VIM编辑器

2018-05-11 14:59:21

LinuxVim编辑器

2022-01-04 08:16:49

编辑器在线编辑开发

2020-09-18 06:00:51

开源Markdown编辑器

2022-05-31 14:46:02

Ruby编码线上编辑器

2009-12-04 17:07:49

SlickEdit

2020-11-02 11:21:35

Python编辑器代码

2009-06-11 10:03:57

NetBeans代码

2009-12-14 15:56:40

网页编辑器Bluefi

2009-02-26 08:54:50

FCKeditorHTML编辑器

2013-09-10 16:02:59

Elipse编辑器

2013-05-21 09:47:15

编辑器IDE程序员

2011-09-07 09:30:46

Lua编辑器Scite
点赞
收藏

51CTO技术栈公众号