ReactNative ART绘制

android默认带了 ART 库,ios需要单独添加。

android使用方法:
import {ART} from 'react-native';

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 - 文本形状定义

二.组件属性

Surface
  • width : 渲染区域的宽,相当于定义容器的宽度
  • height : 定义渲染区域的高,容器的高度
Shape
  • d : 定义绘制路径,d接收一个下面的path对象。
  • stroke : 描边颜色
  • strokeWidth : 描边宽度
  • strokeDash : 定义虚线
  • fill : 填充颜色
Text
  • funt : 字体样式,定义字体、大小、是否加粗 如: bold 35px Heiti SC
Path
  • moveTo(x,y) : 移动到坐标(x,y),坐标点默认都是0,(0,0)就是当前容器的左上角。
moveTo.png
  • lineTo(x,y) : 连线到(x,y)
  • arc(x,y,radius...) : 绘制弧线,radius半径,还有其他几个参数没用过,可以自己尝试一下
  • close() : 封闭空间,意思是当具有2条以上的线时,会自动封闭连接第一条线形成一个 封闭的空间。

推荐阅读更多精彩内容