模仿美圖秀秀單指旋轉(zhuǎn)圖片

美圖秀秀單指按住圖片旋轉(zhuǎn)的功能很美妙,最近為了熟悉CoreGraphics框架,模仿美圖做了一些功能,因?yàn)閷?duì)于放射變換不夠熟悉,加上好久沒有研究算法了,在單指旋轉(zhuǎn)圖片上還是費(fèi)了一些功夫。

拖動(dòng)事件

首先,先說下我用的是UIPanGestureRecognizer手勢(shì)來監(jiān)測(cè)拖動(dòng)圖片的事件的,但是并沒有用gensture.translation方法來取得變化,剛開始的時(shí)候也是想用來著,后來發(fā)現(xiàn)我的算法根本用不上這個(gè)屬性。

求每次拖動(dòng)事件之間產(chǎn)生的夾角

因?yàn)樽罱矂倓傞_始復(fù)習(xí)線性變換的算法,在紙上畫了畫旋轉(zhuǎn)的過程,發(fā)現(xiàn),這不就是求兩個(gè)向量之間的夾角嗎,哈哈哈~
好,那我們來回顧一下,向量的夾角公式

cosθ=a.b/(|a||b|)

即: θ = arccos(a和b的點(diǎn)乘/a的模*b的模)
兩個(gè)向量a,b是從每次進(jìn)入拖動(dòng)事件時(shí)的location得來的,方法如下:

let currentPosition = gesture.location(in: self.bgView)
let vectorA = CGPoint(x: lastPosition.x - origin.x, y: lastPosition.y - origin.y)
let vectorB = CGPoint(x: currentPosition.x - origin.x, y: currentPosition.y - origin.y)

OK,兩個(gè)向量已經(jīng)準(zhǔn)備好了,剩下的我們只要根據(jù)公式計(jì)算就可以了

// 向量a的模
let modA = sqrtf(powf(Float(vectorA.x), 2) + powf(Float(vectorA.y), 2))
// 向量b的模
let modB = sqrtf(powf(Float(vectorB.x), 2) + powf(Float(vectorB.y), 2))
// 向量a,b的點(diǎn)乘
let pointMuti = Float(vectorA.x * vectorB.x + vectorA.y * vectorB.y)
            
// 夾角
let angle = acos(pointMuti / (modA * modB))

向量的夾角已經(jīng)計(jì)算完畢,你是不是想說,這樣就做好了嘛,No,試驗(yàn)過程發(fā)現(xiàn),不管怎樣轉(zhuǎn)動(dòng),圖片永遠(yuǎn)向一個(gè)方向轉(zhuǎn)動(dòng),What?實(shí)際上,上述公式只能求兩個(gè)向量的夾角,但是,方向就沒辦法計(jì)算了,So,How? 請(qǐng)看下文。。。。

旋轉(zhuǎn)方向

大學(xué)學(xué)習(xí)線性變換的時(shí)候應(yīng)該有學(xué)過叉乘吧,當(dāng)時(shí)你一定在想,這玩意有個(gè)卵用,對(duì),它就是那個(gè)可以算出旋轉(zhuǎn)方向的卵玩意。
百科上的解釋如下:

a向量與b向量的向量積的方向與這兩個(gè)向量所在平面垂直,且遵守右手定則。(一個(gè)簡(jiǎn)單的確定滿足“右手定則”的結(jié)果向量的方向的方法是這樣的:若坐標(biāo)系是滿足右手定則的,當(dāng)右手的四指從a以不超過180度的轉(zhuǎn)角轉(zhuǎn)向b時(shí),豎起的大拇指指向是c的方向。)

也就是說,叉乘的結(jié)果可以決定a轉(zhuǎn)向b,還是b轉(zhuǎn)向a。
叉乘的算法就不詳細(xì)給大家描述了,貼上我的代碼:

// 叉乘求旋轉(zhuǎn)方向,順時(shí)針還是逆時(shí)針
let crossAB = vectorA.x * vectorB.y - vectorA.y * vectorB.x
let sign: Float = crossAB > 0.0 ? 1.0: -1.0

目前為止,我們的旋轉(zhuǎn)角度和旋轉(zhuǎn)方向都已經(jīng)準(zhǔn)備好,可以旋轉(zhuǎn)啦,

rotation += CGFloat(angle * sign)
self.imageView.transform = CGAffineTransform(rotationAngle: rotation)

再配上一些效果就是一個(gè)酷炫的單指旋轉(zhuǎn)嘍,本姑娘也是在探索中,如果有什么不對(duì)的歡迎指出,大家勿噴哦~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容