camera预览界面
效果
之前是要求圆形的预览界面，具体可以看我之前的博客圆形预览画面
后来ui图出了，又是另一种效果，ui图如下：
思路
1.预览界面为最低层，充满整个布局
2.上面覆盖一层黑色（不透明度为70%）的遮罩，但遮罩有一个圆形的缺口（透明的），可以透过这个圆形缺口看清该范围的预览界面
3.绿色的扫描线可以通过绘制梯形来实现，然后通过动画实现上下移动
问题
怎么实现有一个圆形缺口的黑色遮罩，如果先绘制黑色背景，再绘制圆形，即使画圆的画笔的颜色设置成透明的，因为背景是黑色的，呈现的最终效果是整体是黑色的遮罩，没有中间透明的缺口。这个时候需要用到Xfermode，实现两个绘制图层的结合效果。至于什么是Xfermode，可移步到这篇文章Xfermode Mode 解析
代码
直接放代码了：
1.attrs.xml 自定义了一些属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ScanFrameViewStyle">
<attr name="backGroundColor" format="color" />
<attr name="circleWidth" format="dimension" />
<attr name="circleRadius" format="dimension" />
<attr name="circleColor" format="color" />
<attr name="scanLineWidth" format="float" />
<attr name="scanLineStartColor" format="color" />
<attr name="scanLineFinishColor" format="color" />
<attr name="scanDuration" format="integer" />
</declare-styleable>
</resources>
2.ScanFrameView.kt 黑色遮罩的自定义View，包括绿色的扫描线，核心是onDraw的实现
class ScanFrameView(context: Context, @Nullable attrs: AttributeSet?, defStyleAttr: Int) :
View(context, attrs, defStyleAttr) {
constructor(context: Context) : this(context, null)
constructor(context: Context, @Nullable attrs: AttributeSet?) : this(context, attrs, 0)
private var mBackGroundPaint: Paint
private var mCirclePaint: Paint
private var mScanLinePaint: Paint
//渐变色的起始值
private var mStartColor: Int
//渐变色的终止值
private var mFinishColor: Int
//圆形半径
private var mRadius: Float
//整个view的宽度
private var mWidth: Float = 0.0f
//整个view的高度度
private var mHeight: Float = 0.0f
//圆心的横坐标
private var mCenterX: Float = 0.0f
//圆心的纵坐标
private var mCenterY: Float = 0.0f
//扫描线（梯形）右上角的点对圆心的角度
private var mDegree: Double = 0.0
//扫描线（梯形）右下角的点对圆心的角度-右上角的点对圆心的角度的差值，体现为扫描线的线宽
private var mDegreeAdd: Double = 1.0
private val mXfermode: Xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_ATOP)
//遮罩的颜色
private var mBackGroundColor: Int
//扫描的动画时间
private var mDuration: Int
private var mAnimator: ValueAnimator? = null
init {
@SuppressLint("Recycle")
val typedArray: TypedArray =
context.obtainStyledAttributes(attrs, R.styleable.ScanFrameViewStyle)
mBackGroundPaint = Paint()
mBackGroundPaint.run {
style = Paint.Style.FILL
isAntiAlias = true // 设置抗锯齿
isDither = true // 设置抖动
}
mBackGroundColor = typedArray.getColor(R.styleable.ScanFrameViewStyle_backGroundColor, Color.WHITE)
mCirclePaint = Paint()
mCirclePaint.run {
style = Paint.Style.STROKE
isAntiAlias = true
isDither = true
strokeWidth = typedArray.getDimension(R.styleable.ScanFrameViewStyle_circleWidth, 10f)
color = typedArray.getColor(R.styleable.ScanFrameViewStyle_circleColor, Color.BLACK)
}
mRadius = typedArray.getDimension(R.styleable.ScanFrameViewStyle_circleRadius, 0.0f)
mScanLinePaint = Paint()
mScanLinePaint.run {
style = Paint.Style.FILL
strokeCap = Paint.Cap.ROUND
isAntiAlias = true
isDither = true
color = Color.GREEN
}
mDegreeAdd = typedArray.getFloat(R.styleable.ScanFrameViewStyle_scanLineWidth, 1.0f).toDouble()
mDuration = typedArray.getInt(R.styleable.ScanFrameViewStyle_scanDuration, 10000)
mStartColor = typedArray.getColor(R.styleable.ScanFrameViewStyle_scanLineStartColor, -1)
mFinishColor = typedArray.getColor(R.styleable.ScanFrameViewStyle_scanLineFinishColor, -1)
typedArray.recycle()
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
mWidth = (measuredWidth - paddingLeft - paddingRight).toFloat()
mHeight = (measuredHeight - paddingTop - paddingBottom).toFloat()
mCenterX = mWidth / 2
mCenterY = mHeight / 2
val short = min(mWidth, mHeight)
if (mRadius == 0.0f || mRadius * 2 > short) {
mRadius = short / 2
}
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
//绘制黑色遮罩，先绘制黑色背景，再绘制透明圆形
mBackGroundPaint.color = Color.BLACK //随便设个颜色值，只要不是透明的就行，防止第二次绘制时，mBackGroundPaint.color 被下面赋值了Color.TRANSPARENT 导致canvas.drawColor(mBackGroundColor)不起效果
val layerID = canvas.saveLayer(0.0f, 0.0f, mWidth, mHeight, mBackGroundPaint, ALL_SAVE_FLAG) //保存图层，下面通过estoreToCount恢复
canvas.drawColor(mBackGroundColor) //遮罩的颜色
mBackGroundPaint.xfermode = mXfermode //这里选择DST_ATOP
mBackGroundPaint.color = Color.TRANSPARENT //颜色设置成透明
canvas.drawCircle(mCenterX, mCenterY, mRadius, mBackGroundPaint) //透明的圆形
mBackGroundPaint.xfermode = null
canvas.restoreToCount(layerID)
//绘制白色框，圆弧
canvas.drawCircle(mCenterX, mCenterY, mRadius, mCirclePaint)
//角度制转弧度制
val radians = Math.toRadians(mDegree).toFloat()
val radiansAdd = Math.toRadians(mDegree + mDegreeAdd).toFloat()
//着色器，实现扫描线的渐变效果
takeIf { mStartColor != -1 && mFinishColor != -1 }?.run {
val y0 = mCenterY - mRadius * cos(radians)
val y1 = mCenterY - mRadius * cos(radiansAdd)
mScanLinePaint.shader = LinearGradient(0.0f, max(y0, y1), 0.0f, min(y0, y1), mStartColor, mFinishColor, Shader.TileMode.CLAMP)
}
//绘制扫描线，梯形
val path = Path()
path.moveTo(mCenterX + mRadius * sin(-radians), mCenterY - mRadius * cos(radians))
path.lineTo(mCenterX + mRadius * sin(radians), mCenterY - mRadius * cos(radians))
path.lineTo(mCenterX + mRadius * sin(radiansAdd), mCenterY - mRadius * cos(radiansAdd))
path.lineTo(mCenterX + mRadius * sin(-radiansAdd), mCenterY - mRadius * cos(radiansAdd))
path.close()
canvas.drawPath(path, mScanLinePaint)
}
//扫描动画，通过改变角度，实现扫描线上下移动
fun startScan() {
mAnimator?.run { cancel() }
mAnimator = ValueAnimator.ofFloat(0.0f, 360.0f)
mAnimator?.let {
it.addUpdateListener { animation ->
this.mDegree = (animation.animatedValue as Float).toDouble()
invalidate()
}
it.duration = mDuration.toLong()
it.interpolator = LinearInterpolator()
it.repeatCount = ValueAnimator.INFINITE
it.repeatMode = ValueAnimator.RESTART
it.start()
}
}
}
3.layout.xml 布局引用
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextureView
android:id="@+id/myBaby_textureView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.pateo.iot.app.customview.ScanFrameView
android:id="@+id/myBaby_scanFrameView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:backGroundColor="@color/colorBlack_70alpha"
app:circleColor="@color/colorWhite"
app:circleRadius="160dp"
app:circleWidth="2dp"
app:scanLineFinishColor="#0000FA9A"
app:scanLineStartColor="#00FA9A"
app:scanLineWidth="5.0"
app:scanDuration = "7000"
/>
<ImageView
android:id="@+id/myBaby_takePicture_back_img"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@mipmap/icon_back_white"
android:layout_marginTop="6dp"
android:layout_marginStart="11dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="请看向屏幕并维持3秒钟"
android:textColor="#FFFFFFFF"
android:textSize="24sp"
android:layout_marginTop="82dp"
android:gravity="center_horizontal"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="请在光线充足的地方"
android:textColor="#FFFFFFFF"
android:textSize="16sp"
android:layout_marginTop="118dp"
android:gravity="center_horizontal"
/>
<TextView
android:id="@+id/myBaby_takePicture_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:textSize="24sp"
android:textColor="#FFFFFFFF"
android:layout_marginBottom="20dp"
android:text="拍照" />
</FrameLayout>
遮罩的颜色（不透明度为70%的黑色）
<color name="colorBlack_70alpha">#B3000000</color>
最终的实现效果
开的后摄
3740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
