react-native-art-绘图入门
在React Native中ART是个非常重要的库,它让非常酷炫的绘图及动画变成了可能。但是可能是知道的人真的不多导致文档及少中文更少。很多都是把英文的参数列表翻译过来,也没有案例。于是决定出这样一份入门文档及可能遇到的坑,希望能够帮助到大家。本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample <!--more--> 添加依赖
基础组件ART暴露的组件有7个,这篇用到的有五个。先介绍即将用到的四个组件,之后在介绍另外三个。
props
绘制直线
示例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> ) } } 绘制虚线
[10,5] : 表示绘10像素实线在绘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> ) } } 绘制矩形
示例import React from 'react' import { View,Path} = ART; export default class Rect extends React.Component{ render(){ const path = new Path() .moveTo(1,1) .lineTo(1,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> ) } } 绘圆
示例import React from 'react' import { View,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> ) } } 绘制文字
注意: 字体应该是支持path属性的,应该是实现bug并没有不生效。 Android通过修改源码是可以解决的,IOS没看源码。 示例import React from 'react' import { View,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> ) } } 绘制扇形
示例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> ) } } 图层叠加
示例"use strict"; import React from 'react' import { View,Path,Group} = ART; export default class GroupTest extends React.Component{ render(){ const pathRect = new Path() .moveTo(1,1) .close(); const pathCircle = new Path() .moveTo(50,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> ) } }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |