react-native之ART绘图方法详解

在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。下面是小编为大家整理的react-native之ART绘图方法详解，欢迎参考~

背景

在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。

art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上，Facebook又开发了React-art ，封装art，使之可以被所使用，即实现了前端的svg库。然而，考虑到的JSX语法，已经支持将 等等svg标签直接插入到dom中（当然此时使用的就不是react-art库了）此外还有HTML canvas的存在，因此，在前端上，react-art并非不可替代。

然而，在移动端，考虑到跨平台的需求，加之web端的技术积累，react-art成为了现成的绘制图形的`解决方案。react-native分别在0.10.0和0.18.0上添加了ios和android平台上对react-art的支持。

示例代码

和React-Native的区别，只在于下文所述的ART获取上，然后该例子就可以同时应用在Web端和移动端上了。react-art自带的官方例子：Vector-Widget

Vector-Widget额外实现了旋转，以及鼠标点击事件的旋转加速响应。Web端可以看到点击加速，但是在移动端无效，原因是React Native并未对Group中onMouseDown和onMouseUp属性作处理。本文着重于静态svg的实现，暂时无视动画部分效果即可。

ART

在react native中ART是个非常重要的库，它让非常酷炫的绘图及动画变成了可能。需要注意的是，在React Native引入ART过程中，Android默认就包含ART库，IOS需要单独添加依赖库。

ios添加依赖库

1、使用xcode中打开React-native中的iOS项目，选中‘Libraries'目录 ——> 右键选择‘Add Files to 项目名称' ——> ‘node_modules/react-native/Libraries/ART/eproj' 添加；

2、选中项目根目录 ——> 点击'Build Phases‘ ——> 点击‘Link Binary With Libraries' ——> 点击左下方‘+' ——> 选中‘libART.a'添加。

基础组件

ART暴露的组件共有7个，本文介绍常用的四个组件：Surface、Group、Shape、Text。

Surface - 一个矩形可渲染的区域，是其他元素的容器

Group - 可容纳多个形状、文本和其他的分组

Shape - 形状定义，可填充

Text - 文本形状定义

属性

Surface

width : 渲染区域的宽

height : 定义渲染区域的高

Shape

d : 定义绘制路径

stroke : 描边颜色

strokeWidth : 描边宽度

strokeDash : 定义虚线

fill : 填充颜色

Text

funt : 字体样式，定义字体、大小、是否加粗 如: bold 35px Heiti SC

Path

moveTo(x,y) : 移动到坐标（x,y）

lineTo(x,y) : 连线到（x,y）

arc() : 绘制弧线

close() : 封闭空间