如何爲自定義相機添加 取景框|掃描框 |預覽框|矩形框

自定義 相機 及取景框 繪製

  1. 在相機預覽組件上覆蓋一層 自定義ImageView 重寫 IamgeView的 ondraw() 方法。
    2.要實現第一步 首先要的到矩形框 左上角的 座標(全屏下是marginLeft(左) marjinTop(上)-忽略單位) 還有 寬(width) 長(height) 來獲得矩形區域 。
  2. 就是 重寫ondraw()了 要用到 畫布canvas 的方法 畫矩形 drawRect 來完成 畫出矩形 還須要 畫筆Paint 來設置 屬性 及 顏色 透明等等。 下面上代碼

/* 
 * Copyright (c) 2015-2020 Founder Ltd. All Rights Reserved. 
 * 
 *zhx for  org
 * 
 * 
 */

package org.zhx.view.camera.widget;

import org.zhx.view.camera.util.DisplayUtil;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Point;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

/**
 * 
 * 但願有一天能夠開源出來 org.zhx
 * 
 * @version 1.0, 2015-11-15 下午7:11:49
 * @author zhx
 */
public class OverlayerView extends ImageView {
	private static final String TAG = OverlayerView.class.getSimpleName();

	private Paint mLinePaint;
	private Paint mAreaPaint;
	private Rect mCenterRect = null;
	private Context mContext;
	private Paint paint;
	private int widthScreen, heightScreen;

	public OverlayerView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		initPaint();
		mContext = context;
		// 獲取屏幕px值 組裝成一個 point對象
		Point p = DisplayUtil.getScreenMetrics(mContext);
		widthScreen = p.x;
		heightScreen = p.y;
	}

	private void initPaint() {
		// 繪製中間透明區域矩形邊界的Paint
		mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
		mLinePaint.setColor(Color.BLUE);
		mLinePaint.setStyle(Style.STROKE);
		mLinePaint.setStrokeWidth(5f);
		// 值不爲0 那麼透明取景框 周圍就會有線 看需求 修改值就行 個人項目部須要 線 因此透明
		mLinePaint.setAlpha(0);

		// 繪製四周陰影區域 的畫筆
		mAreaPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
		mAreaPaint.setColor(Color.GRAY);
		mAreaPaint.setStyle(Style.FILL);
		mAreaPaint.setAlpha(100);
		paint = new Paint();

	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		Log.i(TAG, "onDraw...");
		if (mCenterRect == null)
			return;

		// 繪製陰影區域 2 爲 4個角上短線的 高度
		canvas.drawRect(0, 0, widthScreen, mCenterRect.top - 2, mAreaPaint);
		canvas.drawRect(0, mCenterRect.bottom + 2, widthScreen, heightScreen,
				mAreaPaint);
		canvas.drawRect(0, mCenterRect.top - 2, mCenterRect.left - 2,
				mCenterRect.bottom + 2, mAreaPaint);
		canvas.drawRect(mCenterRect.right + 2, mCenterRect.top - 2,
				widthScreen, mCenterRect.bottom + 2, mAreaPaint);
		// 短線的顏色 和透明度
		paint.setColor(Color.WHITE);
		paint.setAlpha(150);
		// 50爲 4角短線的長度
		canvas.drawRect(mCenterRect.left - 2, mCenterRect.bottom,
				mCenterRect.left + 50, mCenterRect.bottom + 2, paint);// 左下 底部

		canvas.drawRect(mCenterRect.left - 2, mCenterRect.bottom - 50,
				mCenterRect.left, mCenterRect.bottom, paint);// 左下 左側

		canvas.drawRect(mCenterRect.right - 50, mCenterRect.bottom,
				mCenterRect.right + 2, mCenterRect.bottom + 2, paint);// 右下 右側
		canvas.drawRect(mCenterRect.right, mCenterRect.bottom - 50,
				mCenterRect.right + 2, mCenterRect.bottom, paint);// 右下 底部

		canvas.drawRect(mCenterRect.left - 2, mCenterRect.top - 2,
				mCenterRect.left + 50, mCenterRect.top, paint);// 左上 頂部
		canvas.drawRect(mCenterRect.left - 2, mCenterRect.top,
				mCenterRect.left, mCenterRect.top + 50, paint);// 左上 側邊
		canvas.drawRect(mCenterRect.right - 50, mCenterRect.top - 2,
				mCenterRect.right + 2, mCenterRect.top, paint);// 右上 頂部
		canvas.drawRect(mCenterRect.right, mCenterRect.top,
				mCenterRect.right + 2, mCenterRect.top + 50, paint);// 右上 右側

		// 繪製目標透明區域
		canvas.drawRect(mCenterRect, mLinePaint);
		super.onDraw(canvas);
	}

	public Rect getmCenterRect() {
		return mCenterRect;
	}

	/**
	 * 設置 取景框 的矩形框 。
	 * 
	 * @param value
	 *            矩形取景框
	 * @return
	 * @throws Exception
	 * @author zhx
	 */

	public void setmCenterRect(Rect mCenterRect) {
		this.mCenterRect = mCenterRect;
		postInvalidate();
	}

}
  • 輔助類
package org.zhx.view.camera.util;

import android.content.Context;
import android.graphics.Point;
import android.graphics.Rect;
import android.util.DisplayMetrics;
import android.util.Log;

/**
* 
* 但願有一天能夠開源出來 org.zhx
* 
* @version 1.0, 2015-11-15 下午5:23:57
* @author zhx
*/
public class DisplayUtil {

   private static final String TAG = DisplayUtil.class.getSimpleName();

   public static int dip2px(Context context, float dipValue) {
   	final float scale = context.getResources().getDisplayMetrics().density;
   	return (int) (dipValue * scale + 0.5f);
   }

   /**
    * 
    * @param value
    * @return int
    * @throws Exception
    * @author zhx
    */
   public static int px2dip(Context context, float pxValue) {
   	final float scale = context.getResources().getDisplayMetrics().density;
   	return (int) (pxValue / scale + 0.5f);
   }

   /**
    * 
    * @param value
    * @return
    * @throws Exception
    * @author zhx
    */
   public static Point getScreenMetrics(Context context) {
   	DisplayMetrics dm = context.getResources().getDisplayMetrics();
   	int w_screen = dm.widthPixels;
   	int h_screen = dm.heightPixels;
   	Log.i(TAG, "Screen---Width = " + w_screen + " Height = " + h_screen
   			+ " densityDpi = " + dm.densityDpi);
   	return new Point(w_screen, h_screen);

   }

   /**
    * 
    * @param value
    * @return
    * @throws Exception
    * @author zhx
    */
   public static float getScreenRate(Context context) {
   	Point P = getScreenMetrics(context);
   	float H = P.y;
   	float W = P.x;
   	return (H / W);
   }

   /**
    * 
    * @param value
    * @return
    * @throws Exception
    * @author zhx
    */

   public static Rect createCenterScreenRect(Context context, Rect rect) {
   	int x1 = DisplayUtil.dip2px(context, rect.left);
   	int y1 = DisplayUtil.dip2px(context, rect.top);
   	int x2 = DisplayUtil.getScreenMetrics(context).x
   			- DisplayUtil.dip2px(context, rect.right);
   	int y2 = DisplayUtil.getScreenMetrics(context).y
   			- DisplayUtil.dip2px(context, rect.bottom);
   	Log.i(TAG, x1 + "@" + y1 + "@" + x2 + "@" + y2);
   	return new Rect(x1, y1, x2, y2);
   }
}