Android 照片選擇區域功能實現示例
實現 Android 的照片選擇區域功能
主要有參考 pqpo/SmartCropper
1, 顯示
顯示四條邊和八個點,
八個點: 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 照片選擇區域內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- None Found