Android默认就包含ART库,IOS需要单独添加依赖库。(添加依赖的方法百度一下哦)
这里主要是我自己做的笔记,把别人的代码都跑了一遍而已
ART暴露的组件有7个,这篇用到的有五个。先介绍即将用到的四个组件,之后在介绍另外三个。
width : 渲染区域的宽
height : 定义渲染区域的高
d : 定义绘制路径
stroke : 描边颜色
strokeWidth : 描边宽度
strokeDash : 定义虚线
fill : 填充颜色
funt : 字体样式,定义字体、大小、是否加粗 如: bold 35px Heiti SC
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(
)
}
}
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(
)
}
}
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(
)
}
}
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(
)
}
}
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(
测试
)
}
}
Line.propTypes = {
style: PropTypes.object,
}