React Native ART
2018-08-01 本文已影响0人
静候那一米阳光
React Native ART
类似于 h5 的 svg
打印 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 (
<ScrollView style={styles.container}>
<ART.Surface width={400} height={1500} visible={false} style={{ backgroundColor: '#eee' }}>
{/* 第一组 Shape 线段 moveTo lineTo*/}
<ART.Group x={10} y={10}>
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={5} // 描边的宽度
fill="#0000ff" // 填充的颜色
// strokeDash={[10, 10, 20, 20, 30, 30]} // 长度 line-gap-line-gap-... repeat
strokeCap="round" // cap style of path end. oneOf(["butt", "round"(default), "square"])
strokeJoin="bevel" // path join point style. oneOf(["miter", "round"(default), "bevel"])
d={new ART.Path().moveTo(10, 10).move(10, 10).lineTo(40, 10).moveTo(40, 40).lineTo(40, 80).lineTo(80, 80).close()} //
/>
</ART.Group>
{/* 第二组 Text 文字 */}
<ART.Group x={100} y={10}>
<ART.Text
strokeWidth={5} // 描边宽度
stroke="#00ff00" // 描边颜色
fill="#000000" // 文字颜色
alignment="center"
font={{
fontFamily: 'Helvetica, Neue Helvetica, Arial',
fontSize: 23,
fontWeight: "bold",
fontStyle: "italic",
}}
// transform={ART.Transform().translate(150, 150).rotate(30, 100, 100).scale(3, 2)}
>zdy
</ART.Text>
</ART.Group>
{/* 第三组 Shape 画圆 arcTo */}
<ART.Group x={0} y={100} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
d={new ART.Path().moveTo(50, 50).arcTo(150, 50, 50).arcTo(50, 50, 50)} // 从一个点(50,50) 通过画圆（半径50）的方式到达另一个点 (150,50) 再通过画圆（半径50）的方式到达起点(50,50)完成画圆
/>
</ART.Group>
{/* 第四组 Shape 顺时针弧线 画扇形 arcTo */}
<ART.Group x={0} y={200} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
fill="#00ff00"
d={new ART.Path().moveTo(50, 50).lineTo(50, 0).arcTo(100, 50, 50).lineTo(50, 50)} // (50, 50)->线段(50,0)->弧线(100, 50, 50)->线段(50, 50)
/>
</ART.Group>
{/* 第五组 Shape 逆时针弧线 counterArcTo */}
<ART.Group x={100} y={200} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
fill="#00ff00"
d={new ART.Path().moveTo(50, 50).lineTo(50, 0).counterArcTo(100, 50, 50).lineTo(50, 50)} // (50, 50)->线段(50,0)->弧线(100, 50, 50)->线段(50, 50)
/>
</ART.Group>
{/* 第六组 Shape 曲线 curve */}
<ART.Group x={0} y={300} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
fill="#00ff00"
// If now we are at (10, 10), it draw a cubic bezier curve from (10, 10) to (22, 42) and use (10, 20) as first control point and (30, 40) the second one
d={new ART.Path().moveTo(10, 10).curve(10, 20, 30, 40, 12, 32)}
/>
</ART.Group>
{/* 第七组 Shape 曲线 curveTo */}
<ART.Group x={100} y={300} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
fill="#00ff00"
// if now we are at (10, 10), it draw a cubic bezier curve from (10, 10) to (12, 32) and use (10, 20) as first control point and (30, 40) the second one
d={new ART.Path().moveTo(10, 10).curveTo(10, 20, 30, 40, 12, 32)}
/>
</ART.Group>
{/* 第八组 Shape reset */}
<ART.Group x={200} y={300} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
fill="#00ff00"
d={path}
/>
</ART.Group>
{/* 第九组 Shape reset */}
<ART.Group x={0} y={400} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
d={new ART.Path().moveTo(100, 0).lineTo(300, 0).lineTo(300, 100).lineTo(100, 100).close()}
fill={
new ART.LinearGradient({
"0": "#2ba",
".5": "#f90",
"0.7": "#aa4422",
"1": "rgba(255,255,255,0.5)"
}, 100, 50, 300, 50)
}
/>
</ART.Group>
{/* 第十组 Shape reset */}
<ART.Group x={0} y={500} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
// d={new ART.Path().moveTo(100, 50).arcTo(200, 50, 50).arcTo(100, 50, 50)}
d={new ART.Path().moveTo(100, 0).lineTo(300, 0).lineTo(300, 100).lineTo(100, 100).close()}
fill={
new ART.RadialGradient({
"0": "#2ba",
"1": "#f90",
}, 300, 200, 400, 400, 200, 200)
}
/>
</ART.Group>
{/* 第十一组 Shape Pattern 失败了 */}
{/* <ART.Group x={0} y={600} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
// d={new ART.Path().moveTo(100, 50).arcTo(200, 50, 50).arcTo(100, 50, 50)}
d={new ART.Path().moveTo(100, 0).lineTo(300, 0).lineTo(300, 100).lineTo(100, 100).close()}
transform={new ART.Transform().scaleTo(0.5, 0.5).move(50, 0).rotate(90, 100, 0).transform(2, 0, 1, 1, 0, 0)}
/>
</ART.Group> */}
{/* 第十二组 Shape ClippingRectangle */}
<ART.Group x={0} y={1000} >
<ART.ClippingRectangle
width={20} // 宽度
height={20} // 高度
x={0} // 横向起始点
y={0} // 纵向起始点
>
<ART.Shape d={new ART.Path().moveTo(0, 0).lineTo(200, 200)} stroke="black" strokeWidth={10} />
</ART.ClippingRectangle>
<ART.ClippingRectangle
width={20}
height={20}
x={100}
y={100}
>
<ART.Shape d={new ART.Path().moveTo(0, 0).lineTo(200, 200)} stroke="black" strokeWidth={10} />
</ART.ClippingRectangle>
</ART.Group>
{/* 第十三组 Shape svg 值 */}
<ART.Group x={0} y={1200} >
<ART.Shape
stroke="#ff0000" // 描边的颜色
strokeWidth={2} // 描边的宽度
// d={new ART.Path().moveTo(100, 50).arcTo(200, 50, 50).arcTo(100, 50, 50)}
d={"M123,.16c36.58-.71,70.44,1,102,6,13.42,2.14,28.67-4.46,32,7,2.61,9-13.92,32.74-19,36l-12,3C209.92,67,186.19,143,180,171.16c-3.19,14.43-9.42,36.06-2,48,44.27,9.9,76-40,101-39l1,2c2.34,29.21-109.13,89.76-144,79-27.46-69.43,43.56-162.42,63-211v-1c-59.61-2.63-140.8-15.75-174,21-.38,28.16,17.27,27,31,40,1.35,44.31-40.85,41.54-53,9-16.52-44.23,40-94.3,67-106C85.79,6.3,105.21,7.17,123,.16Z"}
/>
</ART.Group>
</ART.Surface>
</ScrollView>
);
}
componentDidMount() {
// console.log(ART)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
}
});
效果图
