React Native ART

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 (
            <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',
    }

});
效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249