图形编辑器:修改图形X、Y、Width、Height、Rotation

开发 前端
开发者理解底层,理解一个图形是先有基本的物理信息(x、y、width、height),然后再做变换(旋转、缩放等)后得到新的坐标再进行绘制。

大家好,我是前端西瓜哥。图形编辑器的一个需求,就是可以通过属性面板的输入框设置选中元素的属性值。

项目地址,欢迎 star:

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

线上体验:

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

最终效果如下:

图片

元素对象的结构:

interface IGraph {
x: number;
y: number;
width: number;
height: number;
rotation: number; // 旋转角度,单位为弧度
}

设置 x / y

UI 界面显示上说的 x / y,指的是旋转后的 x(即 rotatedX / rotatedY)。

图片

为什么不是对应真正的 x 和 y 呢?因为需要对应用户的视角。

开发者理解底层,理解一个图形是先有基本的物理信息(x、y、width、height),然后再做变换(旋转、缩放等)后得到新的坐标再进行绘制。

而用户看到的则是直观的绘制出来的图形,并希望图形的左上角坐标能够对上他设置的坐标。旋转前的 x 和 y 是无法直观体现在画布上的,用户也不会在意。

OK,先看看怎么修改 rotatedX。图形对象上没有 rotatedX 属性,本质还是要修改 x 值。

先看看 rotatedX 和 rotatedY 是怎么计算出来的,其实就是计算 x 和 y 基于图形的中点旋转后的结果:

// 对坐标做旋转
function transformRotate(x, y, radian, cx ,cy) {
if (!radian) {
return [x, y];
}
const cos = Math.cos(radian);
const sin = Math.sin(radian);
return [
(x - cx) * cos - (y - cy) * sin + cx,
(x - cx) * sin + (y - cy) * cos + cy,
];
}

// 计算旋转后的 x 和 y
const [rotatedX, rotatedY] = transformRotate(x, y, rotation, cx, cy);

计算一个元素 rotatedX / rotatedY 的方法实现:

// 计算中点
function getRectCenterPoint({x, y, width, height}) {
return [x + width / 2, y + height / 2];
}

// 计算 rotatedX / rotatedY
export function getElementRotatedXY(element) {
const [cx, cy] = getRectCenterPoint(element);
return transformRotate(element.x, element.y, element.rotation || 0, cx, cy);
}

所以,设置新的 rotatedX,其实就是加上一个移动前后 rotatedX 的偏移值,将其加到 x 上就行了。

class Graph {
// ...
setRotatedX(rotatedX) {
const [prevRotatedX] = getElementRotatedXY(this);
const dx = rotatedX - prevRotatedX;
this.x += dx;
}
}

rotatedY 同理:

class Graph {
// ...
setRotatedY(rotatedY: number) {
const [, prevRotatedY] = getElementRotatedXY(this);
const dy = rotatedY - prevRotatedY;
this.y += dy;
}
}

设置 width / height

首先修改width 和 height。

但是这样会导致 rotatedX 和 rotatedY 发生偏移,我们需要修正一下。

修正方式有两种思路:

思路 1:计算修改 width 前后的 rotatedX / rotatedY 之间的差值,给元素进行修正。

const [preRotatedX, preRotatedY] = getElementRotatedXY(el); // 修改 width 前的
el.width = width;
const [rotatedX, rotatedY] = getElementRotatedXY(el); // 修改 width 后的
const dx = rotatedX - preRotatedX;
const dy = rotatedY - preRotatedY;
el.x -= dx; // "-" 是因为要复原状态
el.y -= dy;

思路 2:确定后最终的 rotatedX / rotatedY,然后对之前的 transformRotate 方法中的等式,进行逆推导,通过  rotatedX、rotatedY、radian、width、height 计算出对应的 x 和 y。这个思路比上一个思路有点复杂。

const [rotatedX, rotatedY] = getElementRotatedXY(el);
el.width = width;
const [x, y] = getOriginXY(
rotatedX,
rotatedY,
el.rotation || 0,
width,
el.height
);
el.x = x;
el.y = y;

/**
* 计算旋转前的 x、y
* transformRotate 的反推
*/
function getOriginXY(rotatedX, rotatedY, radian, width, height) {
if (!radian) {
return [rotatedX, rotatedY];
}
const cos = Math.cos(radian);
const sin = Math.sin(radian);
const halfWidth = width / 2;
const halfHeight = height / 2;
return [
rotatedX - halfWidth - halfHeight * sin + halfWidth * cos,
rotatedY - halfHeight + halfHeight * cos + halfWidth * sin,
];
}

我一开始用的思路 2 实现的,后面写这篇文章梳理时,相处了思路 1 的解法,因为更简单更好理解,就换成思路 1 的实现了。

修改 rotation

修改 rotation 就很简单了,直接改就好了。

但需要注意将度数转成弧度,以及通过取余来限定弧度范围。

// 角度转弧度
function degree2Radian(degree: number) {
return (degree * Math.PI) / 180;
}

/**
* 标准化角度
*/
const PI_DOUBLE = 2 * Math.PI;
export const normalizeAngle = (angle) => {
return angle % PI_DOUBLE;
};


element.rotation = normalizeAngle(degree2Radian(rotation));

结尾

算法实现上并不复杂。

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

2023-10-19 10:12:34

图形编辑器开发缩放图形

2023-08-31 11:32:57

图形编辑器contain

2023-09-07 08:24:35

图形编辑器开发绘制图形工具

2023-09-26 07:39:21

2023-01-18 08:30:40

图形编辑器元素

2023-02-01 09:21:59

图形编辑器标尺

2023-04-07 08:02:30

图形编辑器对齐功能

2023-02-06 16:59:57

Canvas编辑器

2023-02-02 14:07:00

图形编辑器Canvas

2023-09-11 09:02:31

图形编辑器模块间的通信

2023-04-10 08:45:44

图形编辑器排列移动功能

2023-05-09 08:15:32

图形编辑器撤销重做功能

2024-01-08 08:30:05

光标图形编辑器开发游标

2023-07-31 08:46:07

图形编辑器图形自动对齐

2023-03-03 10:24:51

2023-10-10 16:04:30

图形编辑器格式转换

2023-08-28 08:10:50

Hex图形编辑器

2023-10-08 08:11:40

图形编辑器快捷键操作

2024-01-03 08:43:17

图形编辑器旋转控制点缩放控制点

2023-02-16 07:30:55

图形编辑器屏幕开发
点赞
收藏

51CTO技术栈公众号