Harmonyos开源第三方组件-SwipeCaptcha_ohos3.0旋转验证组件

更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com##二级标题图验证组件SwipeCaptcha(https://github.com/mcxtzhang/SwipeCaptcha)，实现了鸿蒙迁移重构，代码已开源至(https://gitee.com/isrc_ohos/swipe-captcha_ohos)，获得多人Star和Fork，欢迎下载使用并提出宝贵意见！背景在之前的SwipeCaptcha_ohos2.0文章（https://harmonyos.51cto.com/posts/8787）中介绍过，系统为了保证注册或登录时没有机器人在运行，通常需要用户进行手动操作确认。本期SwipeCaptcha_ohos3.0是对前两个版本的验证方式进行升级得到的新验证方式——旋转验证。本验证方式以图片为背景，通过旋转旋转块，直至可以与背景图片无缝拼接完成验证。操作简单，安全性强。可应用于各种网站登录、注册、找回密码或投票等场景。组件效果展示组件运行成功后，可以通过旋转旋转块直到可以与背景图片拼接成一幅完整的图片来完成验证。对应图1所示的运行效果图，该组件提供的主要功能有：拖动图片下方的滑块改变旋转块的角度；验证成功，否则失败；验证完成后，可以点击滑动条下方的条形按钮重新生成验证码（即旋转块的角度随机设置）。图1旋转验证运行效果示例分析通过以上，相信您已经了解了SwipeCaptcha_ohos3.0组件的使用效果。下面将详细解释它的使用。其使用方法与SwipeCaptcha_ohos2.0组件类似。这里简单回顾一下，共分为5步：第一步，在xml文件中添加RotateCaptchaView控件。Step2.导入RotateCaptchaView类并声明类对象。Step3.绑定RotateCaptchaView控件，设置组件背景图片。Step4.设置回调处理函数。Step5.设置Button控件监听事件并重新生成验证区(1)在xml文件中添加RotateCaptchaView控件，显示旋转验证的动态效果。首先设置控件的高和宽，这里设置宽度跟随父控件的大小（match_parent），设置高度为220vp；然后将组件的左右边距设置为12vp，旋转块的半径设置为80vp。{//绘制边框canvas.drawPath(mPath,mPaint);});mLayout.addDrawTask((component,canvas)->{//绘制验证码canvas.rotate(mSlider.getProgress()*360/10000-randomDegree,mWidth/2f,(mHeight-SLIDER_HEIGHT)/2f);//根据拖动条画布的值调整旋转角度。translate(0,0);PixelMapHolderpixelMapHolder=newPixelMapHolder(pixelMap);//PixelMapHoldercanvas.clipPath(mPath,Canvas.ClipOp.INTERSECT);//根据路径裁剪canvascanvascanvas.scale(ratio,ratio);//缩放canvas与图像的程度一致if(ratio==ratioWidth){floatheightErr=(originHeight*ratio-(mHeight-SLIDER_HEIGHT))/2;//根据ratiocanvas.drawPixelMapHolder(pixelMapHolder,0,-heightErr/ratio,mPaint);//绘制内容}else{floatwidthErr=(originWidth*ratio-mWidth)/2;//计算CLIP_CENTER裁剪后的图片宽度水平方向按照比例绘制canvas.drawPixelMapHolder(pixelMapHolder,-widthErr/ratio,0,mPaint);//绘制内容}});}更多内容请访问：鸿蒙科技社区https://harmonyos.51cto。与华为官方共建com