版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013718120/article/details/78320117
刚创建的React Native 微信公众号,欢迎微信扫描关注订阅号,每天定期会分享react native 技术文章,移动技术干货,精彩文章技术推送。同时可以扫描我的微信加入react-native技术交流微信群。欢迎各位大牛,React Native技术爱好者加入交流!
本篇博客依旧是关于 React Native 的开发内容。今天和大家唠唠 React Native 中绘图机制: ART。
一、配置
在RN中使用ART非常方便,Android已经默认包含ART库,iOS需要我们单独添加依赖,配置流程基本可以如下:
1. 打开 nodule_modules / react-native / React / Libraries / ART / ART.xcodeproj
2. 将 ART.xcodeproj 文件拖入iOS项目的Libraries目录下
3. 在Build Phases下,选择 Link Binary With Libraries 下的 + 号,选择 libART.a 依赖。
具体的流程可以参考:iOS配置教程。
在撸码之前,先来了解下 ART 中常用的基本属性。
二、属性介绍
Surface:渲染画板,可以理解为Canvas。属性如下:
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() : 封闭空间
了解完基本属性,来看看每个属性是如何使用的。
三、示例
在绘制之前,首先导入需要的属性。
import {
ART
} from 'react-native';
const { Surface, Shape, Path, Text, Group } = ART;
示例一 【 直线绘制 】
render() {
const linePath = Path().moveTo(1,1).lineTo(300,1);
return (
<View style={ styles.container }>
<Surface width={ 300 } height={ 2 } style={{ marginTop: 20 }}>
<Shape d={ linePath } stroke='#000000' strokeWidth={ 2 } />
</Surface>
</View>
);
}
示例二 【 虚线绘制 】
render() {
const linePath = Path().moveTo(1,1).lineTo(300,1);
return (
<View style={ styles.container }>
<Surface width={200} height={2} style={{ marginTop: 20 }}>
<Shape d={ linePath } stroke='#ff00ff' strokeWidth={2} strokeDash={[10, 15]} />
</Surface>
</View>
);
}
示例三 【 矩形绘制 】
render() {
const reactPath = Path().moveTo(1, 1).lineTo(1, 100).lineTo(100, 100).lineTo(100,1).close();
return (
<View style={ styles.container }>
<Surface width={ 200 } height={ 200 }>
<Shape d={ reactPath } stroke="#000000" fill="#FF0" strokeWidth={1} />
</Surface>
</View>
)
}
示例四 【 三角形绘制 】
render() {
const trianglePath = Path().moveTo(1, 1).lineTo(1, 100).lineTo(100, 100).close();
return (
<View style={ styles.container }>
<Surface width={ 200 } height={ 200 } style={{ marginTop: 10 }}>
<Shape d={ trianglePath } stroke="#000000" fill="#FF00FF" strokeWidth={1} />
</Surface>
</View>
)
}
示例五 【 圆形绘制 】
arc(x, y, radius), 终点坐标距离起点坐标的相对距离
render() {
const circlePath = Path().moveTo(50, 1).arc(0, 99, 25).arc(0, -99, 25).close();
return (
<View style={ styles.container }>
<Surface width={ 100 } height={ 100 }>
<Shape d={ circlePath } stroke="#eeeeee" strokeWidth={1} />
</Surface>
</View>
)
}
示例六 【 半圆形绘制 】
render() {
const circlePath = Path().moveTo(50,1).arc(0,99,25).close();
return (
<View style={ styles.container }>
<Surface width={ 100 } height={ 100 }>
<Shape d={ circlePath } stroke="#eeeeee" strokeWidth={1} />
</Surface>
</View>
)
}
示例七 【 文字绘制 】
render() {
const linePath = Path().moveTo(1,1).lineTo(300,1);
return (
<View style={ styles.container }>
<Surface width={100} height={100} style={{ marginTop: 20 }}>
<Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC">Swipe</Text>
</Surface>
</View>
)
}
示例八【 图形叠加绘制 】
render() {
const reactPath = Path().moveTo(1, 1).lineTo(1, 100).lineTo(100, 100).lineTo(100,1).close();
const circlePath = Path().moveTo(50,1).arc(0,99,25).arc(0,-99,25).close();
return (
<View style={ styles.container }>
<Surface width={ 100 } height={ 100 }>
<Group>
<Shape d={reactPath} stroke='#ff00ff' strokeWidth={2}/>
<Shape d={circlePath} stroke='#ff00ff' strokeWidth={2} fill='#ff0'/>
</Group>
</Surface>
</View>
)
}