在React Native中ART是個非常重要的庫，它讓非常酷炫的繪圖及動畫變成了可能。但是可能是知道的人真的不多導(dǎo)致文檔及少中文更少。很多都是把英文的參數(shù)列表翻譯過來，也沒有案例。于是決定出這樣一份入門文檔及可能遇到的坑，希望能夠幫助到大家。本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample
添加依賴
Android默認(rèn)就包含ART庫，IOS需要單獨(dú)添加依賴庫。
- 右鍵點(diǎn)擊項目 -> ‘Add Files to ProjectName -> 選擇 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
- 將 libART.a 添加到 Linked Frameworks and Libraries
基礎(chǔ)組件
ART暴露的組件有7個，這篇用到的有五個。先介紹即將用到的四個組件，之后在介紹另外三個。
- Surface - 一個矩形可渲染的區(qū)域，是其他元素的容器！
- Group - 可容納多個形狀、文本和其他的分組
- Shape - 形狀定義，可填充
- Text - 文本形狀定義
props
- Surface
- width : 渲染區(qū)域的寬
- height : 定義渲染區(qū)域的高
- Shape
- d : 定義繪制路徑
- stroke : 描邊顏色
- strokeWidth : 描邊寬度
- strokeDash : 定義虛線
- fill : 填充顏色
- Text
- funt : 字體樣式，定義字體、大小、是否加粗 如: bold 35px Heiti SC
- Path
- moveTo(x,y) : 移動到坐標(biāo)（x,y）
- lineTo(x,y) : 連線到（x,y）
- arc() : 繪制弧線
- close() : 封閉空間
繪制直線
了解Path的moveTo和LineTo的使用，注意Surface的高度和寬度，多數(shù)沒有繪制出想要的都是因為渲染區(qū)域定義問題
示例
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); //將起始點(diǎn)移動到(1,1) 默認(rèn)(0,0)
path.lineTo(300,1); //連線到目標(biāo)點(diǎn)(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的參數(shù)，
[10,5] : 表示繪10像素實(shí)線在繪5像素空白，如此循環(huán)
[10,5,20,5] : 表示繪10像素實(shí)線在繪制5像素空白在繪20像素實(shí)線及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的意思是創(chuàng)建一個密閉的路徑。首先通過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)的使用, 終點(diǎn)坐標(biāo)距離起點(diǎn)坐標(biāo)的相對距離
示例
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屬性的使用，規(guī)則是“粗細(xì) 字號 字體”
注意： 字體應(yīng)該是支持path屬性的，應(yīng)該是實(shí)現(xiàn)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中封裝的一個組件地址，內(nèi)部還是使用arc做路徑繪制，感興趣的同學(xué)可以閱讀一下代碼
示例
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
