React Native 浅入门 —— 绘图篇

发表于 | 分类于 |

权当一个笔记，再写写或许更明白点

原本搞了个模拟的，就使用元素来模拟绘图，例如直线……

不过确实是很麻烦…… 不过再去扫了扫 Issues，果然发现有人问过，且 facebook 也有相应的方案：

绘图可使用：ReactART，位置：Libraries/ART/ReactNativeART.js

1
2
3
4
5
6
7
8
9
10
11
12
var ReactART = {
    LinearGradient: LinearGradient,
    RadialGradient: RadialGradient,
    Pattern: Pattern,
    Transform: Transform,
    Path: Path,
    Surface: Surface,
    Group: Group,
    ClippingRectangle: ClippingRectangle,
    Shape: Shape,
    Text: Text,
};

例子可暂时扫扫 https://github.com/reactjs/react-page/blob/art/

继续记笔记：

依赖

使用这个之前，安装 art 库：

1
npm i art --save

并且需要在项目中添加依赖：

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

基础元素

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

即一个图形，必须是这样的：最外层是一个 Surface，去定义容器的大小，就像是 Canvas 元素一样，然后其子元素由 Group 进行组装，使用 Shape 和 Text 确定内容

公共的 props

  • x,y: 坐标
  • originX, originY: 原始坐标，这个给 scale 和 rotate 使用的
  • transform: {Array} 变形相关
  • visible: {boolean} 决定了 opacity 的值是 0|1
  • opacity: {number} opacity 的值
  • scale, scaleX, scaleY {number} 缩放
  • rotation: {string} 旋转 0deg

说明：
x, y 每个都可有，它指定了元素的位置。
originX, originY则是一个相对位置，它主要是给 scale 和 rotate 使用的，默认是0, 0，这样就意味着，默认是以起点为中心旋转，或者从起点开始缩放！

Surface

容器，接受的 props：

  • width: {number}
  • height: {number}

Group

定义分组，它是一个 Component，实际上使用了 NativeGroup，可接受的 props：

  • onMouseDown
  • onMouseUp

Shape

形状，与 ART 或者 ReactART 不同的是，当前不支持 width 和 height，可接受的 props：

  • fill: 定义笔刷，有一个用法已废弃，不多述，主要是生成颜色：new Color(colorOrBrush)，值可为：
    • {string} 预定义颜色：maroon: ‘#800000’, red: ‘#ff0000’, orange: ‘#ffA500’, yellow: ‘#ffff00’, olive: ‘#808000’, purple: ‘#800080’, fuchsia: “#ff00ff”, white: ‘#ffffff’, lime: ‘#00ff00’, green: ‘#008000’, navy: ‘#000080’, blue: ‘#0000ff’, aqua: ‘#00ffff’, teal: ‘#008080’, black: ‘#000000’, silver: ‘#c0c0c0’, gray: ‘#808080’
    • rgb/rgba 颜色：rgba(0,0,0,0.1)
    • hex #0000FF
    • hsb
    • hsl
  • stroke: 定义颜色，跟 fill 其实用法一样
  • strokeDash: {Object} 画虚线
    • strokeDash.count {number} array 的个数，必须有此值才能生效，必须=array.length
    • strokeDash.array：{Array} 虚线是如何交替绘制
      • 10,10 表示先绘制10个点，再跳过10个点，如此反复
      • 10, 20, 10 先绘制10个点，跳过20个点，绘制10个点，跳过10个点，再绘制20个点，如此反复
  • strokeCap: {string} 设置线条终点形状，可取值：butt(0) , square(2) 有个默认值 round(1)
  • strokeJoin: {string} 设置线条连接点的风格，该属性支持如下三个值 可取值：miter(0), bevel(2) 有个默认值 round(1)
  • strokeWidth: {number} 线宽 默认1

Text

文字

  • path 文字的路径
  • font 字体相关
    • {string} 例如 ‘normal|bold|italic 13px 字体名称’ 可选单位如 px、pt、em 等
    • {Object}
      • font.fontFamily {string} 字体，可以使用逗号分隔
      • fontSize {number}
      • fontWeight {string} bold|normal
      • fontStyle {string} italic|normal

其余几个跟 Shape 一致的

Transform

变形相关

1
2
3
4
5
var t = new Transform();
t.transformTo(1, 0, 0, 1, 0, 0)
    .move(props.x || 0, props.y || 0)
    .rotate(props.rotation || 0, props.originX, props.originY)
    .scale(scaleX, scaleY, props.originX, props.originY);

transform 变形矩阵

参数为(xx, yx, xy, yy[, x, y])，即 arguments

1
2
3
4
 result       current      arguments
xx  xy  x     xx  xy  x     xx  xy  x
yx  yy  y  =  yx  yy  y  *  yx  yy  y
0   0   1     0   0   1     0   0   1

xx - (number) 沿 X 轴的缩放 (default: 1)
yx - (number) 旋转？ multiplier to skew the x axis (default: 0)
xy - (number) 旋转？ multiplier to skew the y axis (default: 0)
yy - (number) 沿 Y 轴的缩放 (default: 1)
x - (number) 水平移动 (default: 0)
y - (number) 竖直移动 (default: 0)

transformTo

重置矩阵为某个值，其实就是重置 current，跟构造函数参数一致

translate & move & moveTo

translate(x, y)
move(x, y) 水平位移和竖直位移
moveTo(x, y) 移动到

rotate & rotateTo

(deg, x, y)

scale & scaleTo

(x, y)
缩放

resizeTo

resizeTo(width, height)

inversePoint & point

好像是点，不过没确认作用

Path

是在 art/core/path的基础上扩展了一小下的 path，做了一点处理，使用跟 path 一样：

所有的起点都是当前位置，往往是所在 Group 的x, y

基础

move
moveTo
line
lineTo
reset
close
toJSON

高级

  • curve 曲线，三阶贝塞尔曲线，参数为 c1x, c1y, c2x, c2y, ex, ey
    • (c1x, c1y): 第一个控制点坐标
    • (c2x, c2y): 第二个控制点坐标
    • (ex, ey): 曲线终点，取值是相对于起点的距离
  • curveTo 曲线，三阶贝塞尔曲线，跟 curve 唯一的区别是 (ex, ey) 是坐标值
  • arc 弧，参数x, y, rx, ry, outer, counterClockwise, rotation
    • (x, y) 终点坐标举例起点坐标的相对距离
    • (rx, ry) 这个还没搞清楚是啥，会影响弧度
    • outer 外侧圆弧么？？
    • counterClockwise 顺时针方向么？
    • rotation 角度？？？
      arcTo 跟 curve 唯一的区别是 (x, y) 是坐标值
      counterArc
      counterArcTo

Pattern(url, width, height, left, top)

主要是笔刷

ClippingRectangle

其实还是个 Group，不过似乎是有路径规划了还是神马，没确定完呢
props

  • x, y
  • width, height

LinearGradient 和 RadialGradient

似乎是笔刷定义，暂没确认

to be continued