實現 Android 的照片選擇區域功能

主要有參考 pqpo/SmartCropper

顯示四條邊和八個點，

八個點： 4 個角和 4 條邊的中點

/* 裁剪區域,0， 左上 -> LeftTop, 1， 右上 -> RightTop，2， 右下 -> RightBottom, 3， 左下 -> LeftBottom*/Point[] mCropPoints;// 4 條邊的中點Point[] mEdgeMidPoints;

繪制

protected void onDrawCropPoint(Canvas canvas) {//繪制蒙版onDrawMask(canvas);//繪制輔助線onDrawGuideLine(canvas);//繪制選區線onDrawLines(canvas);//繪制錨點onDrawPoints(canvas);//繪制放大鏡// ... }

具體繪制部分：

繪制八個點

protected void onDrawPoints(Canvas canvas) {if (!checkPoints(mCropPoints)) { return;}// 繪制 4 個角for (Point point : mCropPoints) { canvas.drawCircle(getViewPointX(point), getViewPointY(point), dp2px(POINT_RADIUS), mPointFillPaint); canvas.drawCircle(getViewPointX(point), getViewPointY(point), dp2px(POINT_RADIUS), mPointPaint);}if (mShowEdgeMidPoint) { setEdgeMidPoints(); // 中間錨點 // 繪制 4 條邊上的中點 for (Point point : mEdgeMidPoints){canvas.drawCircle(getViewPointX(point), getViewPointY(point), dp2px(POINT_RADIUS), mPointFillPaint);canvas.drawCircle(getViewPointX(point), getViewPointY(point), dp2px(POINT_RADIUS), mPointPaint); }} }

繪制 4 條邊上的中點前，

先算出當前 4 條邊上中點的位置

public void setEdgeMidPoints(){// 中點不存在，就新建if (mEdgeMidPoints == null){ mEdgeMidPoints = new Point[4]; for (int i = 0; i < mEdgeMidPoints.length; i++){mEdgeMidPoints[i] = new Point(); }}// 維護 4 個頂點的位置，// 通過頂點的位置，算出邊上中點的位置int len = mCropPoints.length;for (int i = 0; i < len; i++){ // 為了避免極端情況， // 采用 （ 坐標 + 距離的一半 ） 的方式mEdgeMidPoints[i].set(mCropPoints[i].x + (mCropPoints[(i+1)%len].x - mCropPoints[i].x)/2, mCropPoints[i].y + (mCropPoints[(i+1)%len].y - mCropPoints[i].y)/2);} }2， 拖動

拖動分 2 種情況，角點拖拽，中點平移

8 個類型， 4 個角點拖拽，4 個中點平移

enum DragPointType{LEFT_TOP,RIGHT_TOP,RIGHT_BOTTOM,LEFT_BOTTOM,TOP,RIGHT,BOTTOM,LEFT;// 判斷是角點拖拽，不是中點平移public static boolean isEdgePoint(DragPointType type){ return type == TOP || type == RIGHT || type == BOTTOM || type == LEFT;} }

移動的處理

@Override public boolean onTouchEvent(MotionEvent event) {int action = event.getAction();boolean handle = true;switch (action) { case MotionEvent.ACTION_DOWN:// 識別到，當前點mDraggingPoint = getNearbyPoint(event);if (mDraggingPoint == null) { handle = false;}break; case MotionEvent.ACTION_MOVE:// 移動toImagePointSize(mDraggingPoint, event);break; case MotionEvent.ACTION_UP:// 手指抬起，// 操作取消mDraggingPoint = null;break;}// 繪制// 更新完位置后，刷新繪制invalidate();return handle || super.onTouchEvent(event); }

識別到，當前點

private Point getNearbyPoint(MotionEvent event) {// 判斷 4 個角點，可用if (checkPoints(mCropPoints)) { for (Point p : mCropPoints) {// 找出當前的點if (isTouchPoint(p, event)) return p; }}// 判斷 4 個中點可用if (checkPoints(mEdgeMidPoints)) { for (Point p : mEdgeMidPoints){// 找出當前的點if (isTouchPoint(p, event)) return p; }}return null; }

找出當前的點，的方法

private static final float TOUCH_POINT_CATCH_DISTANCE = 15;private boolean isTouchPoint(Point p, MotionEvent event){float x = event.getX();float y = event.getY();float px = getViewPointX(p);float py = getViewPointY(p);double distance = Math.sqrt(Math.pow(x - px, 2) + Math.pow(y - py, 2));// 也就是，判斷距離if (distance < dp2px(TOUCH_POINT_CATCH_DISTANCE)) { return true;}return false; }2.1 ，角點拖拽

先介紹 4 個角點拖拽

private void toImagePointSize(Point dragPoint, MotionEvent event) {if (dragPoint == null) { return;}// 找出當前移動類型，// 是角點拖拽，還是中點平移DragPointType pointType = getPointType(dragPoint);int x = (int) ((Math.min(Math.max(event.getX(), mActLeft), mActLeft + mActWidth) - mActLeft) / mScaleX);int y = (int) ((Math.min(Math.max(event.getY(), mActTop), mActTop + mActHeight) - mActTop) / mScaleY);// 判斷可以移動// ... if (DragPointType.isEdgePoint(pointType)){ // ... // 中點平移} else { // 角點拖拽 // 實現很簡單， // 更新就好了 dragPoint.y = y; dragPoint.x = x;} }

找出當前移動類型，

是角點拖拽，還是中點平移

// 拿采集的點，找出對應的類型private DragPointType getPointType(Point dragPoint){if (dragPoint == null) return null;DragPointType type;// 看，是不是頂點 / 角點if (checkPoints(mCropPoints)) { for (int i = 0; i < mCropPoints.length; i++) {if (dragPoint == mCropPoints[i]) { // 找到了，直接返回 type = DragPointType.values()[i]; return type;} }}// 看，是不是中點if (checkPoints(mEdgeMidPoints)) { for (int i = 0; i < mEdgeMidPoints.length; i++){if (dragPoint == mEdgeMidPoints[i]){ // 找到了，直接返回 type = DragPointType.values()[4+i]; return type;} }}return null; }2.2，中點平移

private void toImagePointSize(Point dragPoint, MotionEvent event) {if (dragPoint == null) { return;}DragPointType pointType = getPointType(dragPoint);int x = // ...int y = // ...// 判斷可以移動// ... if (DragPointType.isEdgePoint(pointType)){ // 中點平移, // 拿到的是，一個偏移向量 int xoff = x - dragPoint.x; int yoff = y - dragPoint.y; moveEdge(pointType, xoff, yoff);} else { // 角點拖拽 // ...} }

拿到偏移向量，修改對應的兩個頂點的坐標

private void moveEdge(DragPointType type, int xoff, int yoff){switch (type){ case TOP:// 這邊的平移，比較簡單// 找到中點，旁邊的兩個焦點// 再移動位置movePoint(mCropPoints[P_LT], 0, yoff);movePoint(mCropPoints[P_RT], 0, yoff);break; case RIGHT:// 右移處理movePoint(mCropPoints[P_RT], xoff, 0);movePoint(mCropPoints[P_RB], xoff, 0);break; case BOTTOM:// 下移處理// ... case LEFT:// 左移處理// ... default: break;} }

簡單的平移代碼

拿到偏移向量， 修改坐標，完事

private void movePoint(Point point, int xoff, int yoff){if (point == null) return;int x = point.x + xoff;int y = point.y + yoff;// 檢查邊界if (x < 0 || x > getDrawable().getIntrinsicWidth()) return;if (y < 0 || y > getDrawable().getIntrinsicHeight()) return;point.x = x;point.y = y; }

中點平移增強

這里的中點平移，拿到平移向量后，

直接添加到中點旁邊的兩個角點上

效果增強為，中點平移，中點旁邊的兩個角點順著兩側邊，做平移計算稍微復雜，

知道中點之前的位置，和中點之后的位置，

知道中點與一角點，所在邊的斜率，

知道此角點的另一邊的斜率

知道角點，平移前的位置，

求解出角點，平移后的位置

這是一個方程式求解網站

變換坐標系，可能簡單些相關 github

demo 的 gradle 配置

到此這篇關于Android 照片選擇區域功能實現示例的文章就介紹到這了,更多相關Android 照片選擇區域內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！