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

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

拖動事件

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

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

因為最近也剛剛開始復(fù)習(xí)線性變換的算法,在紙上畫了畫旋轉(zhuǎn)的過程,發(fā)現(xiàn),這不就是求兩個向量之間的夾角嗎,哈哈哈~
好,那我們來回顧一下,向量的夾角公式

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

即: θ = arccos(a和b的點乘/a的模*b的模)
兩個向量a,b是從每次進(jìn)入拖動事件時的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,兩個向量已經(jīng)準(zhǔn)備好了,剩下的我們只要根據(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的點乘
let pointMuti = Float(vectorA.x * vectorB.x + vectorA.y * vectorB.y)
            
// 夾角
let angle = acos(pointMuti / (modA * modB))

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

旋轉(zhuǎn)方向

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

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

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

// 叉乘求旋轉(zhuǎn)方向,順時針還是逆時針
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)

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容