旋轉控制元件（一）：矩形的平移旋轉縮放
之前做了這個東西，一個內部素材加外操作邊框，包含基本的移動、縮放、旋轉，拉伸，快速定位，十字對齊等操作。常見使用場景如新增馬賽克，新增畫中畫等。感覺比較有意思而且中間也遇到了一些問題就記錄一下
先上圖：
scaleRotae.gif
如圖，這次就先講一下平移、旋轉、縮放
如果只是view做平移，有很多種實現方式比如通過layout、動畫等。
基於我們的使用場景：知道一個圖片的位置資訊和旋轉角度（中心旋轉），就可以將它畫出來。所以選擇了維護一個rect以及繞中心旋轉的角度rotation，這樣一些第三方如需要c層操作的地方，直接把這些資訊給c層也可以馬上明確。
一、如何畫
可以看出這個控制元件其實是一個圖片+外面一個框，不過要考慮到旋轉的情況，這裡我們就藉助matrix來做中心旋轉。其實相對的就是先把canvas繞圖片的中心做一次旋轉
@Override protected void dispatchDraw(Canvas canvas) {
canvas.save();
canvas.concat(mRotateMatrix);
mainDrawable.setBounds((int) mRect.left, (int) mRect.top, (int) mRect.right,
(int) mRect.bottom);
mainDrawable.draw(canvas);
canvas.drawRect(mRect, mPaint);
drawAnchors(canvas, mRect);
canvas.restore();
super.dispatchDraw(canvas);
}
虛線就用paint設定setPathEffect就可以了，虛線框角上的幾個角標也是藉助rect的位置資訊來畫出來
比如畫右上角的旋轉按鈕:
if (rotateDrawable != null) {
//右上角
rotateDrawable.setBounds(right - drawableWidth, top - drawableHeight, right + drawableWidth,
top + drawableHeight);
rotateDrawable.draw(canvas);
}
重點就是去計算上面程式碼的mRotateMatrix
private void invalidateMatrix() {
mRotateMatrix.reset();
mRotateMatrix.postTranslate(-mRect.centerX(), -mRect.centerY());
mRotateMatrix.postRotate(mRotation);
mRotateMatrix.postTranslate(mRect.centerX(), mRect.centerY());
}
這裡簡單提一下matrix。學過線性代數的都知道矩陣吧，matrix其實就是個3x3的矩陣，裡面的元素控制著旋轉、縮放、平移、錯切。直接new出來的矩陣是一個單位矩陣，描述的就是原來的圖形資訊，沒有做變換。
然後就是矩陣計算不滿足交換律，換句話說矩陣的前乘和後乘結果不一樣，反應在matrix裡面就是pre和post介面效果不一樣。
簡單點理解就是pre是放在操作佇列頭,post放在隊尾,還有個set會清空整個佇列再把它放進去。如果覺得擔心記混，推薦就用post介面，符合先進先出的原則，先post的先執行。
二、如何判斷什麼時候該縮放、旋轉或者平移
這裡肯定是事件處理相關的了。處於方便，我們在ontouchEvent的時候把操作委託給GestureDetector，在onDown回撥時判斷點到了哪裡，比如旋轉、縮放、平移。然後在onScroll回撥的時候通過每次的增量dx,dy計算縮放的比例、旋轉角度以及移動距離。
在手指頭按下時，由於我們知道圖片rec的位置資訊和角標位置資訊，所以通過x和y可以判斷是否點到了角標。
但是有個問題是，畫的矩形是在旋轉過的畫布上面，我們手指頭的xy是螢幕上的位置，這裡對應不起來，會出現旋轉後就點不到角標了
為了解決這個問題，手指頭按下的point需要利用matix做一次對映。在這裡的場景其實就相當於把旋轉的資訊考慮進去，其實也完全可以自己用三角函式算，但是matrix已經提供這種介面了，而且是呼叫的c層計算，效率應該更高些。
final Matrix rotateMatrix = new Matrix();
//反向旋轉回去 抵消canvas的旋轉
rotateMatrix.postTranslate(-mRect.centerX(), -mRect.centerY());
rotateMatrix.postRotate(-mRotation);
rotateMatrix.postTranslate(mRect.centerX(), mRect.centerY());
rotateMatrix.mapPoints(point);
eventX = point[0];
eventY = point[1];
RectF rectF = mRect;
//hit rotate右上
if (Math.abs(rectF.right - eventX) < drawableWidth * 2
&& Math.abs(rectF.top - eventY) < drawableHeight * 2) {
return HitModes.ROTATE;
}
需要注意的是這裡matix的旋轉角度和canvas的是相反的，其實就相當於轉了n角度，然後又轉回去n角度，相當於沒有轉。然後就可以按照沒有旋轉的情況判斷有沒有點到角標。
三、如何進行旋轉、縮放、平移
第二步已經判斷到使用者想要進行什麼操作了，接下來就是執行對應的操作了。
平移
先說簡單的平移吧，上面說了，我們的場景是一個矩形位置資訊+繞中心旋轉角度。所以平移其實就是改矩形的位置罷了,直接調rec的offset，然後一定要記得在重新繪製前更新canvas的旋轉矩陣
private void onMove(float dx, float dy) {
mRect.offset(-dx, -dy);
invalidateMatrix();
invalidate();
}
縮放
首先我們要明確一個東西，就是縮放時旋轉中心一定是不變的。所以可以算出中心和右下角的距離以及scroll後的中心和右下角的距離算出兩個距離的變化當成x的變化。我們這裡是等比例縮放，根據比例算出y的變化。
這裡做了一個縮放最小的限制，縮放到1.5個角度寬高後就不嫩再縮小了，這樣可以保證角標不會擠在一起。
private void onScale(float dx, float dy) {
// TODO: 2019/4/8 這裡的dx,dy計算需要改進
float[] pt1 = new float[] { mRect.centerX(), mRect.centerY() };
float[] pt2 = new float[] { mRect.right, mRect.bottom };
float[] pt3 = new float[] { mRect.right + dx, mRect.bottom + dy };
float distance1 = getPointDistance(pt1, pt2);
float distance2 = getPointDistance(pt1, pt3);
float distance = distance1 - distance2;
if (!checkCanScale(distance)) {
return;
}
mRect.inset(-distance, -distance / mRatio);
invalidateMatrix();
invalidate();
}
旋轉
至於旋轉其實也簡單，因為旋轉時中心也是不變的，類似縮放的操作。根據右上角的旋轉角標和中心的角度，以及scroll後右上角和中心的角度，這兩個的角度差就是旋轉角度。
已知兩個點的位置，通過math的atan2函式可以算出角度
private void onRotate(float triggerX, float triggerY) {
// TODO: 2019/4/8 這裡的dx,dy計算需要改進
float[] pt1 = new float[] { mRect.centerX(), mRect.centerY() };
float[] pt2 = new float[] { mRect.right, mRect.top };
float[] pt3 = new float[] { triggerX, triggerY };
double angel1 = PointUtil.calculateAngleBetweenPoints(pt2, pt1);
double angel2 = PointUtil.calculateAngleBetweenPoints(pt3, pt1);
mRotation = (float) (angel1 - angel2);
invalidateMatrix();
invalidate();
}
到這裡基本的平移旋轉縮放都介紹完了，詳細的一些位置計算可以參考demo
https://github.com/dynamicBai/ScaleRotateView 給個star鼓勵下唄
後面會逐步介紹：拉伸四邊的操作（旋轉中心會變化）、圖片在螢幕上的快速定位和微調、移動時十字輔助線對齊等效果。