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

原创 2015年11月18日 20:33:59

自定义 相机 及取景框 绘制

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

}
  • 辅助类

    “` android
    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);
}

}

“`
- 源码 提交Git@osc 维护 下载地址:http://git.oschina.net/zhoulinxue/ZCamera.git

自定义相机取景框

在项目中需要对上传身份证,就需要实现只拍摄指定区域,所以就要往相机上加一个蒙版 并且要留出身份证同比例的透明框。 预览结果: 今天就只写这个蒙版框,关于这个其实大家应该都能写出来 ,我相信...
  • yang1124190589
  • yang1124190589
  • 2017年11月18日 09:39
  • 189

android 自定义view 实现定制二维码扫描框

上一篇文章说到如何使用google的zxing开源框架android导入zxing进行二维码开发,本篇就讲讲如何通过自定义ViewFinderView这个类来制作我们自己的扫描框。首先在com\goo...
  • SakuraMashiro
  • SakuraMashiro
  • 2017年06月30日 15:00
  • 1851

android Zxing 扫描区域的大小设置和自定义扫描view

自己改造的Zxing 扩大扫描范围  实现自定义扫描布局 主要是CodeView 里面很详细的代码自定义view  CameraManager里面的四个参数 MIN_FRAME_WIDTH 、MIN_...
  • qq_28130037
  • qq_28130037
  • 2016年06月24日 16:37
  • 3221

iOS - 自定义相机取景框

UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init]; imagePicker.delega...
  • alex_birdlion
  • alex_birdlion
  • 2016年11月02日 14:35
  • 2009

三十九 自定义相机拍照界面遇到拍照区域设置的问题

这几天比较闲就抄了个自定义拍照的demo 然后在设置 self.previewLayer的拍照区域的时候,就算我设置了从0开始,他的拍照区域还是在中间的一部分,不会改变,但是高度和起点y值是可以改变的...
  • wang6177
  • wang6177
  • 2018年02月02日 16:21
  • 22

IOS 使用相机拍照和自定义拍照界面

  • 2015年04月01日 12:52
  • 88KB
  • 下载

iOS自定义相机界面(实现自定义裁剪框)

  • 2016年03月07日 18:14
  • 80KB
  • 下载

android自定义相机带取景框

  • 2016年11月19日 19:54
  • 156KB
  • 下载

适配android 7的自定义相机的预览及拍照

import android.Manifest; import android.app.Activity; import android.content.Context; import android...
  • chengjiamei
  • chengjiamei
  • 2017年02月06日 18:34
  • 2544

android 相机圆形,矩形拍照预览

首先,相机这块我也不是特别懂,之前也没开发过这块。参考了YanZi大神的文章http://blog.csdn.net/yanzi1225627/article/details/34931759不多说,...
  • wu244208909
  • wu244208909
  • 2016年08月25日 15:35
  • 865
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何为自定义相机添加 取景框|扫描框 |预览框|矩形框
举报原因:
原因补充:

(最多只允许输入30个字)