View 随着手指的移动而放大和旋转

一、效果

     

    如上图，手指头放在mExpendItemView，当手指头移动的时候，mTouchImageView随着mExpendItemView的移动而缩放和旋转

二、关键源码

		private void initAttribute() {
			mCenterX = mTouchImageView.getX() + mTouchImageView.getWidth() / 2;
			mCenterY = mTouchImageView.getY() + mTouchImageView.getHeight() / 2;
			mOriginX = mTouchImageView.getX() + mTouchImageView.getWidth()
					- mCenterX;
			mOriginY = mTouchImageView.getY() + mTouchImageView.getHeight()
					- mCenterY;
			ma1 = (float) (Math.atan2(mOriginY, mOriginX) * 180 / Math.PI);
		}

		private void touchExpandView(View v, MotionEvent event) {
			switch (event.getAction() & MotionEvent.ACTION_MASK) {
			case MotionEvent.ACTION_DOWN:
				mCorrectionX = event.getRawX() - v.getX();
				mCorrectionY = event.getRawY() - v.getY();

				initAttribute();

				break;

			case MotionEvent.ACTION_MOVE:
				v.setX(getDistanceX(event));
				v.setY(getDistanceY(event));
				setScaleAndRotate(event);
				break;

			}
		}

		private float getDistanceX(MotionEvent event) {
			return event.getRawX() - mCorrectionX;
		}

		private float getDistanceY(MotionEvent event) {
			return event.getRawY() - mCorrectionY;
		}

		private void setScaleAndRotate(MotionEvent event) {
			float x2 = mExpendItemView.getX() + INT_EXPAND_WIDTH / 2 - mCenterX;
			float y2 = mExpendItemView.getY() + INT_EXPAND_HEIGHT / 2
					- mCenterY;

			float a2 = (float) (Math.atan2(y2, x2) * 180 / Math.PI);
			mTouchImageView.setRotation(a2 - ma1);
			float r1 = (float) Math.sqrt(mOriginX * mOriginX + mOriginY
					* mOriginY);
			float r2 = (float) Math.sqrt(y2 * y2 + x2 * x2);
			float scale = r2 / r1;
			mTouchImageView.setScaleX(scale);
			mTouchImageView.setScaleY(scale);
		}
	

入口是touchExpandView, 需要监听OnTouchListener，然后在onTouch执行touchExpandView。

三、原理

    1、小图标mExpendItemView的移动

        简单的数学知识：

       mCorrectionX = event.getRawX() - v.getX();

       这个mCorrectionX就是touch点和mTouchImageView左上角的X坐标的距离。这个值在移动的过程中是不变的。

     所以，移动的时候，v的x坐标就是：

       v.getX()  = event.getRawX() - mCorrectionX.

      就是上面代码中的函数getDistanceX

    2、mTouchImageView的缩放和旋转

    很重要的一点，缩放和旋转都是相对于原始大小和角度的。坐标是相对于mTouchImageView的中心点。

     所以，先记录原始大小和角度：initAttribute()

    缩放的倍数，就是缩放后的半径除以原始大小的半径。半径的算法就是勾股定理。

   旋转的角度，就是上图的a2 - a1. 

  a2和a1的算法就是tan a = y / x.