前言
注意⚠️：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)
}
利用随机数去生成验证码，颜色，偏移量，就大工告成啦～
大家试试把～
