图片热区点击之二(边界反弹,缩放,移动)

背景:对图片的部分区域进行点击,响应相应的事件(可对图片进行放大,边界反弹,以及图片移动)

针对于前次的热区点击做了个补充

 1.对图片的部分区域进行可响应事件

 2.对图片进行缩放后,仍可响应区域点击事件

 3.对图片进行移动后.仍可响应区域点击事件

 4.当图片移出边界区域后,可进行回弹.

其效果图如下(GIF图片较大,只截取一部分,在模拟器上,缩放效果无法演示)

 部分关键性代码:

 a.对点击的区域进行判断,

		/**
		 * 检测是否在区域范围内
		 * @param rectf 从外部传可以重用
		 * @param x
		 * @param y
		 * @return
		 */
		public boolean isInArea(RectF rectf, float x, float y) {
			boolean resStatus = false;
			if(this.path != null) {
				rectf.setEmpty();
				path.computeBounds(rectf, true);
				if(isRectF) {
					//当是矩形时
					resStatus = rectf.contains(x, y);
				}else {
					//如果是多边形时
					Region region = new Region();
					region.setPath(path, region);
					region.setPath(path, new Region((int)rectf.left, (int)rectf.top, (int)rectf.right, (int)rectf.bottom));
					resStatus = region.contains((int)x, (int)y);
				}
			}
			return resStatus;
		}

 b. 滑动或缩放完成后,是否移出边界检测

	/**
	 * 边界反弹事件检测
	 * @param event
	 */
	protected void upToCheckOutOfSide(MotionEvent event) {
		float scale = getCurrentScale();
		float[] moveXY = getCurrentMoveXY();
		float curBitWidth = scale * BIT_WIDTH;
		float curBitHeight = scale * BIT_HEIGHT;
		float[] dstXY = new float[2];
		boolean needMove = false;
		dstXY[0] = moveXY[0];
		dstXY[1] = moveXY[1];
		//当图片的高度小于视图高度时
		if(curBitHeight <= VIEW_HEIGHT) {
			needMove = true;
			dstXY[1] = (VIEW_HEIGHT - curBitHeight) / 2.0f;
		}
		
		//当图片的宽度小于视图宽度时
		if(curBitWidth <= VIEW_WIDTH) {
			needMove = true;
			dstXY[0] = (VIEW_WIDTH - curBitWidth) / 2.0f;
		}
		
		//当图片高度大于视图的高度时
		if(curBitHeight > VIEW_HEIGHT) {
			float distance = event.getY() - mPointF.y;
			//手向下滑动
			if(distance > 0) {
				if(moveXY[1] > 0) {
					dstXY[1] = 0;
					needMove = true;
				}
				//手向上滑动
			}else if(distance < 0) {
				float goalY = VIEW_HEIGHT - curBitHeight;
				if(moveXY[1] < goalY) {
					dstXY[1] = goalY;
					needMove = true;
				}
			}
		}
		//图片的当前宽度大小视图的高度时
		if(curBitWidth > VIEW_WIDTH) {
			float distance = event.getX() - mPointF.x;
			//向右滑动
			if(distance > 0) {
				if(moveXY[0] > 0) {
					dstXY[0] = 0;
					needMove = true;
				}
				//向左滑动
			}else if(distance < 0) {
				float goalX = VIEW_WIDTH - curBitWidth;
				if(moveXY[0] < goalX) {
					dstXY[0] = goalX;
					needMove = true;
				}
			}
		}
		
		if(needMove) {
			mViewHandler.postDelayed(new MoveRunnable(moveXY[0], moveXY[1], dstXY[0], dstXY[1]), 0);
		}
	}

 c.边界移动的Runnable

	/**
	 * 反弹时的动画线程
	 */
	protected class MoveRunnable implements Runnable {
		
		//移动的步长
		private final static int MOVE_STEEP = 20;
		//移动的方向
		private float direct;
		//是X方向上的移动还是Y方向上的移动
		private boolean isMoveX;
		
		private float srcX, srcY, dstX, dstY;
		
		//一元一次方程
		private float a, b;
		
		public MoveRunnable(float srcX,  float srcY, float dstX, float dstY) {
			this.srcX = srcX;
			this.srcY = srcY;
			this.dstX = dstX;
			this.dstY = dstY;
			//求解A，B
			if((dstY - srcY) != 0 && (dstX - srcX) != 0) {
				a = (dstY - srcY) / (dstX - srcX);
				b = dstY - a * dstX;
			}
			//以长的作为出发点
			isMoveX = Math.abs(srcX - dstX) > Math.abs(srcY - dstY);
			direct = isMoveX ? ((dstX - srcX) > 0 ? 1.0f : -1.0f) : ((dstY - srcY) > 0 ? 1.0f : -1.0f);
			isAnimation = true;
		}
		@Override
		public void run() {
			float distanceX = 0;
			float distanceY = 0;
			boolean isEnd = false;
			if(isMoveX) {
				distanceX = direct * MOVE_STEEP;
				srcX += distanceX;
				if(direct > 0) {
					if(srcX >= dstX) {
						isEnd = true;
						srcX -= distanceX;
						distanceX = dstX - srcX;
						srcX = dstX;
					}
				}else {
					if(srcX <= dstX) {
						isEnd = true;
						srcX -= distanceX;
						distanceX = dstX - srcX;
						srcX = dstX;
					}
				}
				
				if(a == 0 && b == 0) {
					distanceY = 0;
				}else {
					float tempY = a * srcX + b;
					distanceY = tempY - srcY;
					srcY = tempY;
				}
			}else {
				distanceY = direct * MOVE_STEEP;
				srcY += distanceY;
				if(direct > 0 ) {
					if(srcY >= dstY) {
						isEnd = true;
						srcY -= distanceY;
						distanceY = dstY - srcY;
						srcY = dstY;
					}
				}else {
					if(srcY <= dstY) {
						isEnd = true;
						srcY -= distanceY;
						distanceY = dstY - srcY;
						srcY = dstY;
					}
				}
				
				if(a == 0 && b == 0 ) {
					distanceX = 0;
				}else {
					float tempX = (srcY - b) / a;
					distanceX = tempX - srcX;
					srcX = tempX;
				}
			}
			mViewHandler.obtainMessage(0, new Float[]{distanceX, distanceY}).sendToTarget();
			if(!isEnd) {
				mViewHandler.postDelayed(this, 10);
			}else {
				isAnimation = false;
				LogUtils.d(TAG, isAnimation + ", End!");
			}
		}
	}

  其它的一些代码在程序中均已经做过注释

 

评论

6 楼 lx_yoyo 2015-08-11  

楼主如何在热点区域设置背景颜色

5 楼 89997915 2015-01-26  

楼主，我想在你这个基础上，增加点击区域的效果，麻烦楼主提示下

4 楼 89997915 2015-01-08  

楼主，膜拜了~

3 楼 lwhhuahua 2014-10-09  

太强大了太强大了

2 楼 xgxmlin 2014-08-11  

效果很好，学习学习

1 楼 wangxiaotaolhc 2014-01-23  

楼主太强大了，膜拜!!!