這次講一下矩形的單邊拉伸粉私，即非對稱拉伸顽腾。
對矩形旋轉(zhuǎn)縮放平移這些不怎么了解的可以參考我的上一篇旋轉(zhuǎn)控件（一）：矩形的平移旋轉(zhuǎn)縮放
可能有人會想矩形的單邊拉伸還不簡單？按照上一篇矩形控制位置和大小诺核，matrix控制旋轉(zhuǎn)的思路抄肖，矩形拉伸不是分分鐘的事情，拉左邊就改left,拉上邊就改top窖杀，反正又不會影響旋轉(zhuǎn)角度漓摩。

一、發(fā)現(xiàn)問題

emmm....最開始聽到產(chǎn)品經(jīng)理加這個需求陈瘦，我也是這么想的
按照以前的思路幌甘，四邊中心添加按鈕潮售，然后touch選中后更改矩形對應邊，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) {

    }
  }

測試一下拉伸左邊酥诽，然后跑起來看看效果

XiaoYing_Video_1554820377311.gif

嗯，沒有旋轉(zhuǎn)時拉伸是這么回事皱埠。旋轉(zhuǎn)一點后怎么拉伸左邊肮帐，其他三邊也在變，導致整個圖片像是在偏移边器。特別是轉(zhuǎn)到接近90（270）度后训枢，好像怎么拉也拉不動了。

what fuck!!!!

這就觸及到我的知識盲區(qū)了啊忘巧，明明旋轉(zhuǎn)角度沒變的說....

二恒界、分析問題

冷靜分析，emmm...不旋轉(zhuǎn)時看起來是沒問題的砚嘴，旋轉(zhuǎn)后就出問題了十酣。旋轉(zhuǎn)角度是沒變的，和縮放應該差不多的操作际长，也是繞中心旋轉(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的應該是不一樣了，這時候的matrix應該是有問題的（用前朝的劍斬今朝的官 哈哈）;
為了驗證和旋轉(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) {

    }
  }

效果如下：

XiaoYing_Video_1554822040747.gif

可以看出對稱拉伸后蜕提，由于旋轉(zhuǎn)中心不變森书，旋轉(zhuǎn)后拉伸是沒問題的。但是90度左右這個還是有拉不動的情況谎势，不過這個是另外一個問題凛膏。所以可以確定單邊拉伸和旋轉(zhuǎn)中心有關(guān)。

三脏榆、解決問題

現(xiàn)在有2個問題猖毫，最大的問題就是旋轉(zhuǎn)中心改變后，導致拉伸漂移须喂；另外一個問題其實有經(jīng)驗的能猜到吁断，就是旋轉(zhuǎn)后點對點之間的距離計算趁蕊。
旋轉(zhuǎn)中心方案一:嘗試不更新matrix（失敗)
其實從上面代碼能看出來，每次拉伸后要重新計算旋轉(zhuǎn)矩陣仔役，然后讓canvas去旋轉(zhuǎn)掷伙，從而使得旋轉(zhuǎn)角度應用上去。那么既然單邊拉伸沒有改變角度又兵，那我們在這種情況下不讓matrix改變是不是就行了任柜？把重新計算martrix的注釋掉

    if (mode == HitModes.LEFT_STRETCH) {
      mRect.left -= dx;
      //invalidateMatrix();
      invalidate();
    }

效果：

XiaoYing_Video_1554822823970.gif

看就起來好了？其實是一種錯覺沛厨，而且很愚蠢的自欺欺人宙地。類似view動畫和屬性動畫，這里就像是只改變了視圖效果逆皮，但是點擊區(qū)域和視圖已經(jīng)對不上了宅粥，這時候再去點角標，基本上已經(jīng)不響應了电谣。因為類似馬賽克效果需要c層來渲染這種粹胯，c層拿到的矩形位置和旋轉(zhuǎn)角度，渲染出來后就發(fā)現(xiàn)和view位置完全對不上了辰企。
現(xiàn)在想來就感覺這個做法好蠢啊，反正當事人就是非常后悔......

旋轉(zhuǎn)中心方案二：借助逆矩陣（失斂雒）
繼續(xù)分析一會后牢贸，感覺似乎直接改rect的做法有問題？
視圖上的rect應該是被旋轉(zhuǎn)影響過的rect镐捧，也就是被matrix映射過的矩形潜索。然后我們對rect的操作應該是基于這個矩形，再用matrix的逆矩陣再把映射過的矩形映射回去懂酱，負負它就得正了哇竹习。

if (mode == HitModes.LEFT_STRETCH) {
      //映射矩形
      RectF rectF = new RectF(mRect);
      mRotateMatrix.mapRect(rectF);
      rectF.left -= dx;
      //取逆矩陣
      Matrix matrix = new Matrix();
      mRotateMatrix.invert(matrix);
      //再映射回原來的矩形（負負得正）
      matrix.mapRect(rectF);
      mRect.set(rectF);
      invalidateMatrix();
      invalidate();
    }

XiaoYing_Video_1554824038837.gif

emmm...雖然結(jié)果很炸裂，但這次就不后悔了列牺。就咱這天馬行空的想象力整陌，我就問：還有誰！Ｏ沽臁泌辫！

旋轉(zhuǎn)中心方案三：自己計算旋轉(zhuǎn)中心(成功)
其實中間還試了matrix先繞左端縮放，再繞中心旋轉(zhuǎn)后給canvas,這樣也是可以實現(xiàn)這個拉伸效果九默，但是因為和要給c層一個矩形位置和旋轉(zhuǎn)角度的場景不符震放，所以沒有使用這個。
說到底驼修，前面就是失敗就是靠matrix計算不行殿遂，那么就自己算咯诈铛。
現(xiàn)在想來計算也不復雜。比如旋轉(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實驗  算出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)中心變化的問題：

XiaoYing_Video_1554825553894.gif

旋轉(zhuǎn)90度拉不動的問題
一個最極端的例子：旋轉(zhuǎn)90度后，你手指往下拉轻掩，這時候因為水平?jīng)]有動幸乒，所以dx為0；但是代碼里作用加在left上的是dx唇牧，所以這時候出現(xiàn)完全拉不動的情況罕扎。
其實這個就是需要考慮旋轉(zhuǎn)角度后點對點的計算滑動距離了。比如拉左邊時丐重，通過拉動前左邊按鈕和中心點的距離以及拉后新的左邊按鈕和中心算出來的距離(dx腔召、dy通過matrix map后的值)的差值就可以當成手指滑動的距離。

/**
   * 根據(jù)控件拉伸方向扮惦，算出實際distance(包含rotate的影響)
   *
   * @param dx event dx
   * @param dy event dy
   * @param mode 上下左右
   */
  private float calculateStretchDistance(float dx, float dy, int mode) {
    //中心點
    float pt1[] = new float[] { mRect.centerX(), mRect.centerY() };
    //源rect上 edge上的圓點
    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);
    //映射上角度后 實際的dx,dy
    dx = points[0];
    dy = points[1];

    //result rect上 edge上的圓點
    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);
  }

最后上圖 絲滑般的體驗哈哈：

XiaoYing_Video_1554826264821.gif

demo見https://github.com/dynamicBai/ScaleRotateView
都看到這里了臀蛛，給個star鼓勵下唄