滑动拼图验证 | 点击文本验证 |
---|---|
滑动拼图验证
- 自动切图,只需完整图片(支持Bitmap,资源id,Drawable,网络图片)
- 可自定义拖动样式
- 可自定义滑块形状
- 可自定义滑块阴影
- 可自定义缺口样式
- 可自定义拖动条文字及颜色
- 可自定义背景图
- 可自定义背景图和拼图距离
- 可自定义seekBar前后左右距离
点击文字验证
- 文字横向平均分布,纵向随机分布
- 可自定义文字
- 可自定义正常和选中文字绘制笔
- 可自定义绘制正常和选中的文字背景
- 需提供每块文字的宽高
使用方式
将SlidePuzzleCaptchaView引入到布局文件中
<com.heng.captcha.puzzle.SlidePuzzleCaptchaView
android:id="@+id/slide_captcha"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:puzzleBackground="@drawable/bg_captcha_view"
app:dragTipText="按住按钮右滑,完成拼图验证"
app:dragTipTextColor="#444444"
app:puzzleCoverLayout="@layout/layout_cover_captcha"
app:puzzlePadding="5dp"
app:puzzleRatio="16:9"
/>
使用SlidePuzzleCaptchaHelper辅助类
SlidePuzzleCaptchaHelper.create(slideCaptchaView).setPuzzleDrawable(R.drawable.demo1)
.setCaptchaStrategy(DefaultCaptchaStrategy(this))
.matchedCallBack { matchedDegree, durcation -> }
SlidePuzzleCaptchaHelper 方法介绍
方法名 | 描述 |
---|---|
fun create(slideCaptchaView: SlidePuzzleCaptchaView): SlidePuzzleCaptchaHelper | SlidePuzzleCaptchaHelper静态构建方法 |
setPuzzleDrawable(@DrawableRes resId: Int) | 设置拼图图片资源 |
setPuzzleDrawable(drawable: Drawable) | 设置拼图Drawable |
setPuzzleBitmap(bitmap: Bitmap) | 设置拼图图片的bitmap |
setPuzzleNetWorkImage(url: String) | 设置网络图片 |
resetSeekBar() | 重置SeekBar,建议失败后调用 |
resetPuzzle() | 重置拼图,建议刷新时调用 |
matchedCallBack(matchedCallBack: (matchedDegree: Float,duration:Long) -> Unit) | 匹配结束后回调 matchedDegree 0表示完全匹配 duration匹配时长 |
getCoverView(): View | 获取覆盖层的View,对应自定义属性puzzleCoverLayout的layout |
setCaptchaStrategy(captchaStrategy: PuzzleCaptchaStrategy) | 设置验证策略 |
PuzzleCaptchaStrategy拼图绘制策略类,支持自定义,默认提供DefaultCaptchaStrategy
PuzzleCaptchaStrategy 方法说明
方法名 | 描述 |
---|---|
getBlockPath(): Path | 获取滑块绘制Path |
drawBlockShadow(canvas: Canvas,path: Path) | 设置滑块阴影 |
drawGap(canvas: Canvas,path: Path) | 绘制缺口内容 |
getGapPosition(xMin: Float,xMax: Float,yMin: Float,yMax: Float): Pair<Float, Float> | 获取缺口的坐标值,参数分别是坐标范围 first 宽 second 高 |
自定义属性
属性名 | 描述 |
---|---|
puzzleCoverLayout | 拼图浮层,可用于添加刷新按钮或者完成高亮动画等 |
dragTipText | 拖动条文字描述 |
dragTipTextColor | 拖动条描述文字颜色 |
puzzleRatio | 拼图宽高比 |
puzzleBackground | 拼图背景 |
puzzlePadding | 拼图背景和拼图之间距离 |
puzzlePaddingLeft | 拼图背景和拼图左侧距离 |
puzzlePaddingTop | 拼图背景和拼图上方距离 |
puzzlePaddingRight | 拼图背景和拼图右侧距离 |
puzzlePaddingBottom | 拼图背景和拼图下方距离 |
seekBarThumbOffset | seekBar偏移量 |
seekBarProgressDrawable | seekBar进度条样式 |
seekBarThumb | seekBar的滑动块样式 |
seekBarHeight | seekBar高度 |
seekBarMinHeight | seekBar最小高度 |
seekBarMarginLeft | seekBar距离左侧距离 |
seekBarMarginTop | seekBar距离上方距离 |
seekBarMarginRight | seekBar距离右侧距离 |
seekBarMarginBottom | seekBar距离下方距离 |
seekBarMargin | seekBar距离周围距离 |
TextCaptchaView继承自ImageView,支持ImageView的所有属性,在布局文件中引用
<com.heng.captcha.text.TextCaptchaView
android:id="@+id/text_captcha"
android:background="@drawable/demo4"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="16:9"/>
设置文本,设置监听
textCaptchaView.setText("万水千山","千万聪水火领山")
textCaptchaView.verifyCallBack = { isSuccess ->
Toast.makeText(this, if (isSuccess) "验证成功" else "验证失败", Toast.LENGTH_SHORT).show()
}
findViewById<View>(R.id.refresh).setOnClickListener {
textCaptchaView.refresh()
}
textCaptchaView主要方法/属性
方法/属性 | 描述 |
---|---|
refresh() | 刷新文字位置 |
setText(targetText: String, allText: String) | 设置目标文字和全部文字 |
setCaptchaStrategy(captchaStrategy: TextCaptchaStrategy) | 设置文字绘制策略 |
verifyCallBack: ((isSuccess: Boolean) -> Unit) | 设置验证回调 |
TextCaptchaStrategy自定义文字的绘制样式 默认提供DefaultTextCaptchaStrategy
TextCaptchaStrategy方法说明
方法名 | 描述 |
---|---|
getTextPaint(): Paint | 获取绘制正常文字的paint |
getSelectedTextPaint(): Paint | 获取绘制选中文字的paint |
drawBackGround(canvas: Canvas, centerX: Float, centerY: Float) | 绘制正常文字背景,centerX,centerY是文字的中心点 |
drawSelectedBackGround(canvas: Canvas, centerX: Float, centerY: Float) | 绘制选中文字背景,centerX,centerY是文字的中心点 |
getEachWidthAndHeight(): Pair<Int, Int> | 获取每块文字的宽高 first 宽 second 高 |
在根项目的build.gradle增加以下配置
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
在对应模块下的build.gradle中增加以下配置
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-kapt'
dependencies {
implementation 'com.github.Jiaoshichun:Captcha:1.0.0'
}
- 文字绘制的起始位置是baseLine
paint的FontMetrics属性
TextCaptchaView计算文字中心,在Y轴是通过 (FontMetrics.descent-FontMetrics.ascent)/2
- canvas.clipPath方法裁剪的是画布,先剪切画布,再画bitmap,才能实现剪切效果
- 必须设置drawable.setBounds(0, 0, width, height)后再画drawable,才能保证剪切时控件和drawable大小相同,最后需要恢复drawable的bound,否则可能会出现图片显示小的问题
val tempBitmap = Bitmap.createBitmap(width, height, ARGB_8888)
val clipCanvas = Canvas(tempBitmap!!)
val bounds = drawable.copyBounds()
drawable.setBounds(0, 0, width, height)
clipCanvas.clipPath(blockPath)
drawable.draw(clipCanvas)
drawable.setBounds(bounds.left, bounds.top, bounds.right, bounds.bottom)