react-native-art-绘图入门

本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample

.a文件 定义

所谓静态链接是指把要调用的函数或者过程链接到可执行文件中，成为可执行文件的一部分。当多个程序都调用相同函数时，内存中就会存在这个函数的多个拷贝，这样就浪费了宝贵的内存资源。.so文件是共享库文件（动态链接）。动态链接所调用的函数代码并没有被拷贝到应用程序的可执行文件中去，而是仅仅在其中加入了所调用函数的描述信息（往往是一些重定位信息），仅当应用程序被装入内存开始运行时，在操作系统的管理下，才在应用程序与相应的.so之间建立链接关系。

.a文件是多个.o文件的组合。.o文件就是对象文件，里面包含的内容就是01这样的机器可执行的指令，当程序要执行时还需要进行链接(link).链接就是把多个.o文件链成一个可执行文件。

添加依赖

Android默认就包含ART库，IOS需要单独添加依赖库。

1. 右键点击项目 -> ‘Add Files to ProjectName -> 选择 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
2. 将 libART.a 添加到 Linked Frameworks and Libraries

基础组件

ART暴露的组件有7个，这篇用到的有五个。先介绍即将用到的四个组件，之后在介绍另外三个。 

• Surface - 一个矩形可渲染的区域，是其他元素的容器！
• Group - 可容纳多个形状、文本和其他的分组
• Shape - 形状定义，可填充
• Text - 文本形状定义

props

• 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() : 封闭空间

绘制直线

了解Path的moveTo和LineTo的使用，注意Surface的高度和宽度，多数没有绘制出想要的都是因为渲染区域定义问题

运行结果图示

参考: