實現(xiàn) Android 的照片選擇區(qū)域功能

主要有參考 pqpo/SmartCropper

顯示四條邊和八個點，

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

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

繪制

protected void onDrawCropPoint(Canvas canvas) {//繪制蒙版onDrawMask(canvas);//繪制輔助線onDrawGuideLine(canvas);//繪制選區(qū)線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 { // 角點拖拽 // 實現(xiàn)很簡單， // 更新就好了 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; }

中點平移增強

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

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

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

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

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

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

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

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

這是一個方程式求解網(wǎng)站

變換坐標系，可能簡單些相關(guān) github

demo 的 gradle 配置

到此這篇關(guān)于Android 照片選擇區(qū)域功能實現(xiàn)示例的文章就介紹到這了,更多相關(guān)Android 照片選擇區(qū)域內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！