React Native ART
類似于 h5 的 svg
打印 ART 發(fā)現(xiàn)如下內(nèi)容：
【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內(nèi)容的父層啥寇，其中不能包含非ART標(biāo)簽（否則直接閃退…）扒接，需要指定寬高。
Group
分組叶圃，類似于 View，可指定內(nèi)容在畫布繪制的起點(diǎn)。
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 重置當(dāng)前的路徑，類似于 canvas 的 beginPath()
- close 用線段閉合當(dāng)前點(diǎn)到當(dāng)前子段的第一個(gè)點(diǎn)（之前如果線不連續(xù)則最開始的一段不在閉合區(qū)域內(nèi)）
- move/moveTo 從一點(diǎn)移動(dòng)到另一點(diǎn)
- line/lineTo 從一點(diǎn)畫線到另一點(diǎn)
- arc/arcTo 從一點(diǎn)通過順時(shí)針畫曲線到另一點(diǎn)
- counterArc/counterArcTo 從一點(diǎn)通過逆時(shí)針畫曲線到另一點(diǎn)
- 帶to的都是絕對(duì)位置虐沥，不帶to的都是相對(duì)位置熊经。
LinearGradient
LinearGradient(stops, x1, y1, x2, y2)
stops 停的位置與顏色，(x1,y1) 起點(diǎn) (x2,y2) 終點(diǎn)
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
截取一塊區(qū)域用來繪圖镐依。
【實(shí)例】
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]} // 長(zhǎng)度 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)} // 從一個(gè)點(diǎn)(50,50) 通過畫圓（半徑50）的方式到達(dá)另一個(gè)點(diǎn) (150,50) 再通過畫圓（半徑50）的方式到達(dá)起點(diǎn)(50,50)完成畫圓
/>
</ART.Group>
{/* 第四組 Shape 順時(shí)針弧線 畫扇形 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 逆時(shí)針弧線 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} // 橫向起始點(diǎn)
y={0} // 縱向起始點(diǎn)
>
<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',
}
});
效果圖
