慢牛系列四：好玩的React Native - 推酷
慢牛系列四：好玩的React Native
在上次随笔(系列三)中，我试着用RN实现了一个Demo，感觉很不错，当时遇到的问题这篇文章里基本都解决了，比如导航动画问题，这篇文章里主要介绍RN的动画，学会动画以后，各种小创意都可以实现了^^
下面是我自己做的效果：
1、列表项滑动显示操作按钮
2、列表行滑出
3、K线页面
4、转场动画
一、React Native动画
RN的动画实现类似Jquery和CSS3的动画实现，设定某一属性的输入和输出值，后台实现相关的动画计算，简化了动画的开发，下面是一段代码，可以直观感受下
class Playground ponent {
constructor(props: any) {
super(props);
this.state = {
bounceValue: new Animated.Value(0), //设定初始值
render(): ReactElement {
&Animated.Image
// Base: Image, Text, View，这三个标签可以实现动画，必须是Animate.开头，普通的Image不能实现动画。
source={{uri: '/XMKOH81.jpg'}}
transform: [
// `transform` 类似CSS3
{scale: this.state.bounceValue},
// 设置 `bounceValue` 给 `scale`，注意，这里要使用上面再state里创建的对象，不能重新实例一个对象赋值。
　//UI渲染结束后执行该方法
componentDidMount() {
this.state.bounceValue.setValue(1.5);
// 设定初始大小，使用的依旧是在state中创建的对象。
Animated.spring(
// Base: spring, decay, timing，这个三个方法是三种动画，spring是类似弹簧的动画
this.state.bounceValue,
// Animate `bounceValue`初始输入值
toValue: 0.8,
// Animate to smaller size，动画目标值
friction: 1,
// Bouncier spring，这个值类似设置弹簧的弹性。
).start();
// Start the animation，开始动画,start的参数是一个动画结束的callback。
RN动画的主要类库是Animated库，Animated库包括Value和ValueXY两个类型，Value是单值的动画，比较简单，就是某个属性值的改变，ValueXY是向量的动画，就是两个值的改变，参数X，Y是元素的坐标，根据XY的变化计算运动方向。目前支持动画的元素 View ,& Text , and& Image，用户可以自己创建动画元素，通过Animated.createAnimatedComponent来创建。
目前主要有三种动画实现：spring, decay, timing，
spring : 类似弹簧的实现，动画结束时会有个渐弱的摆动，上面的第一个和第二个动画就是用spring实现。
friction : 数值越小，弹的越厉害，默认是7。
tension : 动画的速度，默认是40。
decay : 动画的速度逐渐变慢，最后停止，类似上面的转场动画。
velocity : 初始速度。
deceleration : 减速度，默认是&0.997.
timing :线性动画，在设定时间内移动到终点，中间的动画可以设置，类似CSS3的animation-timing-function
duration : 动画持续时间&500.
easing :类似css3的animation-timing-function,具体的实现在Easing模块里，是贝塞尔曲线(B&zier curve)的一个实现，这样使用&Easing.bezier(0.42, 0, 1, 1)，参数设置参考这个网址：
，默认的实现Easing.in和Easing.out和Easing.inOut。
delay : 动画延迟开始时间。
组合动画：
如果需要同时执行多个动画，或者按顺序执行动画，就需要将动画组合执行，RN提供了 parallel ,& sequence ,& stagger , delay , 这个四个方法组合动画，这些方法的参数都是一个动画的数组，使用起来很简单， parallel是并行执行 ,& sequence是顺序执行 ,& stagger是每个动画延迟一段时间执行 ,& delay是延时 ,下面是代码示例：
Animated.sequence([
// spring to start and twirl after decay finishes
Animated.decay(position, {
// coast to a stop
velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
deceleration: 0.997,
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
toValue: {x: 0, y: 0}
// return to start
Animated.timing(twirl, {
// and twirl
toValue: 360,
]).start();
// start the sequence group
关于RN动画更多内容参考：
二、动画demo
我做了一个动画的demo，这里只是改变了元素的left属性，大家体验下：
/* @flow */
'use strict';
var React = require('react-native');
var Easing = require('Easing');
TouchableWithoutFeedback,
StyleSheet,
Dimensions,
InteractionManager
var SCREEN_WIDTH = Dimensions.get('window').
var Component = React.createClass({
getInitialState: function() {
first:new Animated.Value(0),
second:new Animated.Value(0),
three:new Animated.Value(0)
reset:function (argument) {
this.state.first.setValue(0);
this.state.second.setValue(0);
this.state.three.setValue(0);
getAnimations:function (argument) {
Animated.spring(
// Base: spring, decay, timing
this.state.first,
// Animate `bounceValue`
toValue: SCREEN_WIDTH-50,
// Animate to smaller size
friction: 7,
tension:40
// Bouncier spring
Animated.decay(
// Base: spring, decay, timing
this.state.second,
// Animate `bounceValue`
//toValue: SCREEN_WIDTH-50,
// Animate to smaller size
velocity: 1,
deceleration:0.997
// Bouncier spring
Animated.timing(
// Base: spring, decay, timing
this.state.three,
// Animate `bounceValue`
toValue: SCREEN_WIDTH-50,
// Animate to smaller size
easing: Easing.inOut(Easing.ease),
// Bouncier spring
onStagger:function (argument) {
this.reset();
Animated.stagger(150,this.getAnimations()).start();
onParallel:function (argument) {
this.reset();
Animated.parallel(this.getAnimations()).start();
onSequence:function (argument) {
this.reset();
Animated.sequence(this.getAnimations()).start();
onAll:function (argument) {
this.reset();
Animated.sequence([
Animated.stagger(50,me.getAnimations()),
Animated.sequence([
Animated.spring(
// Base: spring, decay, timing
this.state.first,
// Animate `bounceValue`
toValue: 0,
// Animate to smaller size
friction: 7,
tension:40
// Bouncier spring
Animated.decay(
// Base: spring, decay, timing
this.state.second,
// Animate `bounceValue`
//toValue: SCREEN_WIDTH-50,
// Animate to smaller size
velocity: -1,
deceleration:0.997
// Bouncier spring
Animated.timing(
// Base: spring, decay, timing
this.state.three,
// Animate `bounceValue`
toValue: 0,
// Animate to smaller size
easing: Easing.bezier(.13,.93,.79,.07),
// Bouncier spring
Animated.parallel(me.getAnimations())
]).start();
render: function() {
&View style={styles.container}&
&View style={{flex:1}}&
&Animated.View style={[styles.view,{top:50,left:this.state.first}]}&&Text&spring&/Text&&/Animated.View&
&Animated.View style={[styles.view,{top:150,left:this.state.second}]}&&Text&decay&/Text&&/Animated.View&
&Animated.View style={[styles.view,{top:250,left:this.state.three}]}&&Text&timing&/Text&&/Animated.View&
&View style={{flexDirection:'row',height:80,justifyContent :'center',alignItems: 'center'}}&
&TouchableWithoutFeedback onPress={this.onStagger}&
&View style={styles.btn}&&Text&stagger&/Text&&/View&
&/TouchableWithoutFeedback&
&TouchableWithoutFeedback onPress={this.onParallel}&
&View style={styles.btn}&&Text&parallel&/Text&&/View&
&/TouchableWithoutFeedback&
&TouchableWithoutFeedback onPress={this.onSequence}&
&View style={styles.btn}&&Text&sequence&/Text&&/View&
&/TouchableWithoutFeedback&
&TouchableWithoutFeedback onPress={this.onAll}&
&View style={styles.btn}&&Text&组合&/Text&&/View&
&/TouchableWithoutFeedback&
var styles = StyleSheet.create({
container:{
position:'absolute',
backgroundColor:'red',
height:50,
justifyContent :'center',
alignItems: 'center',
width:100,
height:50,
backgroundColor:'red',
justifyContent :'center',
alignItems: 'center',
module.exports = C
RN动画示例
三、性能优化
主要是在执行动画时，避免执行其他工作量比较大的代码，比如，最好不要一边渲染，一边执行动画，而是先执行动画，等动画执行结束后在渲染，可以setTimeout来延时执行渲染，最好是用官方推荐的做法，利用InteractionManager，下面是代码示例：
componentDidMount() {
InteractionManager.runAfterInteractions(() =& {
this.setState({renderPlaceholderOnly: false});
InteractionManager.runAfterInteractions是在动画或者操作结束后执行，还有其他两种方法：
requestAnimationFrame(): H5的标准，RN实现了它，下一帧渲染时执行，更好的利用浏览器的刷新频率，避免丢帧。
setImmediate/setTimeout(): 定时执行，有可能影响动画的流畅度。
另外，这个项目里用了MPAndroidChart组件，我对MPAndroidChart做了桥接，有想用的用户可以试试这个项目：
/hongyin163/react-native-chart-android
如果有想体验React Native的用户，可以下载慢牛APP的APK体验：
关注慢牛的公众号： 发送react，返回apk下载链接 ，apk大小8M，最好连接WiFi下载。
最后，欢迎园友提出好的想法，评论留名！谢谢！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致&>&&>&&>&&>&react-native-art 实现二次贝塞尔曲线绘制
react-native-art 实现二次贝塞尔曲线绘制
上传大小：7KB
利用react-native自带ART库实现贝塞尔曲线的绘制
综合评分：0（0位用户评分）
所需积分：2
下载次数：5
审核通过送C币
创建者：qq
创建者：nigelyq
创建者：hbwang_716
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
react-native-art 实现二次贝塞尔曲线绘制
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
xiongqiangwin1314
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：react native（6）
1、关于react-native ART库的使用，目前网上能搜到的少之又少，简书上的一篇，从基本上讲解了一下react-native-art的使用方法，但是只是简单的横竖曲线的绘制，但项目中有一个需求就是绘制网速的速率曲线，
（项目最终效果）
那么如果按照react-native-art绘图入门上给的寥寥几个接口是不可能实现画出一个平滑曲线的目的的，为此又参考了一篇，该篇中使用react-native-art-svg库，其中第一个坑点就是，react-native-art-svg库需要react-native的版本（具体版本忘记了，好象是2时代的版本0.28吧好像）低于目前项目中所用的版本（项目版本0.35），然后一阵搜索之后发现，react-native-art-svg目前已经进化成为react-native-svg库，但要求react-native版本&=0.38（好象是这个值，但反正大于0.35），因此在git上切换分支尝试用react-native-svg时，发现出现了一些未知的问题，比如scrollView不能往下拖动了，并且暂时没用精力去升降级RN版本，于是在尝试了最新版本RN之后，选择放弃react-native-svg库。
2、但是如需要画出上述曲线图，SVG中的二次贝塞尔曲线是必不可少的，因此不死心，心想，既然ART，是一个在React中绘制矢量图形的JS类库。这个类库抽象了一系统的通用接口，统一了SVG，canvas，VML这类矢量图形在React中的书写格式。那么，ART库肯定也是集成了SVG的path属性，并且支持利用path画二次贝塞尔曲线，为此，去art库文件（在node_modules文件夹下）中查找ART库的引用，并且成功发现在中未介绍的path接口（S、C、Q、T有木有）。
3、既能画二次贝塞尔，并且不用升级RN版本，这简直是完美符合需求啊。
那么使用方法就是
1）导入ART库
import React from 'react';
StyleSheet,
} from 'react-native';
const {Surface, Shape, Path, Group} = ART;
2）给Path传入二次贝塞尔曲线控制路径，并在render中调用即可
render() {
//this.console(&render===speedStr:& + this.state.speedStr);
//const _path = new Path(this.state.speedStr).close();
const _path = new Path('M0 0 Q5 20, 10 20 T15 35, Q17.5 50, 20 50 T25 25, Q27.5 0, 30 0 T35 0, Q37.5 0, 40 0 T45 15, Q47.5 30, 50 30 T55 20, Q57.5 10, 60 10 T65 5, Q67.5 0, 70 0').close();
&View style={Styles.canvasWrap}&
&Surface width={w} height={h}&
&Shape d={_path} stroke=&#36ffff& strokeWidth={2} fill=&rgba(54,255,255,0.2)&/&
&/Surface&
4、以下为项目代码，可以直接引用
speedCanvas.js
* Created by DELL on .
'use strict';
import React from 'react';
StyleSheet,
} from 'react-native';
const {Surface, Shape, Path, Group} = ART;
import Dimensions from 'Dimensions';
const ScreenWidth = Dimensions.get('window').
const ScreenHeight = Dimensions.get('window').
const w = ScreenW
const h = Math.ceil(ScreenHeight * 0.2);
const curvature = 2;//二次贝塞尔曲线曲率控制参数
const step = 20;//一次推进10距离单位
const stepNum = Math.floor(w / step);//屏幕宽度可容纳几个速率峰值的显式
let speedCount = 300;
let speedCountHandle = -1;
const debugMsg =
//T只需要一个坐标，其控制点已由前面的Q的控制点控制（控制方式为对称控制，比如Q5 20, 10 20 T15 35，相当于Q5 20, 10 20 T15 20,15 35）
//因此起点坐标(0,0)Q终点坐标(10,20)与T坐标(15,35)组成一条二次平滑贝塞尔曲线，
//（平滑的意思是Q终点坐标并不是作为下一条贝塞尔曲线的起点，而是通过T坐标使Q终点坐标再次延伸一点至T坐标，构成贝塞尔曲线的顺滑结尾，并以T坐标为下一条贝塞尔曲线的起点坐标）
//Q终点坐标的控制点坐标的获取方案为：取起点坐标与Q终点坐标的X轴坐标的中点为X，取Q终点坐标的Y轴坐标为Y
//T坐标的获取方案为：取相邻两个Q终点坐标的X轴坐标与Y轴坐标的终点坐标为X和Y
//例如：const _path = new Path(&M0 0 Q5 20, 10 20 T15 35, Q17.5 50, 20 50 T25 25, Q27.5 0, 30 0 T35 0, Q37.5 0, 40 0 T45 15, Q47.5 30, 50 30 T55 20, Q57.5 10, 60 10 T65 5, Q67.5 0, 70 0&);
var speedCanvas = React.createClass({
getDefaultProps(){
getInitialState(){
speedLevel: 1,//速率档位 1档(0-h) 2档(h-2h) 3档(2h-3h) 4档(3h-4h) 5档(4h-5h)... h一般为100多
speedStr: ' ',
speedArr: []//[[10,20,[5,20],[15,35]],[20,50,[17.5,50],[25,25]],[30,0,[27.5,0],[35,0]],[40,0,[37.5,0],[45,15]],[50,30,[47.5,30],[55,20]],[60,10,[57.5,10],[65,5]],[70,0,[67.5,0],[72.5,0]]] 第一个为坐标，第二个为速率，第三个为Q控制点坐标，第四个为T坐标
componentDidMount(){
componentWillReceiveProps(props){
clearTimeout(speedCountHandle);
speedCountHandle = setTimeout(()=& {
this.receiveSpeed({speed: props.speed});
}, speedCount);//此处定时器用于清除频繁的state状态改变而导致的频繁画线
receiveSpeed(props){
this.console(&receiveSpeed===currSpeed:& + props.speed);
//保证最新的速率曲线在数组的第一位
let _currLength = this.state.speedArr.
let _speedLevel = 1;
this.state.speedLevel = 1;//若不重置此值，则speedLevel记录最高档，速率曲线图不会随着档位的下降而自动以该档位的最高速率填满画布
if (_currLength & stepNum) {
this.state.speedArr.splice(0, 0, [10, props.speed]);
_currLength = this.state.speedArr.
for (let i = 0; i & _currL i++) {
this.state.speedArr[i][0] = (i + 1) *//重置X轴坐标为10,20,30...
_speedLevel = Math.ceil(this.state.speedArr[i][1] / h);
_speedLevel & this.state.speedLevel ? this.state.speedLevel = _speedLevel :
this.checkSpeedArr();
this.state.speedArr.splice(_currLength - 1, 1);//清除数组最末元素，也即最旧的速率值
this.state.speedArr.splice(0, 0, [10, props.speed]);//往数组首元素中插入最新速率值
_currLength = this.state.speedArr.
for (let i = 0; i & _currL i++) {
this.state.speedArr[i][0] = (i + 1) *//重置X轴坐标为10,20,30...
_speedLevel = Math.ceil(this.state.speedArr[i][1] / h);
_speedLevel & this.state.speedLevel ? this.state.speedLevel = _speedLevel :
this.checkSpeedArr();
//确定各个速率点以及各速率点的Q、T点
checkSpeedArr(){
let _speedArr = this.state.speedA
for (let i = 0, j = _speedArr. i & i++) {
if (i & 0) {
_speedArr[i].length & 2 ? _speedArr[i].splice(2) :
_speedArr[i].push([_speedArr[i - 1][3][0] + (_speedArr[i][0] - _speedArr[i - 1][3][0]) / curvature, _speedArr[i][1]]);//添加当前坐标的控制点(Q坐标的控制点)
if (_speedArr[i + 1] !== undefined) {
_speedArr[i].push([_speedArr[i][0] + (_speedArr[i + 1][0] - _speedArr[i][0]) / curvature * (curvature - 1), _speedArr[i][1] + (_speedArr[i + 1][1] - _speedArr[i][1]) / 2]);//添加T坐标点
_speedArr[i].push([_speedArr[i][0] + (_speedArr[i][0] - _speedArr[i][2][0]), 0]);//添加T坐标点，当其为最后一个坐标点时候，需要与X轴闭合
_speedArr[i].push([_speedArr[i][0] / curvature, _speedArr[i][1]]);//添加当前坐标的控制点(Q坐标的控制点)
if (_speedArr[i + 1] !== undefined) {
_speedArr[i].push([_speedArr[i][0] + (_speedArr[i + 1][0] - _speedArr[i][0]) / curvature * (curvature - 1), _speedArr[i][1] + (_speedArr[i + 1][1] - _speedArr[i][1]) / 2]);//添加T坐标点
_speedArr[i].push([_speedArr[i][0] + (_speedArr[i][0] - _speedArr[i][2][0]), 0]);//添加T坐标点，当其为最后一个坐标点时候，需要与X轴闭合
this.checkSpeedStr();
//右下角坐标系的转换，以右下角为坐标系统的映射方式为：(0,0)=&(w,h) (5,10)=&(w-5,h-10)
checkSpeedStr(){
this.console(&checkSpeedStr===speedLevel:& + this.state.speedLevel);
let _str = &M& + w + & & + h + & &;
let _speedArr = [].concat(JSON.parse(JSON.stringify(this.state.speedArr)));//拷贝一下数组，用于将坐标系转换成右下角坐标系
let _speedLevel = this.state.speedL
for (let i = 0, j = _speedArr. i & i++) {
_str += &Q& + (w - _speedArr[i][2][0]) + & & + (h - _speedArr[i][2][1] / _speedLevel) + &, & + (w - _speedArr[i][0]) + & & + (h - _speedArr[i][1] / _speedLevel);
if (_speedArr[i][3] !== undefined) {
_str += & T& + (w - _speedArr[i][3][0]) + & & + (h - _speedArr[i][3][1] / _speedLevel) + &, &;
this.setState({speedStr: _str});
render() {
//this.console(&render===speedStr:& + this.state.speedStr);
const _path = new Path(this.state.speedStr).close();
&View style={Styles.canvasWrap}&
&Surface width={w} height={h}&
&Shape d={_path} stroke=&#36ffff& strokeWidth={2} fill=&rgba(54,255,255,0.2)&/&
&/Surface&
console(msg){
debugMsg ? console.log(&+++speedCanvas===& + msg + &===console end+++&) :
var Styles = StyleSheet.create({
canvasWrap: {
height: h,
borderBottomWidth: 2,
borderBottomColor: '#36ffff'
module.exports = speedC
引用方式为：
1）导入该speedCanvas.js文件，注意用大写字母开头以用作该js文件的引用（否则会报引用类型的错误，大致好象是，需要一个类，但却是一个数组对象之类的错误），比如
import SpeedCanvas from &./speedCanvas&;
2）在render中引入，并传入速率值作为属性
&SpeedCanvas speed={this.state.speed} /&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：11228次
排名：千里之外
原创：33篇
(10)(1)(4)(4)(1)(7)(7)(2)初窥基于 react-art 库的 React Native SVG_javascript_ThinkSAAS
初窥基于 react-art 库的 React Native SVG
初窥基于 react-art 库的 React Native SVG
内容来源： 网络
来自： 
技术背景
在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。
是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上，Facebook又开发了
，封装art，使之可以被react.js所使用，即实现了前端的svg库。然而，考虑到react.js的JSX语法，已经支持将 cirle& `&svg&`等等svg标签直接插入到dom中（当然此时使用的就不是react-art库了）此外还有HTML canvas的存在，因此，在前端上，react-art并非不可替代。 
然而，在移动端，考虑到跨平台的需求，加之web端的技术积累，react-art成为了现成的绘制图形的解决方案。react-native分别在0.10.0和0.18.0上添加了iOS和Android平台上对react-art的支持，当然，没有文档。在文档基本等于没有的情况下，笔者苦逼地翻源代码，为大家带来了（全球首发？=_=）的入门文档。
示例代码
推荐大家采用react-art自带的Example:
。React.js和React-Native的区别，只在于下文所述的ART获取上，然后该例子就可以同时应用在Web端和移动端上了。 
原理和调用
获取ART
package.json中需要引入art库，笔者的版本设置是 art: ^0.10.0 。 
Android与iOS
var React = require(&react-native&);
var ReactART = React.ART; 
或者使用ES6的Destructuring特性：
var {
} = R 
Web端
var React = require(&react&);
var ReactART = React.ART; 
基本组件
获取方式
接下来的所述的代码，web端和移动端都是通用的，这也是React Native的诱惑所在。
var {
Shape,
Group,
Transform,
Surface,
} = React.ART; 
Surface
所有的svg component必须被一个Surface标签所包含。Props如下： 
width: Surface的宽度。
height: Surface的高度。
style: margin系列和padding系列都生效。
Group
Group用于组合art component。比如在一个函数中返回多个svg component的情况，此时就必须要用&Group&包一下，否则即报错。&Group&可以嵌套使用。
style：margin和padding系列均无效，我怀疑不接受style。
function _render() {
return (
&Group&
&Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} /&
&Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} /&
&/Group&
Shape
Shape用于生成路径，语法与svg中的&path&很相似。Shape的Props如下：
d: 语法与svg规范相同
stroke: 线条颜色，"#FFFFFF"的形式
strokeWidth: 线条宽度，{3}的形式
transform：接受 new ART.Transform()生成的object，具体见下文Transform条目。
语法更近似于移动端。使用方法:
var ReactART = require(&./ReactART&);
var Path = ReactART.P
function _render() {
// 除close以外的所有方法都返回修改后的自身，因此支持链式调用
var path = Path().moveTo(0, -radius)
.arc(0, radius * 2, radius)
.arc(0, radius * -2, radius)
.close();
// path可以直接赋值给d
return &Shape d={path} /&
可以看到，取出的Path是一个构造函数。Path对象的中的函数功能如下，大多与svg规范一致，我就再啰嗦一遍了。svg规范中&path&的d属性请参见
push():
reset(): 清空Path
move(x, y): 等同于&m&，移动到目的坐标，参数x和y是相对目标下的目的坐标
moveTo(x, y): 等同于&M&，与move只差别在x和y是绝对坐标。
line(x, y): 等同于&l&，从一个坐标点到另一个坐标点画直线，参数x和y是相对坐标下的目的坐标
lineTo(x, y): 等同于&L&，与line只差别在x和y是绝对坐标。
arc(x, y, rx, ry, outer): 等同于&a&，从一个坐标点向另一个坐标点画椭圆曲线，x和y是相对坐标下的目的坐标，rx和ry是椭圆的长轴半径和短轴半径，outer只有0和1两个数字，代表是大角度还是小角度。
arcTo(x, y, rx, ry, outer): 等同于&A&，与arc只差别在x和y是绝对坐标。
curve(2个，4个或6个参数): 从一个坐标点向另一个坐标点画贝塞尔曲线。
当参数为两个时，等同于&t&，绘制光滑二次贝塞尔曲线。
当参数为4个时，等同于&q&，绘制二次贝塞尔曲线。
当参数为6个时，等同于&c&，绘制三次贝塞尔曲线。
有些精通SVG的同学这时候可能就要问我了，不对啊，二次贝塞尔曲线和光滑三次贝塞尔曲线的参数都是4个，你这里没有光滑三次啊？因为开发的同学留坑没写了呀(微笑)。
Transform,ClippingRectangle，Pattern，RadialGradient，LinearGradient 未完待续...
react-art中的lib
引入lib中的module
在react-art的库中，有个神奇的lib文件夹，下面除了ReactART.js以外，还有Circle.art.js，Rectangle.art.js，Wedge.art.js等，其中Circle和Rectangle分别对应于svg规范中的圆形&circle&，矩形&rect&，而Wedge则是用于生成扇形。当然，这些module都很不完善，很有可能需要二次开发，如果这样，推荐拷贝库文件到工程中再行修改。
引入它们的语句为 var Circle = require(&react-art/lib/Circle.art&); 。这种不同寻常地引用方式是Facebook开发和维护的
引入的，react-native依赖了fbjs，而所有需要被输出的js文件的头部都会以 // @providesModule Circle.art 
的形式标明。 
Circle
使用示例：
&Circle
radius={10}
stroke="green"
strokeWidth={3}
fill="blue"
值得一提的是，Circle.art.js是个半成品，可以看到它根本没有实现svg规范中的cx和cy，因此画出来的圆的圆心始终在左上角，显示出来的也就只有半个圆。请在实际应用中自行实现，或者使用笔者提供的
Rectangle
使用示例：
&Rectangle
width={200}
height={400}
stroke="red"
strokeWidth={10}
fill="FFFFFF"
使用上述代码，就很直观看到这个module的缺陷了，矩形四条边不等宽（扶额）。
此外还接受的props有：
radius
radiusTopLeft
radiusTopRight
radiusBottomLeft
radiusBottomRight
这里的radius指的是圆角矩形的圆角半径，接受的值类型为数字，radius为四个角的通用半径，但如果设置了具体某个角的半径，则用后者。
Wedge
Wedge是楔子的意思，然而在这里却是生成各种角度的扇形=_=。使用示例： 
&Wedge
outerRadius={50}
stroke="red"
startAngle={0}
endAngle={100}
fill="FFFFFF"
生成的图形如下图：
可选Props为innerRadius，用于生成一个圆环扇形，如下图。
呐，一看这个module也是半成品，如果stroke有颜色而fill为白色就露馅了，曲线没闭合。因此，如有需求，请自行弥补。
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信