前言

注意⚠️：ART模块已经从React-Native里独立出来了，本文用旧的ART进行编写。官方推荐采用https://github.com/react-native-community/art进行代替

新版使用跟旧版用法差别不大，但是需要把react-native-community/art引入，大家可以网上搜搜

WeChatbc7f47dc36d7aa18e9dd636ff540f1a8.png

先看一下成果图：

image.png

QA说是她见过最好看的图形验证码 😁

基础组件

先说一下基础组件，本文用到以下4个组件

• Surface - 相当于画板，是一个矩形可渲染区域，是其他元素的容器。
• Group - 可让画板能容纳多个形状、文本
• Shape - 定义形状，可填充
• Text - 文本形状

props

• Surface 渲染的区域

  • width : 渲染区域的宽
  • height : 定义渲染区域的高

• Group 可让画板能容纳多个形状、文本

• Shape

  • d : 定义绘制路径
  • stroke : 描边颜色
  • strokeWidth : 描边宽度
  • strokeDash : 定义虚线
  • fill : 填充颜色

• Text

  • font : 字体样式，定义字体、大小、是否加粗

• Path

• moveTo(x,y) : 移动到坐标（x,y）
• lineTo(x,y) : 连线到（x,y）
• arc() : 绘制弧线
• close() : 封闭空间

• Transform对象
  • translate(x,y): 横坐标方向移动x，纵坐标方向移动y
  • scale(x,y):宽缩放x，高缩放y倍小于1就是缩小，大于一就是放大
  • roate(deg,x,y)：以(x,y)为旋转中心旋转deg度

绘制画板

                      <ART.Surface width={width} height={height}>
                            <ART.Group width={width} height={height}>
                            1. 这里可以添加多个ART组件
                            2. 如果不写在Group内，那么只能添加一个ART组件
                            </ART.Group>
                        </ART.Surface>

绘制背景图

背景图其实是一个个小点，也就是把干扰线的长度设置短一些。
利用Shape绘制小点

                <Shape
                    stroke={描边颜色}
                    strokeWidth={描边宽度}
                    d={new Path().moveTo(x, y).lineTo(n, m)}
                />

       moveTo(x,y): 移动到x,y (绝对坐标)
       lineTo(x,y): 目标点坐标为(x,y) 绝对坐标，初始点和目标点之间连线
       x,y 的区间设定在1-130之间
       n,m干扰线的长度设置为5
       n的区间在设定在[ x - 5，x + 5]
       m的区间在设定在[ y - 5，y + 5]

绘制文字

                <ART.Text 
                    strokeWidth={描边宽度，设置文字粗细}
                    stroke={描边颜色}
                    font={自定义文字}
                    transform={new Transform().rotate(旋转的角度, 0, 0).moveTo(横坐标方向移动x, 纵坐标方向移动y)}
                >
                    {验证码}
                </ART.Text>

随机验证码

原理：

1.大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;
2.小写字母，就在97-122之间
3.然后调用String.fromCharCode()传入ASCII值返回相应的字符

    // 生成一个随机数
    randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
    }

利用随机数去生成验证码，颜色，偏移量，就大工告成啦～
大家试试把～