[Android实例] 拖动滑块进行图片拼合验证方式的实现
该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 拖动滑块进行图片拼合验证方式的实现
现在网站上有各种各样的验证码验证方式,比如计算大小,输入图片内容等,今天在一家网站上看到这样的一种效果,感觉眼前一亮,验证方式是给出一张缺失一点的图片,然后在旁边有缺失部分的滑块,需要将该滑块拖动到图片缺失的地方补全才能验证成功,看到这种方式,我就想如何在android上去实现这种滑动验证的效果。
我的思路是,自定义控件,重写onDraw方法
1.根据原图和控件的大小裁剪出对应比例的背景图片,然后在控件中绘制出该背景图片
// 根据原图进行裁剪出适合当前屏幕的背景图
if (bgBitmap == null) {
if (bitmap == null) {
return;
}
bgBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
Canvas bgCanvas = new Canvas(bgBitmap);
Rect bgRect;
if (bitmap.getWidth() / getWidth() < bitmap.getHeight() / getHeight()) {
bgRect = new Rect(0, 0, bitmap.getWidth(), bitmap.getWidth() * bitmap.getHeight() / getWidth());
} else {
bgRect = new Rect(0, 0, bitmap.getWidth() * bitmap.getHeight() / getHeight(), bitmap.getHeight());
}
bgCanvas.drawBitmap(bitmap, bgRect, new Rect(0, 0, getWidth(), getHeight()), paint);
bitmap.recycle();
bitmap = null;
}
// 绘制背景图
canvas.drawBitmap(bgBitmap, null, new Rect(0, 0, getWidth(), getHeight()), paint);
2.计算背景图片缺失部分的左上角的位置,以及缺失部分图片所在初始位置的起点,绘制缺失部分的位置并裁剪缺失部分的图片
// 计算验证的点和拖动起点
if (verifyPoint == null) {
int width = getWidth();
int height = getHeight();
int randomY = (int) (Math.random() * height);
int verifyX = width * 3 / 4 - 10;
int verifyY = randomY + height / 4 + 10 > height ? height * 3 / 4 - 10 : randomY;
verifyPoint = new Point(verifyX, verifyY);
startPoint = new Point(10, verifyY);
}
paint.setColor(Color.GRAY);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
// 绘制验证的位置
Rect verifyRect = new Rect(verifyPoint.x, verifyPoint.y, verifyPoint.x + getWidth() / 4,
verifyPoint.y + getHeight() / 4);
canvas.drawRect(verifyRect, paint);
// 裁剪拖动的图片
if (verifyBitmap == null) {
verifyBitmap = Bitmap.createBitmap(getWidth() / 4, getHeight() / 4, Config.ARGB_8888);
Canvas verifyCanvas = new Canvas(verifyBitmap);
verifyCanvas.drawBitmap(bgBitmap, verifyRect,
new Rect(0, 0, verifyBitmap.getWidth(), verifyBitmap.getHeight()), paint);
}
3.绘制裁剪的缺失部分图片
// 拖动图片的绘制
if (isMoving) {// 拖动中
canvas.drawRect(new Rect(movePoint.x - 2, movePoint.y - 2, movePoint.x + getWidth() / 4 + 2,
movePoint.y + getHeight() / 4 + 2), paint);
canvas.drawBitmap(verifyBitmap, null,
new Rect(movePoint.x, movePoint.y, movePoint.x + getWidth() / 4, movePoint.y + getHeight() / 4),
paint);
} else {
canvas.drawRect(new Rect(startPoint.x - 2, startPoint.y - 2, startPoint.x + getWidth() / 4 + 2,
startPoint.y + getHeight() / 4 + 2), paint);
canvas.drawBitmap(verifyBitmap, null,
new Rect(startPoint.x, startPoint.y, startPoint.x + getWidth() / 4, startPoint.y + getHeight() / 4),
paint);
}
4.重写onTouchEvent方法
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (event.getX() > startPoint.x && event.getX() < startPoint.x + getWidth() / 4
&& event.getY() > startPoint.y && event.getY() < startPoint.y + getHeight() / 4) {
movePoint = new Point(startPoint);
moveX = (int) event.getX();
isMoving = true;
invalidate();
return true;
}
break;
case MotionEvent.ACTION_MOVE:
if (isMoving) {
if (movePoint.x + getWidth() / 4 < getWidth() && movePoint.x > 0) {
invalidate();
}
movePoint = new Point((int) (movePoint.x + event.getX() - moveX), movePoint.y);
moveX = (int) event.getX();
return true;
}
break;
case MotionEvent.ACTION_UP:
if (isMoving) {
if (onVerifyListener != null) {
if (Math.abs(movePoint.x - verifyPoint.x) < 10) {
onVerifyListener.success();
} else {
onVerifyListener.fail();
}
}
isMoving = false;
movePoint = null;
moveX = 0;
invalidate();
return true;
}
break;
default:
break;
}
return super.onTouchEvent(event);
}
下载地址:项目代码
[Android实例] 拖动滑块进行图片拼合验证方式的实现的更多相关文章
- Android实例-TRectangle加载图片(XE8+小米2)
结果: 1.加载图片很流畅,可以做背景用. 2.现在是加载了正形与圆形,其他形状能不能加载呢?自己测试哦,要多动手才行. 3.需要把图片打到包里哦(路径为“assets\internal\”). 实例 ...
- Android 实例解说加入本地图片和调用系统拍照图片
在项目的开发过程我们离不开图片.而有时候须要调用本地的图片,有时候须要调用拍照图片.同一时候实现拍照的方法有两种,一种是调用系统拍照功能.还有一种是自己定义拍照功能. 而本博文眼下仅仅解说第一种方法, ...
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
- Android拖动和缩放图片
Android拖动和缩放图片 2014年5月9日 我们在使用应用其中常常须要浏览图片.比方在微信其中.点击图片之后能够对图片进行缩放. 本博客介绍怎样对图片进行拖拽和缩放.这首先要了解Android中 ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现
[Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...
- [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)
[Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...
- 原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...
- android实例3:拖动条
个人网站http://www.ravedonut.com/ 拖动条改变图片的透明度 xml <LinearLayout xmlns:android="http://schemas.an ...
随机推荐
- Lichee (五) sysconfig1.fex 配置系统
sysconfig配置系统,作为一个通用的软件平台,还希望通过它,可以适应用户不同的方案.通过给出一个对应的配置,用户的方案就可以自动运行,而不需要修改系统里面的代码,或者重新给出参数. 配置脚本的本 ...
- 【Ansible】Playbook实例
Learn to build Ansible playbooks with our guide, one step at a time In our previous posts, we introd ...
- Real-time 3D Reconstruction using Kinect
http://jiakaizhang.com/project/real-time-3d-reconstruction/ Real-time 3D Reconstruction using Kinect ...
- [Javascript] Using map() function instead of for loop
As an example, if Jason was riding the roller coaster (and when isn’t he), your goal would be to cha ...
- Java连接Oracle数据库示例
1.数据库复用模块 package cn.jzy.database; import java.sql.Connection; import java.sql.DriverManager; import ...
- alias的使用
alias,即别名.可以通过较短的别名,来实现对应的真实的命令.将alias定义在.bash_profile文件中,即可在任意目录下执行自己定义的这些命令了. 1. 命令 alias myDir='c ...
- VarPtr 得到地址 指针
在Basic语言演变成QBasic,然后到Visual Basic之前,VarPtr函数就已经存在了.开始,这个函数存在于VB运行库1.0版中.通过声明可以调用这个函数: Declare Functi ...
- OpenERP7.0安装后提示“not supported" ,如何去掉此提示
转自:http://blog.csdn.net/vnsoft/article/details/17581831 下载了新版本的OpenERP7.0安装测试,发现在登录后会提示如图的内容. 经过测试发现 ...
- [TODO]com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method
异常信息如下: 2018-10-30 20:00:50.230 ERROR java.util.concurrent.ExecutionException: com.alibaba.dubbo.rpc ...
- c# 判断端口是否被占用
这里主要用到:命名空间System.Net.NetworkInformation下定义了一个名为IPGlobalProperties的类 具体代码 class PortHelper { #region ...