本篇博客依旧是关于React Native的开发内容。今天和大家唠唠React Native中绘图机制： ART。

一、配置

在RN中使用ART非常方便，Android已经默认包含ART库，iOS需要我们单独添加依赖，配置流程基本可以如下：

1. 打开 nodule_modules / react-native /React / Libraries / ART / ART.xcodeproj

2. 将ART.xcodeproj 文件拖入iOS项目的Libraries目录下

3. 在Build Phases下，选择 Link Binary With Libraries 下的 + 号，进行依赖。

具体的流程可以参考：iOS配置教程。

在撸码之前，先来了解下 ART 中常用的基本属性。

二、属性介绍

 Surface：渲染画板，可以理解为Canvas。属性如下：

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

了解完基本属性，来看看每个属性是如何使用的。

三、示例

在绘制之前，首先导入需要的属性。

import {
  ART
} from 'react-native';

const { Surface,Shape,Path,Text,Group } = ART;

示例一 【 直线绘制 】

    render() {

      const linePath = Path().moveTo(1,1).lineTo(300,1);

      return (

        <View style={ styles.container }>
           
            <Surface width={ 300 } height={ 2 } style={{ marginTop: 20 }}>
                <Shape d={ linePath } stroke='#000000' strokeWidth={ 2 } />
            </Surface>

        </View>
      );
    }

示例二 【 虚线绘制 】

    render() {

      const linePath = Path().moveTo(1,1);

      return (

        <View style={ styles.container }>
            <Surface width={200} height={2} style={{ marginTop: 20 }}>
                <Shape d={ linePath } stroke='#ff00ff' strokeWidth={2} strokeDash={[10,15]} />
            </Surface>
        </View>
      );
    }

示例三 【 矩形绘制 】

    render() {

      const reactPath = Path().moveTo(1,1).lineTo(1,100).lineTo(100,1).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 200 } height={ 200 }>
                <Shape d={ reactPath } stroke="#000000" fill="#FF0" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例四 【 三角形绘制 】

    render() {

      const trianglePath = Path().moveTo(1,100).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 200 } height={ 200 } style={{ marginTop: 10 }}>
                <Shape d={ trianglePath } stroke="#000000" fill="#FF00FF" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例五 【 圆形绘制 】

arc(x,y,radius),终点坐标距离起点坐标的相对距离

    render() {

      const circlePath = Path().moveTo(50,1).arc(0,99,25).arc(0,-99,25).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 100 } height={ 100 }>
                <Shape d={ circlePath } stroke="#eeeeee" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例六 【 半圆形绘制 】

    render() {

      const circlePath = Path().moveTo(50,25).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 100 } height={ 100 }>
                <Shape d={ circlePath } stroke="#eeeeee" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例七 【 文字绘制 】

    render() {

      const linePath = Path().moveTo(1,1);

      return (

        <View style={ styles.container }>
            <Surface width={100} height={100} style={{ marginTop: 20 }}>
                <Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC">Swipe</Text>
            </Surface>
        </View>
      )
    }

示例八【 图形叠加绘制 】

    render() {

      const reactPath = Path().moveTo(1,1).close();
      const circlePath = Path().moveTo(50,25).close();


      return (

        <View style={ styles.container }>
            <Surface width={ 100 } height={ 100 }>
                <Group>
                  <Shape d={reactPath} stroke='#ff00ff' strokeWidth={2}/>
                  <Shape d={circlePath} stroke='#ff00ff' strokeWidth={2} fill='#ff0'/>
                </Group>
            </Surface>
        </View>
      )
    }

四、实战