這次講一下矩形的單邊拉伸，即非對稱拉伸。
對矩形旋轉(zhuǎn)縮放平移這些不怎么了解的可以參考我的上一篇旋轉(zhuǎn)控件（一）：矩形的平移旋轉(zhuǎn)縮放
可能有人會想矩形的單邊拉伸還不簡單？按照上一篇矩形控制位置和大小，matrix控制旋轉(zhuǎn)的思路，矩形拉伸不是分分鐘的事情，拉左邊就改left,拉上邊就改top，反正又不會影響旋轉(zhuǎn)角度。
一、發(fā)現(xiàn)問題
emmm....最開始聽到產(chǎn)品經(jīng)理加這個需求，我也是這么想的
按照以前的思路，四邊中心添加按鈕，然后touch選中后更改矩形對應(yīng)邊，so easy，拿出電腦啪啪啪一頓按
private void onStretch(int mode, float dx, float dy) {
//測試左邊拉伸
if (mode == HitModes.LEFT_STRETCH) {
mRect.left -= dx;
invalidateMatrix();
invalidate();
} else if (mode == HitModes.RIGHT_STRETCH) {
} else if (mode == HitModes.TOP_STRETCH) {
} else if (mode == HitModes.BOTTOM_STRETCH) {
}
}
測試一下拉伸左邊，然后跑起來看看效果
嗯，沒有旋轉(zhuǎn)時拉伸是這么回事。旋轉(zhuǎn)一點(diǎn)后怎么拉伸左邊，其他三邊也在變，導(dǎo)致整個圖片像是在偏移。特別是轉(zhuǎn)到接近90（270）度后，好像怎么拉也拉不動了。
what fuck!!!!
這就觸及到我的知識盲區(qū)了啊，明明旋轉(zhuǎn)角度沒變的說....
二、分析問題
冷靜分析，emmm...不旋轉(zhuǎn)時看起來是沒問題的，旋轉(zhuǎn)后就出問題了。旋轉(zhuǎn)角度是沒變的，和縮放應(yīng)該差不多的操作，也是繞中心旋轉(zhuǎn)，而且旋轉(zhuǎn)中心沒變。
等等，單邊拉伸的旋轉(zhuǎn)中心好像是變了，不能再用原來的旋轉(zhuǎn)矩陣了
private void invalidateMatrix() {
mRotateMatrix.reset();
mRotateMatrix.postTranslate(-mRect.centerX(), -mRect.centerY());
mRotateMatrix.postRotate(mRotation);
mRotateMatrix.postTranslate(mRect.centerX(), mRect.centerY());
}
上面代碼里的centerX,centerY和上一次計算matrix的應(yīng)該是不一樣了，這時候的matrix應(yīng)該是有問題的（用前朝的劍斬今朝的官 哈哈）;
為了驗(yàn)證和旋轉(zhuǎn)中心變化有關(guān)，做了一次測試。既然拉伸單邊旋轉(zhuǎn)中心有問題，那我拉伸對稱邊，這樣旋轉(zhuǎn)中心也是不變的，看看有沒有問題。
代碼改成這樣：
private void onStretch(int mode, float dx, float dy) {
if (mode == HitModes.LEFT_STRETCH) {
mRect.inset(-dx, 0);
invalidateMatrix();
invalidate();
} else if (mode == HitModes.RIGHT_STRETCH) {
} else if (mode == HitModes.TOP_STRETCH) {
} else if (mode == HitModes.BOTTOM_STRETCH) {
}
}
效果如下：
可以看出對稱拉伸后，由于旋轉(zhuǎn)中心不變，旋轉(zhuǎn)后拉伸是沒問題的。但是90度左右這個還是有拉不動的情況，不過這個是另外一個問題。所以可以確定單邊拉伸和旋轉(zhuǎn)中心有關(guān)。
三、解決問題
現(xiàn)在有2個問題，最大的問題就是旋轉(zhuǎn)中心改變后，導(dǎo)致拉伸漂移；另外一個問題其實(shí)有經(jīng)驗(yàn)的能猜到，就是旋轉(zhuǎn)后點(diǎn)對點(diǎn)之間的距離計算。
旋轉(zhuǎn)中心方案一:嘗試不更新matrix（失敗)
其實(shí)從上面代碼能看出來，每次拉伸后要重新計算旋轉(zhuǎn)矩陣，然后讓canvas去旋轉(zhuǎn)，從而使得旋轉(zhuǎn)角度應(yīng)用上去。那么既然單邊拉伸沒有改變角度，那我們在這種情況下不讓matrix改變是不是就行了？把重新計算martrix的注釋掉
if (mode == HitModes.LEFT_STRETCH) {
mRect.left -= dx;
//invalidateMatrix();
invalidate();
}
效果：
看就起來好了？其實(shí)是一種錯覺，而且很愚蠢的自欺欺人。類似view動畫和屬性動畫，這里就像是只改變了視圖效果，但是點(diǎn)擊區(qū)域和視圖已經(jīng)對不上了，這時候再去點(diǎn)角標(biāo)，基本上已經(jīng)不響應(yīng)了。因?yàn)轭愃岂R賽克效果需要c層來渲染這種，c層拿到的矩形位置和旋轉(zhuǎn)角度，渲染出來后就發(fā)現(xiàn)和view位置完全對不上了。
現(xiàn)在想來就感覺這個做法好蠢啊，反正當(dāng)事人就是非常后悔......
旋轉(zhuǎn)中心方案二：借助逆矩陣（失?。?/strong>
繼續(xù)分析一會后，感覺似乎直接改rect的做法有問題？
視圖上的rect應(yīng)該是被旋轉(zhuǎn)影響過的rect，也就是被matrix映射過的矩形。然后我們對rect的操作應(yīng)該是基于這個矩形，再用matrix的逆矩陣再把映射過的矩形映射回去，負(fù)負(fù)它就得正了哇。
if (mode == HitModes.LEFT_STRETCH) {
//映射矩形
RectF rectF = new RectF(mRect);
mRotateMatrix.mapRect(rectF);
rectF.left -= dx;
//取逆矩陣
Matrix matrix = new Matrix();
mRotateMatrix.invert(matrix);
//再映射回原來的矩形（負(fù)負(fù)得正）
matrix.mapRect(rectF);
mRect.set(rectF);
invalidateMatrix();
invalidate();
}
emmm...雖然結(jié)果很炸裂，但這次就不后悔了。就咱這天馬行空的想象力，我就問：還有誰?。。?/p>
旋轉(zhuǎn)中心方案三：自己計算旋轉(zhuǎn)中心(成功)
其實(shí)中間還試了matrix先繞左端縮放，再繞中心旋轉(zhuǎn)后給canvas,這樣也是可以實(shí)現(xiàn)這個拉伸效果，但是因?yàn)楹鸵oc層一個矩形位置和旋轉(zhuǎn)角度的場景不符，所以沒有使用這個。
說到底，前面就是失敗就是靠matrix計算不行，那么就自己算咯。
現(xiàn)在想來計算也不復(fù)雜。比如旋轉(zhuǎn)后拉伸左邊，旋轉(zhuǎn)中心一定是在left和right中心線上變化，那條線和水平的夾角可以通過旋轉(zhuǎn)角度得到。然后距離可以通過拉伸距離得到。
就構(gòu)成了一個直角三角形，通過三角函數(shù)得到旋轉(zhuǎn)中心的位移加上原旋轉(zhuǎn)中心就是新的旋轉(zhuǎn)中心。然后旋轉(zhuǎn)不影響大小，拉伸后的寬高加上新的旋轉(zhuǎn)中心就可以算出新的未旋轉(zhuǎn)的矩形。
private void onStretch(int mode, float dx, float dy) {
RectF rectF = new RectF(mRect);
if (mode == HitModes.LEFT_STRETCH) {
//映射矩形
rectF.left -= dx;
} else if (mode == RIGHT_STRETCH) {
rectF.right += dx;
} else if (mode == HitModes.TOP_STRETCH) {
rectF.top -= dy;
} else if (mode == HitModes.BOTTOM_STRETCH) {
rectF.bottom += dy;
}
invalidateAfterStretch(mode, rectF);
invalidate();
}
private void invalidateAfterStretch(int mode, RectF newRect) {
//新的中心
float x, y;
//老的中心
float xOld = mRect.centerX();
float yOld = mRect.centerY();
//新的寬高
float width = newRect.width();
float height = newRect.height();
float length;
if (mode == HitModes.RIGHT_STRETCH) {
//以right實(shí)驗(yàn) 算出right的拉伸
length = (newRect.right - mRect.right) / 2;
x = (float) (xOld + length * Math.cos(Math.toRadians(mRotation)));
y = (float) (yOld + length * Math.sin(Math.toRadians(mRotation)));
} else if (mode == HitModes.LEFT_STRETCH) {
length = -(newRect.left - mRect.left) / 2;
x = (float) (xOld - length * Math.cos(Math.toRadians(mRotation)));
y = (float) (yOld - length * Math.sin(Math.toRadians(mRotation)));
} else if (mode == HitModes.TOP_STRETCH) {
length = -(newRect.top - mRect.top) / 2;
x = (float) (xOld + length * Math.sin(Math.toRadians(mRotation)));
y = (float) (yOld - length * Math.cos(Math.toRadians(mRotation)));
} else {
length = (newRect.bottom - mRect.bottom) / 2;
x = (float) (xOld - length * Math.sin(Math.toRadians(mRotation)));
y = (float) (yOld + length * Math.cos(Math.toRadians(mRotation)));
}
//新的矩形
float right = (2 * x + width) / 2;
float left = (2 * x - width) / 2;
float bottom = (2 * y + height) / 2;
float top = (2 * y - height) / 2;
mRect.set(left, top, right, bottom);
if (mRect.height() > 0) {
mRatio = mRect.width() / mRect.height();
}
mRotateMatrix.reset();
mRotateMatrix.postTranslate(-x, -y);
mRotateMatrix.postRotate(mRotation);
mRotateMatrix.postTranslate(x, y);
}
效果也解決了拉伸單邊后旋轉(zhuǎn)中心變化的問題：
旋轉(zhuǎn)90度拉不動的問題
一個最極端的例子：旋轉(zhuǎn)90度后，你手指往下拉，這時候因?yàn)樗經(jīng)]有動，所以dx為0；但是代碼里作用加在left上的是dx，所以這時候出現(xiàn)完全拉不動的情況。
其實(shí)這個就是需要考慮旋轉(zhuǎn)角度后點(diǎn)對點(diǎn)的計算滑動距離了。比如拉左邊時，通過拉動前左邊按鈕和中心點(diǎn)的距離以及拉后新的左邊按鈕和中心算出來的距離(dx、dy通過matrix map后的值)的差值就可以當(dāng)成手指滑動的距離。
/**
* 根據(jù)控件拉伸方向，算出實(shí)際distance(包含rotate的影響)
*
* @param dx event dx
* @param dy event dy
* @param mode 上下左右
*/
private float calculateStretchDistance(float dx, float dy, int mode) {
//中心點(diǎn)
float pt1[] = new float[] { mRect.centerX(), mRect.centerY() };
//源rect上 edge上的圓點(diǎn)
float pt2[];
if (mode == RIGHT_STRETCH) {
pt2 = new float[] { mRect.right, mRect.centerY() };
} else if (mode == HitModes.LEFT_STRETCH) {
pt2 = new float[] { mRect.left, mRect.centerY() };
} else if (mode == HitModes.TOP_STRETCH) {
pt2 = new float[] { mRect.centerX(), mRect.top };
} else {
pt2 = new float[] { mRect.centerX(), mRect.bottom };
}
float points[] = new float[] { dx, dy };
Matrix rotateMatrix = new Matrix();
rotateMatrix.postRotate(-mRotation);
rotateMatrix.mapPoints(points);
//映射上角度后 實(shí)際的dx,dy
dx = points[0];
dy = points[1];
//result rect上 edge上的圓點(diǎn)
float pt3[];
if (mode == RIGHT_STRETCH) {
pt3 = new float[] { mRect.right + dx, mRect.centerY() + dy };
} else if (mode == HitModes.LEFT_STRETCH) {
pt3 = new float[] { mRect.left + dx, mRect.centerY() + dy };
} else if (mode == HitModes.TOP_STRETCH) {
pt3 = new float[] { mRect.centerX() + dx, mRect.top + dy };
} else {
pt3 = new float[] { mRect.centerX() + dx, mRect.bottom + dy };
}
double distance1 = PointUtil.calculatePointDistance(pt1, pt2);
double distance2 = PointUtil.calculatePointDistance(pt1, pt3);
return (float) (distance2 - distance1);
}
最后上圖 絲滑般的體驗(yàn)哈哈：
demo見https://github.com/dynamicBai/ScaleRotateView
都看到這里了，給個star鼓勵下唄
