拼图拖动滑块验证诀窍,android怎么导入图片

本文从eoe[Android转移过来，通过拖动原文地址：“Android实例”滑块实现图像的集成验证方式

目前，网站有多种验证码验证方式，如计算大小、输入图像内容等。 今天在某个网站上看到这样的效果，我感到眼前一亮。 验证方式是输出稍有欠缺的图像，旁边有缺口的滑块，必须将该滑块拖动到图像的缺口处进行补充，才能成功验证。 看了这个方式，我思考了如何用安卓实现这个幻灯片验证的效果。

我的想法是自定义控件，重写onDraw方法

1 .根据原始图像和控件的大小，剪切相应比例的背景图像，并在控件中绘制该背景图像

//从原画开始适合当前屏幕的背景图if(bgbitmap==null ) if(bgbitmap==null ) ) { return； } bgbitmap=bitmap.create bitmap (getwidth (，getHeight )、Config.ARGB_8888 )； canvasbgcanvas=new canvas (bgbitmap )； Rect bgRect； if(bitmap.getWidth(/getwidth ) bitmap.getheight (/getheight ) ) BGrect=newrect ) 0，0，bitmap.getwidth ) bitmap.getWidth ) ) bitmap.getHeight )/getHeight )，bitmap.getHeight ) ) ) 652 } BG canvas.draw bitht bitmap.recycle (； 位图=null； //背景图canvas.drawbitmap(bgbitmap，null，new rect (0，0，getWidth )，getHeight )，paint )； 2 .计算背景图像缺失部分左上角的位置和缺失部分图像所在初始位置的起点，绘制缺失部分的位置，裁剪缺失部分的图像

//计算验证的点并拖动起点if (验证点==空) { int width=getWidth )； int height=getHeight (； intrandomy=(int ) ) Math.random ) * height )； int verifyX=width * 3/4 - 10； intverifyy=random y height/410 height？ height * 3/4 - 10 : randomY； 验证点=新点(验证，验证)； sart point=新点(10，verifyY )； }paint.setcolor(color.gray )； paint.set style (paint.style.fill； paint.setantialias(true； //绘图验证位置rectverifyrect=new rect (verify point.x，verifyPoint.y，verifypoint.xgetwidth(/4，verify point.ygetheided ) //修剪拖动的图像if (verify bitmap==null ) verify bitmap=bitmap.create bitmap ) getwidt

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

下载地址：项目代码