如何为自定义相机添加 取景框|扫描框 |预览框|矩形框

Posted 摘星猿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何为自定义相机添加 取景框|扫描框 |预览框|矩形框相关的知识,希望对你有一定的参考价值。

自定义 相机 及取景框 绘制

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


以上是关于如何为自定义相机添加 取景框|扫描框 |预览框|矩形框的主要内容,如果未能解决你的问题,请参考以下文章

IOS如何在相机取景框的正中央加视图

web 图片上传实现本地预览

如何为表单框添加边框?

如何在视频中保存相机预览帧?

如何为文本框添加样式效果

如何为自定义 B2B 应用添加 Apple ID?