使用ivx實現經過角標調整圖片的經驗總結

今天咱們要作一個調整圖片的demo，要求可以經過拖動圖片的角標來實現旋轉和等比放縮的操做，核心設計思路就是經過鼠標移動的位置和圖片原位置的座標進行數學計算，從新設置圖片的寬高、座標和旋轉角度等屬性。

一.佈局
案例中圖片和角標都放置在了對象組父容器中。父容器設置了X、Y原點爲50%，即父容器的座標原點在其中心位置，再設置圖片組件的X、Y原點也爲50%，並令其XY座標爲(0,0)，則可以使圖片中心點與父容器中心點重合。

另外顯然右上角的角標與圖片中心點（亦父容器座標原點）的橫座標差值爲圖片寬度的一半，縱座標差值爲圖片高度的一半，圖片的寬度與高度咱們設置了300和406，因此圖標的座標就是(150,-203)，同理右下角圖標的XY座標爲(150,203)。

二.參數
案例中使用了數值變量和計數器保存一些參數。
1.數值變量
數值變量操做角標用於控制角標的兩種狀態，當它等於1，圖片上只顯示一個右下角角標，按住此角標能夠對圖片同時進行旋轉和等比縮放；當它等於2時，圖片的右上角會顯示旋轉角標，右下角顯示縮放角標。注意雖然等比變換角標與縮放角標樣式一致，但它們是兩個不一樣的組件。
是否修改是用於控制角標是否顯示的，三個角標的可見屬性都與它進行了數據綁定，當咱們點擊圖片區域時會根據它的當前值來0、1交替變化，使角標交替顯示。



2.計數器
案例中還使用了一些計數器存儲變量，其中H、W和L分別是原始圖片的寬、高和斜對角線長度；X-和Y-表示鼠標位置到父容器座標原點的橫座標差和縱座標差；0.5L則是鼠標位置到父容器座標原點的距離，其值可由X-和Y-計算得知；原始角存放的是角標與父容器的X軸造成的夾角。


三.事件
1.旋轉
下面的示意圖中紅色座標系是父容器的，紫色座標系是前臺界面的（實際上前臺座標系的座標原點在界面左上方，圖中紫色的X、Y軸只表示方向，不過這並不會影響計算角度和座標差值）。在手指/鼠標滑動事件中雖然咱們是在拖拽旋轉圖標，可是事件中返回的參數是手指/鼠標在前臺座標系下的XY座標，用它減去父容器在前臺下的座標就能夠的到X-、Y-，再經過反正切函數就能夠計算出角B的度數。另外，很容易看出角A和角C與同一個角互餘，所以角A等於角C，而角A就是父容器在前臺座標系下的旋轉角度。同時又有原始角=角B+角C，且原始角可由旋轉圖標在父容器座標系下的座標計算得知，因而有角A=角C=角B-原始角。這裏要注意一下不是原始角-角B，如下圖爲例，因爲Y軸正方向向下，因此Y-和旋轉圖標的Y座標都是負數，所以Math.atan2()的計算出來的結果會多一個負號，另外這個計算結果實際上是弧度值，轉化成角度值的公式爲角度=弧度*180/pi。


2.縮放
當點擊縮放角標時，咱們先將圖片的寬、高和對角線長度保存在計數器中；當手指/鼠標拖拽角標滑動時，依舊是採用相同的方法計算出X-和Y-，而後讓縮放觸發器播放。在縮放觸發器中咱們利用X-、Y-計算出0.5L，用0.5L*2/L就能獲得圖片的縮放比例，將其乘以原圖片的寬高就是放縮後圖片的寬高，最後再從新設置兩個角標的位置，依舊是取圖片寬度和高度的一半。



3.等比變換
上面兩種是操做角標等於2的狀況，當操做角標等於1時，只顯示等比變換角標，咱們拖拽它能夠同時進行放縮和旋轉。這裏其實就是同時執行了放縮和旋轉的兩套動做。點擊角標時保存圖片寬、高和對角線長度，拖拽時計算X-、Y-，而後讓等比變換觸發器播放，在觸發器事件中計算0.5L，從新設置圖片寬高和角標位置，最後調整父容器旋轉角度。



總結
這個demo自己並不複雜，主要難點就是位置座標的計算了。咱們在設計時要選取合適的原點位置，這樣能夠簡化不少操做。還有就是縮放的時候縮放比例只與鼠標到父容器座標原點的距離有關，咱們是先獲取這個距離算出比例再設置新圖片的寬高的，所以圖片的寬高都是按照同一個比例放縮而不會改變寬高比的。