前些天,分析了开源框架zxing的源码。里边有一个自定义的view,扫描界面的蒙层。这给我做自定义裁剪图片view的一些启发。因为,其实原理很相似,都是中间显示的图片没有被遮盖,四周有蒙层的效果。接下来,就按照这个思路实现这个自定义的view。
上图
效果分析
1 刚进来,设置蒙层刚好包裹图片显示的大小
2 当触摸的是边界的时候,增大蒙层的范围,即缩小透明区域的大小。
3 当触摸的是透明区域的内部时,移动手指,拖动整个透明的区域
实现细节
1 根据图片显示的大小,描绘蒙层
// 画阴影
canvas.drawRect(0, 0, frame.left, height, paint);
canvas.drawRect(frame.left, 0, frame.right, frame.top, paint);
canvas.drawRect(frame.right, 0, width, height, paint);
canvas.drawRect(frame.left, frame.bottom, frame.right, height,paint);
// 画圆点标注
canvas.drawCircle(frame.left, (frame.top + frame.bottom) / 2, 10,
tipPaint);
canvas.drawCircle(frame.right, (frame.top + frame.bottom) / 2, 10,
tipPaint);
canvas.drawCircle((frame.left + frame.right) / 2, frame.top, 10,
tipPaint);
canvas.drawCircle((frame.left + frame.right) / 2, frame.bottom, 10,
tipPaint);
2 判断是否触摸发生在边界上
2.1 判断
case MotionEvent.ACTION_DOWN:
downX = (int) event.getX();
downY = (int) event.getY();
if (checkContainsPoint(downX, downY)) {
touchInFrame = true;
if ((downX > frame.left - 10 && downX < frame.left + 10)
&& downY > frame.top && downY < frame.bottom) {
touchFrameLeft = true;
}
if ((downX > frame.right - 10 && downX < frame.right + 10)
&& downY > frame.top && downY < frame.bottom) {
touchFrameRight = true;
}
if ((downX > frame.left && downX < frame.right)
&& downY > frame.top - 10 && downY < frame.top + 10) {
touchFrameTop = true;
}
if ((downX > frame.left && downX < frame.right)
&& downY > frame.bottom - 10
&& downY < frame.bottom + 10) {
touchFrameBottom = true;
}
} else {
touchInFrame = false;
}
break;
通过四个标志位,标识触摸发生在哪条边界上
2.2 在边界上移动的操作
int currentX = (int) event.getX();
int currentY = (int) event.getY();
// 是否在边界上判断
if (touchFrameLeft) {
frame.left += currentX - downX;
if (frame.left <= bitmapRect.left) {
frame.left = bitmapRect.left;
}
frameWidth = frame.right - frame.left;
downX = currentX;
invalidate();
return true;
}
if (touchFrameRight) {
frame.right += currentX - downX;
if (frame.right >= bitmapRect.right) {
frame.right = bitmapRect.right;
}
frameWidth = frame.right - frame.left;
downX = currentX;
invalidate();
return true;
}
if (touchFrameTop) {
frame.top += currentY - downY;
if (frame.top <= bitmapRect.top) {
frame.top = bitmapRect.top;
}
frameHeight = frame.bottom - frame.top;
downY = currentY;
invalidate();
return true;
}
if (touchFrameBottom) {
frame.bottom += currentY - downY;
if (frame.bottom >= bitmapRect.bottom) {
frame.bottom = bitmapRect.bottom;
}
frameHeight = frame.bottom - frame.top;
downY = currentY;
invalidate();
return true;
}
3 判断是否触摸发生在透明区域内
3.1 判断
private boolean checkContainsPoint(int x, int y) {
Rect boundsRect = new Rect();
boundsRect.left = frame.left - 10;
boundsRect.top = frame.top - 10;
boundsRect.right = frame.right + 10;
boundsRect.bottom = frame.bottom + 10;
if (boundsRect.contains(x, y)) {
return true;
}
return false;
}
通过点击位置与透明区域的四条边界(rect),标识触摸发生在透明区域内
3.2 在透明区域内移动的操作
// 触摸发生不属于边界
frame.left += currentX - downX;
frame.right += currentX - downX;
frame.top += currentY - downY;
frame.bottom += currentY - downY;
if (frame.left <= bitmapRect.left) {
frame.left = bitmapRect.left;
frame.right = bitmapRect.left + frameWidth;
}
if (frame.right >= bitmapRect.right) {
frame.left = bitmapRect.right - frameWidth;
frame.right = bitmapRect.right;
}
if (frame.top <= bitmapRect.top) {
frame.top = bitmapRect.top;
frame.bottom = bitmapRect.top + frameHeight;
}
if (frame.bottom >= bitmapRect.bottom) {
frame.top = bitmapRect.bottom - frameHeight;
frame.bottom = bitmapRect.bottom;
}
downX = currentX;
downY = currentY;
invalidate();
上边的操作都是通过onTouchEvent来实现的,移动的过程必须要注意不能让透明区域超过图片显示的边界
4 当点击了裁剪的按钮,通过透明区域与图片的显示比例,裁剪图片,并将裁剪的图片保存在本地,然后将图片的路径返回给上一个activity
4.1 通过Bitmap.createBitmap裁剪图片
4.2 由于部分图片过大,在裁剪界面预览的图片需要通过等比压缩再显示