react-native-ART-绘图

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,
}