PhotoShop中的自由变换UI实现

最新推荐文章于 2025-02-25 21:29:46 发布

A.A

最新推荐文章于 2025-02-25 21:29:46 发布

阅读量1k

点赞数

分类专栏： C/C++ QT

本文链接：https://blog.csdn.net/aa13058219642/article/details/80677218

版权

PhotoShop中的自由变换UI

PS的自由变换UI如下

1. 旋转

在这里插入图片描述
如上图，旋转是在ps的自由变换中最常见的操作之一，灰色矩形经过旋转变为绿色矩形

1.1 数学建模求解

一个矩形的变换由以下参数记录左上角坐标（rectX, rectY）,矩形宽高（rectW, rectH）,矩形旋转角度（rectA，此处的旋转角是相对于B点的）。把图形旋转的变换进行数学建模，得到下面的图：
在这里插入图片描述
本节计算皆以B点作为被拖动点，即自由变换的左上角的点

其中：

BDEF为要变换的矩形基准，点A是对角线的交点，B(rectX, rectY)，BD=rectW，BF=rectH，∠BAM=rectA
M(Xm, Ym)点是鼠标坐标（拖动B点围绕A点旋转rectA 度后的位置），连接AM交圆A于点C（A即旋转中心，C即旋转基准点）

转换为数学问题就是：

由图，已知 $B (r e c t X, r e c t Y)$ ， $B D = r e c t W$ ， $B F = r e c t H$ ，$M(Xm, Ym) $。
求rectA，即求： $∠ B A C$

1.2 求解过程

1.2.1 求A(Xa, Ya)

已知矩形顶点和宽高，求对角线交点

$X a = r e c t X + r e c t W / 2$
$Y a = r e c t Y + r e c t H / 2$

1.2.2 求rectA(∠BAC)

有三点ABC，求∠BAC，有公式：
$=\frac{AB^{2}+AB^{2}-BC^{2}}{2*AB*AC}$

所以:

$AB^{2}$ = $Xa - rectX)^{2}$ + $Ya - rectY)^{2}$
$AM^{2}$ = $Xa - Xm)^{2}$ + $Ya - Ym)^{2}$
$BM^{2}$ = $Xm - rectX)^{2}$ + $Ym - rectY)^{2}$
$(AB^{2}+AB^{2}-BM^{2})/(2*\sqrt{AB^{2}*AM^{2}})$
$\pi$

判断象限

因为cos无法判断计算出来的角是否大于180度，所以需要根据鼠标位置判断角度
这里写图片描述
如图， $BAC_{1} = 150°$ ， $BAC_{2} = 210°$ ，但根据夹角公式算出来的cos是一样的，都是 $\sqrt{3}/2$

判断的方式实际上也很简单，根据M的坐标判断M在直线AB上面还是下面即可

$l_{AB}: y = \frac{rectH}{rectW}(x - rectX) + rectY$
把 $M (X m, Y m)$ 代入方程即可

if ((rectH / rectW)*(Xm - rectX) + rectY < Ym) {
    rectA = 360 - rectA
}

1.2.3 求C(Xc, Yc)

点 $(x, y)$ 围绕点 $x_{0}, y_{0})$ 旋转 $α$ 度，有公式：
$x_{0})cos α - (y - y_{0})sin α + x_{0} \\ y' = (x - x_{0})sin α + (y - y_{0})cos α + y_{0}$

所以：

$\pi / 180$
$X c = (r e c t X - X a) * c o s A - (r e c t Y - Y a) * s i n A + X a$
$Y c = (r e c t X - X a) * s i n A + (r e c t Y - Y a) * c o s A + Y a$

1.3 对于D、E、F点的处理

从数学建模图可轻易看出，D、E、F三点与B共圆，所以计算这三点旋转后的坐标，只需要在计算前把rectA加上对角线的夹角即可

B: $A = r e c t A$
D: $\pi / 180$
E: $A = r e c t A - 180$
F: $\pi / 180$

1.4 代码

//鼠标拖拽旋转，计算图片旋转角度
function getAngle(mx, my) {
   
	var ox = rectX + rectW / 2
	var oy = rectY + rectH / 2
	var ax = rectX
	var ay = rectY
	var bx = mx
	var by = my

	// cosA = (AB^2+AC^2-BC^2)/(2*AB*AC) 三点求夹角
	var AB2 = (ax - ox) * (ax - ox) + (ay - oy) * (ay - oy

最低0.47元/天解锁文章