该篇文章从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实例] 拖动滑块进行图片拼合验证方式的实现的更多相关文章

  1. Android实例-TRectangle加载图片(XE8+小米2)

    结果: 1.加载图片很流畅,可以做背景用. 2.现在是加载了正形与圆形,其他形状能不能加载呢?自己测试哦,要多动手才行. 3.需要把图片打到包里哦(路径为“assets\internal\”). 实例 ...

  2. Android 实例解说加入本地图片和调用系统拍照图片

    在项目的开发过程我们离不开图片.而有时候须要调用本地的图片,有时候须要调用拍照图片.同一时候实现拍照的方法有两种,一种是调用系统拍照功能.还有一种是自己定义拍照功能. 而本博文眼下仅仅解说第一种方法, ...

  3. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  4. Android拖动和缩放图片

    Android拖动和缩放图片 2014年5月9日 我们在使用应用其中常常须要浏览图片.比方在微信其中.点击图片之后能够对图片进行缩放. 本博客介绍怎样对图片进行拖拽和缩放.这首先要了解Android中 ...

  5. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  6. [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现

    [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...

  7. [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  8. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  9. android实例3:拖动条

    个人网站http://www.ravedonut.com/ 拖动条改变图片的透明度 xml <LinearLayout xmlns:android="http://schemas.an ...

随机推荐

  1. Lichee (五) sysconfig1.fex 配置系统

    sysconfig配置系统,作为一个通用的软件平台,还希望通过它,可以适应用户不同的方案.通过给出一个对应的配置,用户的方案就可以自动运行,而不需要修改系统里面的代码,或者重新给出参数. 配置脚本的本 ...

  2. 【Ansible】Playbook实例

    Learn to build Ansible playbooks with our guide, one step at a time In our previous posts, we introd ...

  3. Real-time 3D Reconstruction using Kinect

    http://jiakaizhang.com/project/real-time-3d-reconstruction/ Real-time 3D Reconstruction using Kinect ...

  4. [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 ...

  5. Java连接Oracle数据库示例

    1.数据库复用模块 package cn.jzy.database; import java.sql.Connection; import java.sql.DriverManager; import ...

  6. alias的使用

    alias,即别名.可以通过较短的别名,来实现对应的真实的命令.将alias定义在.bash_profile文件中,即可在任意目录下执行自己定义的这些命令了. 1. 命令 alias myDir='c ...

  7. VarPtr 得到地址 指针

    在Basic语言演变成QBasic,然后到Visual Basic之前,VarPtr函数就已经存在了.开始,这个函数存在于VB运行库1.0版中.通过声明可以调用这个函数: Declare Functi ...

  8. OpenERP7.0安装后提示“not supported" ,如何去掉此提示

    转自:http://blog.csdn.net/vnsoft/article/details/17581831 下载了新版本的OpenERP7.0安装测试,发现在登录后会提示如图的内容. 经过测试发现 ...

  9. [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 ...

  10. c# 判断端口是否被占用

    这里主要用到:命名空间System.Net.NetworkInformation下定义了一个名为IPGlobalProperties的类 具体代码 class PortHelper { #region ...