PhotoShop中的自由变换UI实现

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(rectX,rectY)$，$BD=rectW$，$BF=rectH$，$M(Xm, Ym) $。
• 求rectA，即求：$\angle BAC$

1.2 求解过程

1.2.1 求A(Xa, Ya)

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

• $Xa=rectX+rectW/2$
• $Ya=rectY+rectH/2$

1.2.2 求rectA(∠BAC)

有三点ABC，求∠BAC，有公式：
$$cosA=\frac{A{B}^2+A{B}^2-B{C}^2}{2\ast AB\ast AC}$$

所以:

• $A{B}^2$ = $(Xa-rectX{)}^2$ + $(Ya-rectY{)}^2$
• $A{M}^2$ = $(Xa-Xm{)}^2$ + $(Ya-Ym{)}^2$
• $B{M}^2$ = $(Xm-rectX{)}^2$ + $(Ym-rectY{)}^2$
• $cosA=(A{B}^2+A{B}^2-B{M}^2)/(2\ast \sqrt{A{B}^2\ast A{M}^2})$
• $rectA=acos(cosA)\ast 180/\pi$

判断象限

因为cos无法判断计算出来的角是否大于180度，所以需要根据鼠标位置判断角度

如图，$\angle BA{C}_1=150°$，$\angle BA{C}_2=210°$，但根据夹角公式算出来的cos是一样的，都是$\sqrt{3}/2$

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

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

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

1.2.3 求C(Xc, Yc)

点$(x,y)$围绕点$(x_0,y_0)$旋转$\alpha$度，有公式：
$$\begin{gathered} x^{\prime }=(x-x_0)cos\alpha -(y-y_0)sin\alpha +x_0 \\ {y}^{\prime }=(x-x_0)sin\alpha +(y-y_0)cos\alpha +y_0 \end{gathered}$$

所以：

• $A=rectA\ast \pi /180$
• $Xc=(rectX-Xa)\ast cosA-(rectY-Ya)\ast sinA+Xa$
• $Yc=(rectX-Xa)\ast sinA+(rectY-Ya)\ast cosA+Ya$

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

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

B: $A=rectA$
D: $A=rectA-2\ast atan(rectW/rectH)\ast \pi /180$
E: $A=rectA-180$
F: $A=rectA-180-2\ast atan(rectW/rectH)\ast \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)
	var AC2 = (ox - bx) * (ox - bx) + (oy - by) * (oy - by)
	var BC2 = (ax - bx) * (ax - bx) + (ay - by) * (ay - by)
	var cosA = (AB2 + AC2 - BC2) / (2 * Math.sqrt(AB2 * AC2))
	var A = Math.acos(cosA) * 180 / Math.PI

	// y = k(x-x0)+y0 判断在直线上面还是下面
	var k = rectW / rectH
	if ((bx - rectX) / k + rectY < by) {
		A = 360 - A
	}

	return A
}

//topLeft_RotateHandle
onMouseMove(mouse_x, mouse_y)
{
	var A = getAngle(mouse_x, mouse_y)
	rectA = rectW>0? A: -A
}

//topRight_RotateHandle
onMouseMove(mouse_x, mouse_y)
{
	var A = getAngle(mouse_x, mouse_y)
	var p = 2 * Math.atan2(rectW, rectH) * 180 / Math.PI
	rectA = rectW>0? A - p: -A - p
}

//bottomLeft_RotateHandle
onMouseMove(mouse_x, mouse_y)
{
	var A = getAngle(mouse_x, mouse_y)
	var p = 2 * Math.atan2(rectW, rectH) * 180 / Math.PI + 180
	rectA = rectW>0? A - p: -A - p
}

//bottomRight_RotateHandle
onMouseMove(mouse_x, mouse_y)
{
	var A = getAngle(mouse_x, mouse_y)
	A -= 180
	rectA = rectW>0? A: -A
}

2 对角缩放&等比缩放

在PS中，按住shift拖动四角的控制点，可以进行等比缩放，旋转角度不变

2.1 数学建模求解

在上一节中，我们已经求出了旋转角rectA($\angle BAC$)，以及旋转后的B点坐标$ C(Xc, Yc) $。现在根据可以鼠标坐标M，计算出拖移控制点P的坐标，然后算出缩放比例，从而算出缩放后的矩形基准（矩形B’D’E’F’为缩放后的矩形基准），及求B’坐标（rectX’, rectY’）及B’D’(rectW’)和B’F’(rectH’)
如图，紫色矩形是绿色矩形缩放后的图形，紫色矩形旋转-rectA度后即为矩形B’D’E’F’：

本节计算皆以B点作为锚点，对角点E点作为被拖动点，即缩放自由变换的右下角的点
转换为数学问题就是：

• 由图，已知$B(rectX,rectY)$，$BD=rectW$，$BF=rectH$， $\angle BAC=rectA$，$C(Xc,Yc)$，$M(Xm,Ym)$。
• 紫色矩形围绕A’逆时针旋转rectA度后即为矩形B’D’E’F’
• 过M点作AC的垂线，垂足为P。作A’为线段PC的中点，缩放比例$t=\frac{A^{\prime }C}{AC}$
• 求$B^{\prime }(rect{X}^{\prime },rect{Y}^{\prime })$，$B^{\prime }{D}^{\prime }(rect{W}^{\prime })$和$B^{\prime }{F}^{\prime }(rect{H}^{\prime })$

2.2 求解过程

2.2.1 B’是直线BC上一点

由条件可知：$\angle BAC=\angle B^{\prime }{A}^{\prime }C=rectA，AB=AC=2A^{\prime }C=2A^{\prime }B$
所以，$△ABC\sim △A^{\prime }{B}^{\prime }C$
可得：B’是直线BC上一点

因此，$t=\frac{A^{\prime }C}{AC}=\frac{B^{\prime }C}{BC}$
易证：$△CBF\sim △C{B}^{\prime }{F}^{\prime }，△CBD\sim △C{B}^{\prime }{D}^{\prime }$
可得：$t=\frac{A^{\prime }C}{AC}=\frac{B^{\prime }C}{BC}=\frac{B^{\prime }F}{BF}=\frac{B^{\prime }D}{BD}$

2.2.2 求P(Xp, Yp)

求直线 $l_1:y=k_{1}x+b_1$ 与直线 $l_2:y=k_{2}x+b_2$ 的交点$P(Xp,Yp)$，有公式：
$$\begin{gathered} Xp=\frac{b_2-b_1}{k_1-k_2} \\ Yp=k_{1}Xp+b_1 \end{gathered}$$

所以：

• $k1=(Ya-Yc)/(Xa-Xc)$
• $b1=Yc-k1\ast Xc$
• $k2=-1/k1$
• $b2=Yp-k2\ast Xp$
• $Xp=(b2-b1)/(k1-k2)$
• $Yp=k1\ast Xp+b1$

2.2.3 计算缩放比例t

因为
$$t=\frac{CG}{CP}=\frac{CP}{2\ast AC}=\frac{Xp-Xc}{2\ast (Xa-Xc)}$$

• $t=(Xp-Xc)/(Xa-Xc)/2$

2.2.4 计算结果

由2.2.1和2.2.3可知： $ t= \frac{A’C}{AC} = \frac{B’C}{BC} = \frac{B’F}{BF} = \frac{B’D}{BD} = \frac{CG}{CP}= \frac{Xp-Xc}{2*(Xa-Xc)}$
所以：
$$\begin{gathered} B^{\prime }(rect{X}^{\prime },rect{Y}^{\prime })=t\ast (C-B)+C \\ {B}^{\prime }{D}^{\prime }=t\ast BD \\ {B}^{\prime }{F}^{\prime }=t\ast BF \end{gathered}$$

即

• $rect{X}^{\prime }=t\ast (rectX-Xc)+Xc$
• $rect{Y}^{\prime }=t\ast (rectY-Yc)+Yc$
• $rect{W}^{\prime }=t\ast rectW$
• $rect{H}^{\prime }=t\ast rectH$

2.3 对于其他三点的处理

和旋转一样，对其他三点进行角度偏转就好了

B: $A=rectA+180$
D: $A=rectA+180+2\ast atan(rectW/rectH)\ast \pi /180$
E: $A=rectA$
F: $A=rectA+2\ast atan(rectW/rectH)\ast \pi /180$

2.4 代码

//鼠标拖拽对角线缩放，计算图片缩放比例
function setScaleDiagonal(Xm, Ym, angle) {
	//计算缩放基准点坐标C(旋转中心为A, B围绕A点旋转angle度到C)
	var A = angle * Math.PI / 180
	var Xa = rectX + rectW / 2
	var Ya = rectY + rectH / 2
	var Xc = (rectX - Xa) * Math.cos(A) - (rectY - Ya) * Math.sin(A) + Xa
	var Yc = (rectX - Xa) * Math.sin(A) + (rectY - Ya) * Math.cos(A) + Ya

	//鼠标坐标修正(过鼠标坐标对对角线作垂线，计算垂足P)
	var k1 = (Ya - Yc) / (Xa - Xc)
	var b1 = Yc - k1 * Xc
	var k2 = -1 / k1
	var b2 = Ym - k2 * Xm
	var Xp = (b2 - b1) / (k1 - k2)
	var Yp = k1 * Xp + b1

	//计算缩放比例
	var t = (Xp - Xc) / (Xa - Xc) / 2
	//console.log("setScaleDiagonal", Xc, Yc, Xp ,Yp, A, t)

	//应用到变换
	rectX = t * (rectX - Xc) + Xc
	rectY = t * (rectY - Yc) + Yc
	rectW = t * rectW
	rectH = t * rectH
}


//topLeft_ScaleHandle
onMouseMove(mouse_x, mouse_y)
{
	setScaleDiagonal(mouse_x, mouse_y, rectA + 180)
}

//topRight_ScaleHandle
onMouseMove(mouse_x, mouse_y)
{
	var A = 180 + rectA + (2 * Math.atan2(rectW, rectH) * 180 / Math.PI)
	setScaleDiagonal(mouse_x, mouse_y, A)
}

//bottomLeft_ScaleHandle
onMouseMove(mouse_x, mouse_y)
{
	var A = rectA + (2 * Math.atan2(rectW, rectH) * 180 / Math.PI)
	setScaleDiagonal(mouse_x, mouse_y, A)
}

//bottomRight_ScaleHandle
onMouseMove(mouse_x, mouse_y)
{
	setScaleDiagonal(mouse_x, mouse_y, rectA)
}

3 上下左右的缩放&不等比缩放

在PS中，按住shift拖动上下左右四边的控制点，可以进行不等比缩放，旋转角度不变

3.1 数学建模求解

在第一节中，我们已经求出了旋转角rectA($\angle BAC$)，以及旋转后的B点坐标$ C(Xc, Yc) $。现在根据可以鼠标坐标M，计算出拖移控制点P的坐标，然后算出缩放比例t，从而算出缩放后的矩形基准（矩形B’D’E’F’为缩放后的矩形基准），及求B’坐标（rectX’, rectY’）及B’D’(rectW’)和B’F’(rectH’)
如图，紫色矩形是绿色矩形缩放后的图形，紫色矩形围绕A’旋转-rectA度后即为矩形B’D’E’F’：

本节计算皆以L点作为锚点，对称点L’点作为被拖动点，即缩放自由变换的右边的点
转换为数学问题就是：

• 由图，已知$B(rectX,rectY)$，$BD=rectW$，$BF=rectH$， $\angle BAC=rectA$，$C(Xc,Yc)$，$M(Xm,Ym)$。
• 紫色矩形围绕A’逆时针旋转rectA度后即为矩形B’D’E’F’
• 作CG中点L，过AL作直线交JK于L’
• 过M点作AL的垂线，垂足为P。作A’为线段PL的中点，缩放比例$t=\frac{LP}{L{L}^{\prime }}$
• 作直线BG、CD相交于H点，过点H作HI⊥BD，垂足为I，交B’D’于I’，连接FI’
• 求$B^{\prime }(rect{X}^{\prime },rect{Y}^{\prime })$，$B^{\prime }{D}^{\prime }(rect{W}^{\prime })$和$B^{\prime }{F}^{\prime }(rect{H}^{\prime })$

3.2 求解过程

3.2.1 B’是直线BH上一点

证明略（不知道怎么证，总之是对的）

所以，$t=\frac{LP}{L{L}^{\prime }}=\frac{B^{\prime }{D}^{\prime }}{BD}=\frac{B^{\prime }{F}^{\prime }}{BF}$

3.2.2 L是直线HI上一点，求L(Xl, Yl)

证明略（不知道怎么证，总之是对的）

点L相当于BF的中点R围绕A旋转rectA度后的位置
所以
$ Xr = rectX - Xa \
Yr = Ya \
Xl = Xa + (Xr - Xa) * Math.cos(A) - (Yr - Ya)*sin A \
Yl = Ya + (Xr - Xa) * Math.sin(A) + (Yr - Ya)*cos A
$

化简后：

• $Xl=Xa+(rectX-Xa)\ast Math.cos(A)$
• $Yl=Ya+(rectX-Xa)\ast Math.sin(A)$

3.2.3 计算缩放比例t

参见2.2.2和2.2.3
求得$P(Xp,Yp)$和$t$

特别的:
当Ya=Yl时（rect=0或rect=180)
$t=(Xm-Xl)/(Xa-Xl)/2$

当Xa=Xl时（rect=90或rect=270)
$t=(Ym-Yl)/(Ya-Yl)/2$

3.2.4 计算结果

计算BI的长：$BI=Xl-Xb=Xl-rectX$
计算HI的长：$HI=BI\ast tan(\angle BHI)=BI\ast tan(\frac{\pi -rectA}{2})$

所以：

• $rect{X}^{\prime }=rectX+(1-t)\ast BI$
• $rect{Y}^{\prime }=rectY-(1-t)\ast HI$
• $rect{W}^{\prime }=rectW\ast t$
• $rect{H}^{\prime }=rectH$

3.3 左缩放、上缩放和下缩放

如下图，计算方法是一样的，但是基准点有变化，但都是为了计算BI和HI的长度

3.4 代码

var direction_left = 0
var direction_right = 1
var direction_top = 2
var direction_bottom = 3

//鼠标拖拽水平缩放，计算图片缩放比例
function setScaleXY(Xm, Ym, angle, direction) {
	//计算缩放基准点坐标C(旋转中心为A, B围绕A点旋转angle度到C)
	var A = angle * Math.PI / 180
	var Xa = rectX + rectW / 2
	var Ya = rectY + rectH / 2

	//缩放基准点基准点
	var Xl = 0
	var Yl = 0

	if(direction === direction_left)
	{
		Xl = Xa + (rectX + rectW - Xa) * Math.cos(A)
		Yl = Ya + (rectX + rectW - Xa) * Math.sin(A)
	}
	else if(direction === direction_right)
	{
		Xl = Xa + (rectX - Xa) * Math.cos(A)
		Yl = Ya + (rectX - Xa) * Math.sin(A)
	}
	else if(direction === direction_top)
	{
		Xl = Xa - (rectY + rectH - Ya) * Math.sin(A)
		Yl = Ya + (rectY + rectH - Ya) * Math.cos(A)
	}
	else if(direction === direction_bottom)
	{
		Xl = Xa - (rectY - Ya) * Math.sin(A)
		Yl = Ya + (rectY - Ya) * Math.cos(A)
	}

	//计算缩放比例
	var t = 0
	if(Xa != Xl && Ya != Yl)
	{
		//鼠标坐标修正(过鼠标坐标对对角线作垂线，计算垂足P)
		var k1 = (Ya - Yl) / (Xa - Xl)
		var b1 = Yl - k1 * Xl
		var k2 = -1 / k1
		var b2 = Ym - k2 * Xm
		var Xp = (b2 - b1) / (k1 - k2)
		//var Yp = k1 * Xp + b1

		if(Xp === Xl || Xa === Xl) return
		t = (Xp - Xl) / (Xa - Xl) /2
	}
	else if(Ya === Yl)
	{
		if(Xm === Xl || Xa === Xl) return
		t = (Xm - Xl) / (Xa - Xl) /2
	}
	else if(Xa === Xl)
	{
		if(Ym === Yl || Ya === Yl) return
		t = (Ym - Yl) / (Ya - Yl) /2
	}

	//应用变换
	var BI = 0
	if(direction === direction_left)
	{
		if(Ya === Yl)
		{
			rectX = rectX + (1 - t) * rectW
			rectW = t * rectW
		}
		else
		{
			BI = (1 - t) * (Xl - rectX)
			rectY = rectY + BI * Math.tan(A / 2)
			rectX = rectX + BI
			rectW = t * rectW
		}
	}
	else if(direction === direction_right)
	{
		if(Ya === Yl)
		{
			rectW = t * rectW
		}
		else
		{
			BI = (1 - t) * (Xl - rectX)
			rectY = rectY - BI * Math.tan((Math.PI - A) / 2)
			rectX = rectX + BI
			rectW = t * rectW
		}
	}
	else if(direction === direction_top)
	{
		if(Xa === Xl)
		{
			rectY = rectY + (1 - t) * rectH
			rectH = t * rectH
		}
		else
		{
			BI = (1 - t) * (Yl - rectY)
			rectX = rectX - BI * Math.tan(A / 2)
			rectY = rectY + BI
			rectH = t * rectH
		}
	}
	else if(direction === direction_bottom)
	{
		if(Xa === Xl)
		{
			rectH = t * rectH
		}
		else
		{
			BI = (1 - t) * (Yl - rectY)
			rectX = rectX + BI * Math.tan((Math.PI - A) / 2)
			rectY = rectY + BI
			rectH = t * rectH
		}
	}
}

//四个方向共用，只需改变第三个参数即可
onMouseMove(mouse_x, mouse_y)
{
	setScaleXY(mouse_x, mouse_y, rectA, direction_left)
}

4 完整实现代码

4.1 效果预览

4.2 代码

这是在QT qml界面实现的代码

import QtQuick 2.1


Item {
    id: item
    anchors.fill: parent
    rotation: 0

    property real widthScale: 1.0
    property real heightScale: 1.0
    property real aspectRatio: 0.0
    property int handleSize: 10
    property int borderSize: 2
    property alias uiRectangle: uiRectangle
    property color uiColor: Qt.rgba(255, 255, 255, 1)
    property color handleColor: 'transparent'
    //property color handleColor: Qt.rgba(0, 255, 0, 0.5)

    property real rectX: 0
    property real rectY: 0
    property real rectW: 0
    property real rectH: 0
    property real rectA: 0
    property int coursor: 0
    property real mouse_x: 0
    property real mouse_y: 0

    property int direction_left: 0
    property int direction_right: 1
    property int direction_top: 2
    property int direction_bottom: 3

    property int state_none: 0
    property int state_drag: 1
    property int state_control_point: 2
    property int state_rotate: 3


    signal rectChanged()
    signal updateCursor()

    function image(path) {
        return "file:///" + RESOURCE_PATH + "/icon/" + path
    }

    function transformPointX(x, y, sA, cA) {
        return x * cA - y * sA + rectX + rectW / 2
    }

    function transformPointY(x, y, sA, cA) {
        return x * sA + y * cA + rectY + rectH / 2
    }

    //更新UI
    function updateRect() {
        if(rectW > 0){uiRectangle.x = rectX; uiRectangle.width = rectW}
        else{uiRectangle.x = rectX + rectW; uiRectangle.width = -rectW}

        if(rectH > 0){uiRectangle.y = rectY; uiRectangle.height = rectH}
        else{uiRectangle.y = rectY + rectH; uiRectangle.height = -rectH}

        uiRectangle.rotation = rectA

        //rectChanged() //发送信号通知上层更新滤镜参数
    }

    //更新控制点坐标
    function updateHandle() {
        var cx = rectW / 2
        var cy = rectH / 2

        var hs = handleSize
        var hs2 = handleSize / 2
        var xhs = handleSize
        var xhs2 = handleSize / 2
        var yhs = handleSize
        var yhs2 = handleSize / 2

        var A = rectA * Math.PI / 180
        var sA = Math.sin(A)
        var cA = Math.cos(A)

        if(rectW < 0){xhs = -xhs; xhs2 = -xhs2}
        if(rectH < 0){yhs = -yhs; yhs2 = -yhs2}

        topLeft_RotateHandle.x = transformPointX(-cx - xhs, -cy - yhs, sA, cA) - hs
        topLeft_RotateHandle.y = transformPointY(-cx - xhs, -cy - yhs, sA, cA) - hs
        topRight_RotateHandle.x = transformPointX(cx + xhs, -cy - yhs, sA, cA) - hs
        topRight_RotateHandle.y = transformPointY(cx + xhs, -cy - yhs, sA, cA) - hs
        bottomLeft_RotateHandle.x = transformPointX(-cx - xhs, cy + yhs, sA, cA) - hs
        bottomLeft_RotateHandle.y = transformPointY(-cx - xhs, cy + yhs, sA, cA) - hs
        bottomRight_RotateHandle.x = transformPointX(cx + xhs, cy + yhs, sA, cA) - hs
        bottomRight_RotateHandle.y = transformPointY(cx + xhs, cy + yhs, sA, cA) - hs

        topLeft_ScaleHandle.x = transformPointX(-cx + xhs2, -cy + yhs2, sA, cA) - hs2
        topLeft_ScaleHandle.y = transformPointY(-cx + xhs2, -cy + yhs2, sA, cA) - hs2
        topRight_ScaleHandle.x = transformPointX(cx - xhs2, -cy + yhs2, sA, cA) - hs2
        topRight_ScaleHandle.y = transformPointY(cx - xhs2, -cy + yhs2, sA, cA) - hs2
        bottomLeft_ScaleHandle.x = transformPointX(-cx + xhs2, cy - yhs2, sA, cA) - hs2
        bottomLeft_ScaleHandle.y = transformPointY(-cx + xhs2, cy - yhs2, sA, cA) - hs2
        bottomRight_ScaleHandle.x = transformPointX(cx - xhs2, cy - yhs2, sA, cA) - hs2
        bottomRight_ScaleHandle.y = transformPointY(cx - xhs2, cy - yhs2, sA, cA) - hs2

        left_ScaleHandle.x = transformPointX(-cx + xhs2, 0, sA, cA) - hs2
        left_ScaleHandle.y = transformPointY(-cx + xhs2, 0, sA, cA) - hs2
        right_ScaleHandle.x = transformPointX(cx - xhs2, 0, sA, cA) - hs2
        right_ScaleHandle.y = transformPointY(cx - xhs2, 0, sA, cA) - hs2
        top_ScaleHandle.x = transformPointX(0, -cy + yhs2, sA, cA) - hs2
        top_ScaleHandle.y = transformPointY(0, -cy + yhs2, sA, cA) - hs2
        bottom_ScaleHandle.x = transformPointX(0, cy - yhs2, sA, cA) - hs2
        bottom_ScaleHandle.y = transformPointY(0, cy - yhs2, sA, cA) - hs2

        rectChanged() //发送信号通知上层更新滤镜参数
    }

    //初始化数据
    function setHandles(rect, angle) {
        rectX = Math.round(rect.x * widthScale)
        rectY = Math.round(rect.y * heightScale)
        rectW = Math.round(rect.width * widthScale)
        rectH = Math.round(rect.height * heightScale)
        rectA = angle
        updateRect()
        updateHandle()
    }

    //鼠标拖拽旋转，计算图片旋转角度
    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)
        var AC2 = (ox - bx) * (ox - bx) + (oy - by) * (oy - by)
        var BC2 = (ax - bx) * (ax - bx) + (ay - by) * (ay - by)
        var cosA = (AB2 + AC2 - BC2) / (2 * Math.sqrt(AB2 * AC2))
        var A = Math.acos(cosA) * 180 / Math.PI

        // y = k(x-x0)+y0 判断在直线上面还是下面
        var k = rectW / rectH
        if ((bx - rectX) / k + rectY < by) {
            A = 360 - A
        }

        return A
    }

    //鼠标光标控制
    function setCoursor(mx, my, state) {
        var ox = rectX + rectW / 2
        var oy = rectY + rectH / 2

        var angle = mx === x? Math.PI / 2: Math.atan2(my - oy, mx - ox)
        angle = angle*180 / Math.PI
        angle += 22.5
        if(state === state_control_point) angle += 90
        angle = angle<0? angle + 360: angle

        if(state === state_none) coursor = Qt.ArrowCursor
        else if(state === state_drag) coursor = Qt.SizeAllCursor
        else if(state === state_rotate || state === state_control_point)
        {
            if(0 < angle && angle <= 45){ coursor = Qt.SizeVerCursor }
            else if(45 < angle && angle <= 90){ coursor = Qt.SizeBDiagCursor }
            else if(90 < angle && angle <= 135){ coursor = Qt.SizeHorCursor }
            else if(135 < angle && angle <= 180){ coursor = Qt.SizeFDiagCursor }
            else if(180 < angle && angle <= 225){ coursor = Qt.SizeVerCursor }
            else if(225 < angle && angle <= 270){ coursor = Qt.SizeBDiagCursor }
            else if(270 < angle && angle <= 315){ coursor = Qt.SizeHorCursor }
            else if(angle > 315 || angle <= 0){ coursor = Qt.SizeFDiagCursor }
            else {coursor = Qt.ArrowCursor}
        }
        else coursor = Qt.ArrowCursor

        positionMouseArea.cursorShape = coursor
        topLeft_RotateHandle_MouseArea.cursorShape = coursor
        topRight_RotateHandle_MouseArea.cursorShape = coursor
        bottomLeft_RotateHandle_MouseArea.cursorShape = coursor
        bottomRight_RotateHandle_MouseArea.cursorShape = coursor
        topLeft_ScaleHandle_MouseArea.cursorShape = coursor
        topRight_ScaleHandle_MouseArea.cursorShape = coursor
        bottomLeft_ScaleHandle_MouseArea.cursorShape = coursor
        bottomRight_ScaleHandle_MouseArea.cursorShape = coursor
        left_ScaleHandle_MouseArea.cursorShape = coursor
        right_ScaleHandle_MouseArea.cursorShape = coursor
        top_ScaleHandle_MouseArea.cursorShape = coursor
        bottom_ScaleHandle_MouseArea.cursorShape = coursor

        updateCursor() //发送信号通知上层更新光标图标
    }

    //鼠标拖拽对角线缩放，计算图片缩放比例
    function setScaleDiagonal(Xm, Ym, angle) {
        //计算缩放基准点坐标C(旋转中心为A, B围绕A点旋转angle度到C)
        var A = angle * Math.PI / 180
        var Xa = rectX + rectW / 2
        var Ya = rectY + rectH / 2
        var Xc = (rectX - Xa) * Math.cos(A) - (rectY - Ya) * Math.sin(A) + Xa
        var Yc = (rectX - Xa) * Math.sin(A) + (rectY - Ya) * Math.cos(A) + Ya

        //鼠标坐标修正(过鼠标坐标对对角线作垂线，计算垂足P)
        var k1 = (Ya - Yc) / (Xa - Xc)
        var b1 = Yc - k1 * Xc
        var k2 = -1 / k1
        var b2 = Ym - k2 * Xm
        var Xp = (b2 - b1) / (k1 - k2)
        var Yp = k1 * Xp + b1

        //计算缩放比例
        var t = (Xp - Xc) / (Xa - Xc) / 2
        //console.log("setScaleDiagonal", Xc, Yc, Xp ,Yp, A, t)

        //应用到变换
        rectX = t * (rectX - Xc) + Xc
        rectY = t * (rectY - Yc) + Yc
        rectW = t * rectW
        rectH = t * rectH
    }

    //鼠标拖拽水平缩放，计算图片缩放比例
    function setScaleXY(Xm, Ym, angle, direction) {
        //计算缩放基准点坐标C(旋转中心为A, B围绕A点旋转angle度到C)
        var A = angle * Math.PI / 180
        var Xa = rectX + rectW / 2
        var Ya = rectY + rectH / 2

        //缩放基准点基准点
        var Xl = 0
        var Yl = 0

        if(direction === direction_left)
        {
            Xl = Xa + (rectX + rectW - Xa) * Math.cos(A)
            Yl = Ya + (rectX + rectW - Xa) * Math.sin(A)
        }
        else if(direction === direction_right)
        {
            Xl = Xa + (rectX - Xa) * Math.cos(A)
            Yl = Ya + (rectX - Xa) * Math.sin(A)
        }
        else if(direction === direction_top)
        {
            Xl = Xa - (rectY + rectH - Ya) * Math.sin(A)
            Yl = Ya + (rectY + rectH - Ya) * Math.cos(A)
        }
        else if(direction === direction_bottom)
        {
            Xl = Xa - (rectY - Ya) * Math.sin(A)
            Yl = Ya + (rectY - Ya) * Math.cos(A)
        }

        //计算缩放比例
        var t = 0
        if(Xa != Xl && Ya != Yl)
        {
            //鼠标坐标修正(过鼠标坐标对对角线作垂线，计算垂足P)
            var k1 = (Ya - Yl) / (Xa - Xl)
            var b1 = Yl - k1 * Xl
            var k2 = -1 / k1
            var b2 = Ym - k2 * Xm
            var Xp = (b2 - b1) / (k1 - k2)
            //var Yp = k1 * Xp + b1

            if(Xp === Xl || Xa === Xl) return
            t = (Xp - Xl) / (Xa - Xl) /2
        }
        else if(Ya === Yl)
        {
            if(Xm === Xl || Xa === Xl) return
            t = (Xm - Xl) / (Xa - Xl) /2
        }
        else if(Xa === Xl)
        {
            if(Ym === Yl || Ya === Yl) return
            t = (Ym - Yl) / (Ya - Yl) /2
        }

        //应用变换
        var BI = 0
        if(direction === direction_left)
        {
            if(Ya === Yl)
            {
                rectX = rectX + (1 - t) * rectW
                rectW = t * rectW
            }
            else
            {
                BI = (1 - t) * (Xl - rectX)
                rectY = rectY + BI * Math.tan(A / 2)
                rectX = rectX + BI
                rectW = t * rectW
            }
        }
        else if(direction === direction_right)
        {
            if(Ya === Yl)
            {
                rectW = t * rectW
            }
            else
            {
                BI = (1 - t) * (Xl - rectX)
                rectY = rectY - BI * Math.tan((Math.PI - A) / 2)
                rectX = rectX + BI
                rectW = t * rectW
            }
        }
        else if(direction === direction_top)
        {
            if(Xa === Xl)
            {
                rectY = rectY + (1 - t) * rectH
                rectH = t * rectH
            }
            else
            {
                BI = (1 - t) * (Yl - rectY)
                rectX = rectX - BI * Math.tan(A / 2)
                rectY = rectY + BI
                rectH = t * rectH
            }
        }
        else if(direction === direction_bottom)
        {
            if(Xa === Xl)
            {
                rectH = t * rectH
            }
            else
            {
                BI = (1 - t) * (Yl - rectY)
                rectX = rectX + BI * Math.tan((Math.PI - A) / 2)
                rectY = rectY + BI
                rectH = t * rectH
            }
        }
    }

    Rectangle {
        id: uiRectangle
        color: 'transparent' //Qt.rgba(255, 0, 0, 0.5)
        border.width: borderSize
        border.color: uiColor
        rotation: 0

        MouseArea {
            id: positionMouseArea
            anchors.fill: parent
            hoverEnabled: true
            drag.target: uiRectangle
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    rectX = rectW > 0? uiRectangle.x: uiRectangle.x - rectW
                    rectY = rectH > 0? uiRectangle.y: uiRectangle.y - rectH
                    updateRect()
                }
                setCoursor(0, 0, state_drag)
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onExited:{setCoursor(0, 0, state_none)}
        }

        Image {
            source: image("rotate_arrow_tl.png")
            x: handleSize - this.width
            y: handleSize - this.height
        }

        Image {
            source: image("rotate_arrow_tr.png")
            x: uiRectangle.width - handleSize
            y: handleSize - this.height
        }

        Image {
            source: image("rotate_arrow_bl.png")
            x: handleSize - this.width
            y: uiRectangle.height - handleSize
        }

        Image {
            source: image("rotate_arrow_br.png")
            x: uiRectangle.width - handleSize
            y: uiRectangle.height - handleSize
        }

        Rectangle {
            color: uiColor
            x: (uiRectangle.width - handleSize) / 2
            y: (uiRectangle.height - handleSize) / 2
            width: handleSize
            height: handleSize
            radius: width / 2
        }

        Rectangle {
            color: uiColor
            x: 0
            y: 0
            width: handleSize
            height: handleSize
        }

        Rectangle {
            color: uiColor
            x: uiRectangle.width - handleSize
            y: 0
            width: handleSize
            height: handleSize
        }

        Rectangle {
            color: uiColor
            x: 0
            y: uiRectangle.height - handleSize
            width: handleSize
            height: handleSize
        }

        Rectangle {
            color: uiColor
            x: uiRectangle.width - handleSize
            y: uiRectangle.height - handleSize
            width: handleSize
            height: handleSize
        }

        Rectangle {
            color: uiColor
            x: (uiRectangle.width - handleSize) / 2
            y: 0
            width: handleSize
            height: handleSize
        }

        Rectangle {
            color: uiColor
            x: (uiRectangle.width - handleSize) / 2
            y: uiRectangle.height - handleSize
            width: handleSize
            height: handleSize
        }

        Rectangle {
            color: uiColor
            x: 0
            y: (uiRectangle.height - handleSize) / 2
            width: handleSize
            height: handleSize
        }

        Rectangle {
            color: uiColor
            x: uiRectangle.width - handleSize
            y: (uiRectangle.height - handleSize) / 2
            width: handleSize
            height: handleSize
        }
    }


    Rectangle {
        id: topLeft_RotateHandle
        color: handleColor
        width: handleSize * 2
        height: handleSize * 2
        MouseArea {
            id: topLeft_RotateHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_rotate)

                if(pressedButtons === Qt.LeftButton)
                {
                    var A = getAngle(mouse_x, mouse_y)
                    rectA = rectW>0? A: -A
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onExited:{setCoursor(0, 0, state_none)}
        }
    }

    Rectangle {
        id: topRight_RotateHandle
        color: handleColor
        width: handleSize * 2
        height: handleSize * 2
        MouseArea {
            id: topRight_RotateHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_rotate)

                if(pressedButtons === Qt.LeftButton)
                {
                    var A = getAngle(mouse_x, mouse_y)
                    var p = 2 * Math.atan2(rectW, rectH) * 180 / Math.PI
                    rectA = rectW>0? A - p: -A - p
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onExited:{setCoursor(0, 0, state_none)}
        }
    }

    Rectangle {
        id: bottomLeft_RotateHandle
        color: handleColor
        width: handleSize * 2
        height: handleSize * 2
        MouseArea {
            id: bottomLeft_RotateHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_rotate)

                if(pressedButtons === Qt.LeftButton)
                {
                    var A = getAngle(mouse_x, mouse_y)
                    var p = 2 * Math.atan2(rectW, rectH) * 180 / Math.PI + 180
                    rectA = rectW>0? A - p: -A - p
                    updateRect()
                }
            }
            onReleased: {
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onExited:{setCoursor(0, 0, state_none)}
        }
    }

    Rectangle {
        id: bottomRight_RotateHandle
        color: handleColor
        width: handleSize * 2
        height: handleSize * 2
        MouseArea {
            id: bottomRight_RotateHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_rotate)

                if(pressedButtons === Qt.LeftButton)
                {
                    var A = getAngle(mouse_x, mouse_y)
                    A -= 180
                    rectA = rectW>0? A: -A
                    updateRect()
                }
            }
            onReleased: {
                //rectA = 90
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onExited:{setCoursor(0, 0, state_none)}
        }
    }


    Rectangle {
        id: topLeft_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: topLeft_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleDiagonal(mouse_x, mouse_y, rectA + 180)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }

    Rectangle {
        id: topRight_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: topRight_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    var A = 180 + rectA + (2 * Math.atan2(rectW, rectH) * 180 / Math.PI)
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleDiagonal(mouse_x, mouse_y, A)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }

    Rectangle {
        id: bottomLeft_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: bottomLeft_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    var A = rectA + (2 * Math.atan2(rectW, rectH) * 180 / Math.PI)
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleDiagonal(mouse_x, mouse_y, A)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }

    Rectangle {
        id: bottomRight_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: bottomRight_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleDiagonal(mouse_x, mouse_y, rectA)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }


    Rectangle {
        id: left_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: left_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleXY(mouse_x, mouse_y, rectA, direction_left)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }

    Rectangle {
        id: right_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: right_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleXY(mouse_x, mouse_y, rectA, direction_right)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }

    Rectangle {
        id: top_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: top_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleXY(mouse_x, mouse_y, rectA, direction_top)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }

    Rectangle {
        id: bottom_ScaleHandle
        color: handleColor
        width: handleSize
        height: handleSize
        MouseArea {
            id: bottom_ScaleHandle_MouseArea
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                if(pressedButtons === Qt.LeftButton)
                {
                    mouse_x = mouseX + parent.x
                    mouse_y = mouseY + parent.y
                    setScaleXY(mouse_x, mouse_y, rectA, direction_bottom)
                    updateRect()
                }
            }
            onReleased: {
                updateRect()
                updateHandle()
                setCoursor(0, 0, state_none)
            }
            onEntered: {
                mouse_x = mouseX + parent.x
                mouse_y = mouseY + parent.y
                setCoursor(mouse_x, mouse_y, state_control_point)
            }
        }
    }

}