react-native-art-繪圖入門

在React Native中ART是個非常重要的庫，它讓非常酷炫的繪圖及動畫變成了可能。但是可能是知道的人真的不多導致文檔及少中文更少。很多都是把英文的參數列表翻譯過來，也沒有案例。于是決定出這樣一份入門文檔及可能遇到的坑，希望能夠幫助到大家。本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample

添加依賴

Android默認就包含ART庫，IOS需要單獨添加依賴庫。

  1. 右鍵點擊項目 -> ‘Add Files to ProjectName -> 選擇 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
  2. 將 libART.a 添加到 Linked Frameworks and Libraries

基礎組件

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

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

props

  • Surface
    • 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() : 封閉空間

繪制直線

了解Path的moveTo和LineTo的使用，注意Surface的高度和寬度，多數沒有繪制出想要的都是因為渲染區域定義問題

示例

import React from 'react'
import {
    View,
    ART
} from 'react-native'

export default class Line extends React.Component{

    render(){

        const path = ART.Path();
        path.moveTo(1,1); //將起始點移動到(1,1) 默認(0,0)
        path.lineTo(300,1); //連線到目標點(300,1)

        return(
            <View style={this.props.style}>
                <ART.Surface width={300} height={2}>
                    <ART.Shape d={path} stroke="#000000" strokeWidth={1} />
                </ART.Surface>
            </View>
        )
    }
}
Simulator Screen Shot 2016年8月22日 下午1.47.43.png

繪制虛線

了解strokeDash的參數，
[10,5] : 表示繪10像素實線在繪5像素空白，如此循環
[10,5,20,5] : 表示繪10像素實線在繪制5像素空白在繪20像素實線及5像素空白

示例


import React from 'react'
import {
    View,
    ART
} from 'react-native'

const {Surface, Shape, Path} = ART;

export default class DashLine extends React.Component{

    render(){

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

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

繪制矩形

了解close()的使用，close的意思是創建一個密閉的路徑。首先通過lineTo繪制三條邊，在使用close鏈接第四條邊。fill做顏色填充

示例

import React from 'react'
import {
    View,
    ART
} from 'react-native'

const {Surface, Shape, Path} = ART;

export default class Rect extends React.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={100} height={100}>
                    <Shape d={path} stroke="#000000" fill="#892265" strokeWidth={1} />
                </Surface>
            </View>
        )
    }
}
Simulator Screen Shot 2016年8月22日 下午1.46.57.png

繪圓

了解arc(x,y,radius)的使用, 終點坐標距離起點坐標的相對距離

示例

import React from 'react'
import {
    View,
    ART
} from 'react-native'

const {Surface, Shape, Path} = ART;

export default class Circle extends React.Component{

    render(){

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


        return(
            <View style={this.props.style}>
                <Surface width={100} height={100}>
                    <Shape d={path} stroke="#000000" strokeWidth={1}/>
                </Surface>
            </View>
        )
    }
}
Simulator Screen Shot 2016年8月22日 下午1.46.35.png

繪制文字

了解funt屬性的使用，規則是“粗細 字號 字體”
注意： 字體應該是支持path屬性的，應該是實現bug并沒有不生效。 Android通過修改源碼是可以解決的，IOS沒看源碼。

示例

import React from 'react'
import {
    View,
    ART
} from 'react-native'

const {Surface, Text, Path} = ART;

export default class ArtText extends  React.Component{


    render(){

        return(
            <View style={this.props.style}>
                <Surface width={100} height={100}>
                    <Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC" path={new Path().moveTo(40,40).lineTo(99,10)} >Swipe</Text>
                </Surface>
            </View>
        )
    }

}

繪制扇形

這里使用的是react-art中封裝的一個組件地址，內部還是使用arc做路徑繪制，感興趣的同學可以閱讀一下代碼

示例

import React from 'react'
import {
    View,
    ART
} from  'react-native'

const {Surface} = ART;
import Wedge from './Wedge'

export default class Fan extends  React.Component{

    render(){

        return(
            <View style={this.props.style}>
                <Surface width={100} height={100}>
                    <Wedge
                     outerRadius={50}
                     startAngle={0}
                     endAngle={60}
                     originX={50}
                     originY={50}
                     fill="blue"/>

                </Surface>
            </View>
        )
    }
}
Simulator Screen Shot 2016年8月22日 下午1.50.51.png

圖層疊加

了解Group的使用

示例

"use strict";

import React from 'react'
import {
    View,
    ART
} from 'react-native'

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

export default class GroupTest extends React.Component{

    render(){

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

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

        const pathText = new Path()
            .moveTo(40,5)
            .lineTo(40,99);


        return(
            <View>
                <Surface width={100} height={100}>
                    <Group>
                        <Shape d={pathRect} stroke="#000000" fill="#000000" strokeWidth={1}/>
                        <Shape d={pathCircle} stroke="#FFFFFF" fill="#FFFFFF" strokeWidth={1}/>
                        <Text strokeWidth={1} strokeDash={[2,1,2,1]} stroke="#000" font="bold 30px Heiti SC" path={pathText} >Swipe</Text>
                    </Group>
                </Surface>
            </View>
        )
    }
}
Simulator Screen Shot 2016年8月22日 下午1.49.04.png

作者 大光 更多文章 | Github

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容