Android預設就包含ART庫，IOS需要單獨新增依賴庫。(新增依賴的方法百度一下哦)

這裡主要是我自己做的筆記，把別人的程式碼都跑了一遍而已

基礎元件

ART暴露的元件有7個，這篇用到的有五個。先介紹即將用到的四個元件，之後在介紹另外三個。 

• Surface - 一個矩形可渲染的區域，是其他元素的容器！
• Group - 可容納多個形狀、文字和其他的分組
• Shape - 形狀定義，可填充
• Text - 文字形狀定義

props

  1.Surface

    width : 渲染區域的寬

    height : 定義渲染區域的高

  2.Shape

    d : 定義繪製路徑

    stroke : 描邊顏色

    strokeWidth : 描邊寬度

    strokeDash : 定義虛線

    fill : 填充顏色

  3.Text

    funt : 字型樣式，定義字型、大小、是否加粗 如: bold 35px Heiti SC

  4.Path

    moveTo(x,y) : 移動到座標（x,y）

    lineTo(x,y) : 連線到（x,y）

    arc() : 繪製弧線

    close() : 封閉空間

繪製直線

import React, {Component} from 'react'
import {
    View,
    ART,
    StyleSheet,
} from 'react-native'
import PropTypes from 'prop-types'

const {Surface, Shape, Path} = ART;

export default class Line extends Component{

    render(){

        const path = new Path()
        path.moveTo(10,1); //將起始點移動到(1,1) 預設(0,0)
        path.lineTo(200,1); //連線到目標點(300,1)
      
        return(
        <View style={this.props.style}>
            <Surface width={500} height={500}>
                <Shape d={path} stroke="blue" strokeWidth={1}/>
            </Surface>
        </View>
        )

    }
}

Line.propTypes = {
    style: PropTypes.object,
}
 

繪製虛線

其中strokeDash的引數， 

[10,5] : 表示繪10畫素實線在繪5畫素空白，如此迴圈 

[10,5,20,5] : 表示繪10畫素實線在繪製5畫素空白在繪20畫素實線及5畫素空白

import React, {Component} from 'react'
import {
    View,
    ART,
    StyleSheet,
} from 'react-native'
import PropTypes from 'prop-types'

const {Surface, Shape, Path} = ART;

export default class Line extends Component{

    render(){

        const path = new Path()
        path.moveTo(10,1); //將起始點移動到(1,1) 預設(0,0)
        path.lineTo(200,1); //連線到目標點(300,1)

        return(
        <View style={this.props.style}>
            <Surface width={500} height={500}>
                <Shape d={path} stroke="blue" strokeWidth={1} strokeDash={[10,5]}/>
            </Surface>
        </View>
        )

    }
}

Line.propTypes = {
    style: PropTypes.object,
}
 

繪製矩形

fill="red"填充色

import React, {Component} from 'react'
import {
    View,
    ART,
    StyleSheet,
} from 'react-native'
import PropTypes from 'prop-types'

const {Surface, Shape, Path} = ART;

export default class Line extends Component{

    render(){

        const path = new Path()
            .moveTo(1,1)
            .lineTo(1,99)
            .lineTo(99,99)
            .lineTo(99,1)
            .close();

        return(
        <View style={this.props.style}>
            <Surface width={500} height={500}>
                <Shape d={path} stroke="blue" fill="red" strokeWidth={1}/>
            </Surface>
        </View>
        )
    }
}

Line.propTypes = {
    style: PropTypes.object,
}

繪製圓形

同樣的也可以使用fill=" "填充色來填上你喜歡的顏色

其中arc(δx,δy,radius)的意思是，（δx,δy）是終點座標相對於起始點的座標，即（δx,δy）=（x終，y終）- （x起，y起）

radius自然就是半徑了（這個地方我自己理解了半天才搞明白，希望大家注意）

import React, {Component} from 'react'
import {
    View,
    ART,
    StyleSheet,
} from 'react-native'
import PropTypes from 'prop-types'

const {Surface, Shape, Path} = ART;

export default class Line extends Component{

    render(){

        const path = new Path()
            .moveTo(51,1)
            .arc(0,101,50)
            .arc(0,-101,50)
            .close();

        return(
        <View style={this.props.style}>
            <Surface width={500} height={500}>
                <Shape d={path} stroke="blue" strokeWidth={1}/>
            </Surface>
        </View>
        )
    }
}

Line.propTypes = {
    style: PropTypes.object,
}

繪製文字

font是字型哦

import React, {Component} from 'react'
import {
    View,
    ART,
    StyleSheet,
} from 'react-native'
import PropTypes from 'prop-types'

const {Surface, Text, Path} = ART;

export default class Line extends Component{

    render(){

        const path = new Path()
            .moveTo(40,40)
            .lineTo(99,10)

        return(
        <View style={this.props.style}>
            <Surface width={500} height={500}>
                <Text d={path} stroke="blue" strokeWidth={1} font="bold 70px Heiti SC">
                    測試
                </Text>
            </Surface>
        </View>
        )
    }
}

Line.propTypes = {
    style: PropTypes.object,
}