react-native-art 绘图

Surface

渲染区域

Props

• width：渲染区域的宽
• width：渲染区域的宽
• visible: 是否可见默认可见

render(){
  return (
    <Surface width={100} heighet={100}>
      { all other components }
    </Surface>
  )
}

其他ART组件的容器组件

Shape

用来绘制任意路径Path和形状，可以理解为绘制图层

Props

• width：绘制图层的宽
• height：绘制图层的高
• d: 绘制的路径（path对象或SVG Path string）
• fill: 填充颜色
• stroke: 描边颜色
• strokeWidth：路径宽度（描边宽度）
• strokeDash：定义虚线（数组）
• strokeCap：路径的结尾方式（"butt", "round"(default), "square"）

Group

用来组织多个绘制图层，当绘制的图像有多个Shape时用Group包含，也可以包含Group（包含自己）

render(){
  return (
    <Surface>
      { this.getContainer() }
      <Shape/>
    </Surface>
  )
}

getContainer = () => {
  return (
    <Group>
      <Shape/>
    </Group>
  )
}

Path对象

• move(x,y):移动(x,y)偏移量
• moveTo(x,y):移动到坐标(x,y),可用来设置起点
• lineTo(x,y)：从上一个起点到(x,y)画一条直线

  Path().moveTo(10, 100).lineTo(100, 70)

以(10,100)为起点(100, 70)为终点画直线

image.png

• line(x,y): 偏移量(x,y)画一条直线

  Path().moveTo(10, 100).line(300, 0) 

以(10,100)为起点(300, 0)偏移量画直线

image.png

• arc():绘制弧线

  Path().moveTo(150,50).arc(100, 0,50) 

绘制一半圆弧(150,50)起点，(100, 0)偏移量(终点) 50 半径

image.png

  Path().arc(30, 50, 70, 90, true, false, 1) 

画一段圆弧(30, 50)起点，(70, 90)控制点 （true, false, 1）不知/逆时针/不知，另个一圆弧的点在视图的边缘

image.png

arcTo(xPosition, xPosition, xRadius, yRadius[,outer,counterClockWise,rotation])
arcTo为绝对定位到某点画弧

-curve()、curveTo():绘制曲线

• close() ：连接起点和终点形成封闭空间，即形成图形

SVG Path

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto //曲线
• S = smooth curveto //平滑曲线
• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto
• A = elliptical Arc //弧线
• Z = closepath
  注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

let path = "M250 150 L150 350 L350 350 Z "

上例开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后关闭路径形成三角形

image.png

以上是对react-native-art的 API 的简单介绍，但复杂的图形绘制都是通过这些 API 实现的，绘制复杂图形需要的是数学图形函数的相关知识。