React Native ART
类似于 h5 的 svg
非官方文档，栗子有一些错误
React Native ART介绍
打印 ART 发现如下内容：
【ART】
Surface:ƒ Surface()
Group:ƒ Group()
Shape:ƒ Shape()
ClippingRectangle:ƒ ClippingRectangle()
Text:ƒ Text()
Pattern:ƒ Pattern(url, width, height, left, top)
Path:ƒ (a, b, c, d, e, f, g, h)
Transform:ƒ (a, b, c, d, e, f, g, h)
LinearGradient:ƒ LinearGradient(stops, x1, y1, x2, y2)
RadialGradient:ƒ RadialGradient(stops, fx, fy, rx, ry, cx, cy)
【ART.Path】
constructor: ƒ (a, b, c, d, e, f, g, h)
initialize: ƒ initialize(path)
reset: ƒ reset()
close: ƒ close()
line: ƒ line(x, y)
lineTo: ƒ lineTo(x, y)
move: ƒ move(x, y)
moveTo: ƒ moveTo(x, y)
arc: ƒ arc(x, y, rx, ry, outer, counterClockwise, rotation)
arcTo: ƒ arcTo(x, y, rx, ry, outer, counterClockwise, rotation)
counterArc: ƒ counterArc(x, y, rx, ry, outer)
counterArcTo: ƒ counterArcTo(x, y, rx, ry, outer)
curve: ƒ curve(c1x, c1y, c2x, c2y, ex, ey)
curveTo: ƒ curveTo(c1x, c1y, c2x, c2y, ex, ey)
onArc: ƒ onArc(sx, sy, ex, ey, cx, cy, rx, ry, sa, ea, ccw, rotation)
onBezierCurve: ƒ onBezierCurve(sx, sy, p1x, p1y, p2x, p2y, x, y)
onClose: ƒ onClose()
onLine: ƒ onLine(sx, sy, x, y)
onMove: ƒ onMove(sx, sy, x, y)
onReset: ƒ onReset()
push: ƒ push()
toJSON: ƒ toJSON()
_arcToBezier: ƒ onArc(sx, sy, ex, ey, cx, cy, rx, ry, sa, ea, ccw, rotation)
【ART.Transform 】
constructor: ƒ (a, b, c, d, e, f, g, h)
initialize: ƒ Transform(xx, yx, xy, yy, x, y)
inversePoint: ƒ inversePoint(x, y)
move: ƒ move(x, y)
moveTo: ƒ moveTo(x, y)
point: ƒ point(x, y)
resizeTo: ƒ resizeTo(width, height)
rotate: ƒ rotate(deg, x, y)
rotateTo: ƒ rotateTo(deg, x, y)
scale: ƒ scale(x, y)
scaleTo: ƒ scaleTo(x, y)
transform: ƒ transform(xx, yx, xy, yy, x, y)
transformTo: ƒ Transform(xx, yx, xy, yy, x, y)
translate: ƒ translate(x, y)
Surface
ART内容的父层，其中不能包含非ART标签（否则直接闪退…），需要指定宽高。
Group
分组，类似于 View，可指定内容在画布绘制的起点。
Shape
ART 绘制的核心，d属性指定绘制路径
Path
line: ƒ line(x, y)
lineTo: ƒ lineTo(x, y)
move: ƒ move(x, y)
moveTo: ƒ moveTo(x, y)
arc: ƒ arc(x, y, rx, ry, outer, counterClockwise, rotation)
arcTo: ƒ arcTo(x, y, rx, ry, outer, counterClockwise, rotation)
counterArc: ƒ counterArc(x, y, rx, ry, outer)
counterArcTo: ƒ counterArcTo(x, y, rx, ry, outer)
curve: ƒ curve(c1x, c1y, c2x, c2y, ex, ey)
curveTo: ƒ curveTo(c1x, c1y, c2x, c2y, ex, ey)
- reset 重置当前的路径，类似于 canvas 的 beginPath()
- close 用线段闭合当前点到当前子段的第一个点（之前如果线不连续则最开始的一段不在闭合区域内）
- move/moveTo 从一点移动到另一点
- line/lineTo 从一点画线到另一点
- arc/arcTo 从一点通过顺时针画曲线到另一点
- counterArc/counterArcTo 从一点通过逆时针画曲线到另一点
- 带to的都是绝对位置，不带to的都是相对位置。
LinearGradient
LinearGradient(stops, x1, y1, x2, y2)
stops 停的位置与颜色，(x1,y1) 起点 (x2,y2) 终点
RadialGradient
RadialGradient(stops, fx, fy, rx, ry, cx, cy)
噗哈哈哈，径向渐变目前有问题啊...
一片黑...
都是一片黑...
Transform
move(deltaX[,deltaY])
moveTo(x[,y])
scale(scaleX[,scaleY])
rotate(deg[,transformOriginX,transformOriginY])
rotateTo(deg[,transformOriginX,transformOriginY])
transform(scaleX, skewX, skewY, scaleY, translateX, translateY)
ClippingRectangle
截取一块区域用来绘图。
【实例】
import React, { Component } from 'react';
import {
ScrollView,
StyleSheet,
ART
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
const path = new ART.Path();
path.moveTo(10, 10);
path.lineTo(20, 10);
path.reset(); // Reset the current path. Just like beginPath in canvasRenderingContext2d.
path.moveTo(50, 50);
path.lineTo(50, 100);
path.lineTo(100, 100);
path.close();
return (
{/* 第一组 Shape 线段 moveTo lineTo*/}
{/* 第二组 Text 文字 */}
zdy
{/* 第三组 Shape 画圆 arcTo */}
{/* 第四组 Shape 顺时针弧线 画扇形 arcTo */}
线段(50,0)->弧线(100, 50, 50)->线段(50, 50)
/>
{/* 第五组 Shape 逆时针弧线 counterArcTo */}
线段(50,0)->弧线(100, 50, 50)->线段(50, 50)
/>
{/* 第六组 Shape 曲线 curve */}
{/* 第七组 Shape 曲线 curveTo */}
{/* 第八组 Shape reset */}
{/* 第九组 Shape reset */}
{/* 第十组 Shape reset */}
{/* 第十一组 Shape Pattern 失败了 */}
{/*
*/}
{/* 第十二组 Shape ClippingRectangle */}
{/* 第十三组 Shape svg 值 */}
);
}
componentDidMount() {
// console.log(ART)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
}
});
效果图