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

主要有參考 pqpo/SmartCropper

顯示四條邊和八個(gè)點(diǎn)，

八個(gè)點(diǎn)： 4 個(gè)角和 4 條邊的中點(diǎn)

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

繪制

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

具體繪制部分：

繪制八個(gè)點(diǎn)

protected void onDrawPoints(Canvas canvas) {if (!checkPoints(mCropPoints)) { return;}// 繪制 4 個(gè)角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(); // 中間錨點(diǎn) // 繪制 4 條邊上的中點(diǎn) 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 條邊上的中點(diǎn)前，

先算出當(dāng)前 4 條邊上中點(diǎn)的位置

public void setEdgeMidPoints(){// 中點(diǎn)不存在，就新建if (mEdgeMidPoints == null){ mEdgeMidPoints = new Point[4]; for (int i = 0; i < mEdgeMidPoints.length; i++){mEdgeMidPoints[i] = new Point(); }}// 維護(hù) 4 個(gè)頂點(diǎn)的位置，// 通過頂點(diǎn)的位置，算出邊上中點(diǎn)的位置int len = mCropPoints.length;for (int i = 0; i < len; i++){ // 為了避免極端情況， // 采用 （ 坐標(biāo) + 距離的一半 ） 的方式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 種情況，角點(diǎn)拖拽，中點(diǎn)平移

8 個(gè)類型， 4 個(gè)角點(diǎn)拖拽，4 個(gè)中點(diǎn)平移

enum DragPointType{LEFT_TOP,RIGHT_TOP,RIGHT_BOTTOM,LEFT_BOTTOM,TOP,RIGHT,BOTTOM,LEFT;// 判斷是角點(diǎn)拖拽，不是中點(diǎn)平移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:// 識別到，當(dāng)前點(diǎn)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); }

識別到，當(dāng)前點(diǎn)

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

找出當(dāng)前的點(diǎn)，的方法

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 ，角點(diǎn)拖拽

先介紹 4 個(gè)角點(diǎn)拖拽

private void toImagePointSize(Point dragPoint, MotionEvent event) {if (dragPoint == null) { return;}// 找出當(dāng)前移動類型，// 是角點(diǎn)拖拽，還是中點(diǎn)平移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)){ // ... // 中點(diǎn)平移} else { // 角點(diǎn)拖拽 // 實(shí)現(xiàn)很簡單， // 更新就好了 dragPoint.y = y; dragPoint.x = x;} }

找出當(dāng)前移動類型，

是角點(diǎn)拖拽，還是中點(diǎn)平移

// 拿采集的點(diǎn)，找出對應(yīng)的類型private DragPointType getPointType(Point dragPoint){if (dragPoint == null) return null;DragPointType type;// 看，是不是頂點(diǎn) / 角點(diǎn)if (checkPoints(mCropPoints)) { for (int i = 0; i < mCropPoints.length; i++) {if (dragPoint == mCropPoints[i]) { // 找到了，直接返回 type = DragPointType.values()[i]; return type;} }}// 看，是不是中點(diǎn)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，中點(diǎn)平移

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

拿到偏移向量，修改對應(yīng)的兩個(gè)頂點(diǎn)的坐標(biāo)

private void moveEdge(DragPointType type, int xoff, int yoff){switch (type){ case TOP:// 這邊的平移，比較簡單// 找到中點(diǎn)，旁邊的兩個(gè)焦點(diǎn)// 再移動位置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;} }

簡單的平移代碼

拿到偏移向量， 修改坐標(biāo)，完事

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; }

中點(diǎn)平移增強(qiáng)

這里的中點(diǎn)平移，拿到平移向量后，

直接添加到中點(diǎn)旁邊的兩個(gè)角點(diǎn)上

效果增強(qiáng)為，中點(diǎn)平移，中點(diǎn)旁邊的兩個(gè)角點(diǎn)順著兩側(cè)邊，做平移計(jì)算稍微復(fù)雜，

知道中點(diǎn)之前的位置，和中點(diǎn)之后的位置，

知道中點(diǎn)與一角點(diǎn)，所在邊的斜率，

知道此角點(diǎn)的另一邊的斜率

知道角點(diǎn)，平移前的位置，

求解出角點(diǎn)，平移后的位置

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

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

demo 的 gradle 配置

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