React Native ART绘制图形

最新推荐文章于 2024-08-10 07:56:44 发布
最新推荐文章于 2024-08-10 07:56:44 发布
阅读量2.1k 收藏 4
点赞数 1
分类专栏： React Native 文章标签： ReactNative ART ART 绘图 React Native 绘图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mq2856992713/article/details/109256125
版权

一、前言

我们知道在Html5，Android，iOS中都提供了绘制相关的API,如Html5中的canvas标签,Android中的Canvas类，iOS中的CoreGraphics，这些API都可以实现丰富的图形绘制；因为在实际移动应用的开发过程中,使用系统提供的一些UI组件可能没办法做出我们想要的UI效果，这个时候就需要使用绘制相关的API来自定义绘制复杂的UI；

在React中react-art是reactjs团队基于art（一个兼容各个浏览器SVG绘制的API封装）开发的模块，让react开发者能使用jsx语法绘制svg。
React Native团队分别在0.10.0和0.18.0也添加了iOS和Android平台对react-art的支持在低版本的React Native中ART就在React Native内核中，我们可以直接使ART，在高版本 的React Native中ART移动到了 '@react-native-community/art’中了,我们需要引入art库；

二、React Native ART

-React Native ART到底可以干什么?

React Native ART 是用来绘制矢量图(SVG)的;他可以让我们像Android中Canavs一样简单的绘制任意UI;

-React Native ART使用

在安卓中使用无需配置任何东西就可使用，在iOS中ART是可选的，你需要手动导入ART.xcodeproj文件，并手动导入libART.a静态库。
iOS项目中配置ART的具体方式如下：
在Xcode选中项目点击右键->Add Files to Your Project Name->选择添加Project path/node_modules/react-native/Libraries/ART/ART.xcodeproj。
在Build Phases中的Link Binary With Libraries中点击+号，选择添加libART.a。

-React Native ART使用步骤

（1）在低版本的React Native中ART就在React Native内核中，我们可以直接使用ART;

使用方式：在使用的时候直接导入相关组件

 import {
    ART
  } from 'react-native'

  const {
    Surface,
    Shape,
    Path,
    Tranform
} = ART

（2）在高版本的React Native中ART从React Native 核心库中移除了，被移到了@react-native-community/art中，

使用：

-引入art库

 npm install  @react-native-community/art

-使用的时候导入相关组件

import {Surface, Shape,Path} from '@react-native-community/art';

-基本的API
（1）Surface 一个矩形可渲染的区域，是其他元素的容器！
所有的ART相关组件都必须在Surface中,Surface中不能有非ART组件;
并且Surface必须设置宽和高

  <Surface width={500} height={500} style={{backgroundColor:'#FFFFFF'}}>
         ...
  </Surface>

（2）Shape 形状

可以设置的属性：

stroke: 线的颜色

fill:填充的颜色

strokeWidth:线的粗细

strokeDash:设置虚线相关 值是数组 数组中是两个元素第一个元素 是每个虚线的长度，第二个元素是虚线之间的距离

d:赋值一个Path对象,用于设置Shape显示的绘制形状

transform:赋值一个Transform对象，用于实现对形状的平移，旋转，缩放操作

（3）Path

Shape的属性值 表示绘制的路径

使用：

-创建Path对象

 let path=new Path();

-方法

moveTo(x,y): 移动到x,y (绝对坐标)

move(x,y): 横坐标移动x,纵坐标移动y

lineTo(x,y): 目标点坐标为(x,y) 绝对坐标，初始点和目标点之间连线

line(x,y): 目标点为当前点横坐标移动x,纵坐标移动y，初始点和目标点之间连直线

arc(x,y,rx,ry,outer): 目标点为横坐标移动x,纵坐标移动y,然后从初始点向目标点画
椭圆曲线，长轴半径为rx,短轴半径为ry

arcTo(x,y,rx,ry,outer): 目标点为(x,y)绝对坐标,然后从初始点向目标点画
椭圆曲线，长轴半径为rx,短轴半径为ry

curve(2个，4个或者6个参数)：从一个坐标点向另一个坐标点画贝塞尔曲线
当参数为2个时，绘制光滑二次贝塞尔曲线;
当参数为4个时，绘制二次贝塞尔曲线;
当参数为6个时，绘制三次贝塞尔曲线;

(4)Transform
Shape的属性值，对绘制的内容变换的属性，包括，平移，旋转，缩放变换

-创建Transform对象

let tranform=new Transform()

-方法

translate(x,y): 横坐标方向移动x，纵坐标方向移动y

scale(x,y):宽缩放x，高缩放y倍小于1就是缩小，大于一就是放大

roate(deg,x,y)：以(x,y)为旋转中心旋转deg度

(5)Group
Group组件可有可无，当绘制内容较多时可以用其统一管理，可以把它当做View标签使用，可制定内容在画布绘制的起点。

<Surface>
     <Group x={100} y={100}>
        <Shape
             strokeWidth={10}
             stroke={'#3366FF'}
             d={this.linePath}
             originX={DEVICE_WIDTH/2}
             originY={DEVICE_HEIGHT/2} />
     </Group>
 </Surface>

-实例 （绘制直线，虚线，矩形，圆）

import React from 'react';
import {
    View,
    Dimensions
} from 'react-native';
import {Surface, Shape,Path,Transform} from '@react-native-community/art';

export let DEVICE_WIDTH = Dimensions.get('window').width;
export let DEVICE_HEIGHT = Dimensions.get('window').height;

export default class MainScreen extends React.Component{
  line = new Path().moveTo(0, DEVICE_HEIGHT / 2 - 200)
        .line(DEVICE_WIDTH, 0);

    dashLine = new Path().moveTo(0, DEVICE_HEIGHT / 2)
        .line(DEVICE_WIDTH, 0);

    rectPath = new Path()
        .moveTo(20, DEVICE_WIDTH / 2)
        .lineTo(100, DEVICE_WIDTH / 2)
        .lineTo(100, DEVICE_WIDTH / 2 + 100)
        .lineTo(20, DEVICE_WIDTH / 2 + 100)
        .close();

    circlePath = new Path().moveTo(0, DEVICE_HEIGHT / 2)
        .arc(DEVICE_WIDTH, 0, DEVICE_WIDTH / 2, DEVICE_WIDTH / 2, 0)
        .arc(-DEVICE_WIDTH, 0, DEVICE_WIDTH / 2, DEVICE_WIDTH / 2, 0)
    
         render(){
            return (

            <View>
                <Surface width={DEVICE_WIDTH} height={DEVICE_HEIGHT}>

                    {/* 实线 */}
                    <Shape
                        stroke={Color.colorBlue}
                        strokeWidth={5}
                        d={this.line}
                    />

                    {/* 虚线 */}
                    <Shape
                        stroke={Color.colorBlue}
                        strokeWidth={5}
                        d={this.dashLine}
                        strokeDash={[50, 100]}>
                    </Shape>
                    
                      {/* 矩形 */}
                    <Shape
                        stroke={Color.colorBlue}
                        strokeWidth={5}
                        d={this.rectPath }
                        >
                    </Shape>

 					{/* 圆*/}
                    <Shape
                        stroke={Color.colorBlue}
                        strokeWidth={5}
                        d={this.circlePath}
                        >
                    </Shape>
                </Surface>
            </View >
            )     
      }
}

以上就是使用ART来绘制一些基本的图形；

三、React Native ART 动画

上面介绍了使用ART 的一些API来绘制基本的图形，但是这些图形都是静态的，往往我们需要图形是有动画效果的，如绘制一个加载中的圆形进度条，也即一个不断旋转的圆 ;
前面我们已经学习过React Native 动画(Animated),所以可以结合React Native中提供的Animated API来使得ART绘制的内容动起来 ；

我们知道Animated默认只支持 Animated.View， Animated.Image，Animated.ScrollView， Animated.Text，Animated.FlatList，Animated.SectionList这几种组件；
但是我们可以使用Animated.createAnimatedComponent(组件)来使得任意组件支持Animated动画;

所以我们可以让ART中的Shape创建AnimatedShape来使得Shape可以使用Animated动画，也即可以让ART绘制的内容动起来;

const AnimatedShape=Animated.createAnimatedComponent(Shape);

然后使用AnimatedShape以及Shape的相关属性，以及Animated来实现ART动画

（1）平移 通过不断改变Shape的 x,y属性值来实现平移

移动的直线：

import React from 'react';
import {
    View,
    Dimensions
} from 'react-native';
import {Surface, Shape,Path,Transform} from '@react-native-community/art';
export let DEVICE_WIDTH = Dimensions.get('window').width;
export let DEVICE_HEIGHT = Dimensions.get('window').height;
export default class MainScreen extends React.Component{
   linePath=new Path().move(0,0).lineTo(100,100);
   animateX=Animated.Value(0)
   translateX=Animated.timing(this.animateX, {
        toValue: 100,          //属性目标值
        duration: 1000,       //动画执行时间
        easing: Easing.linear
    })
   componentDidMount() {
       this.translateX.start()
   }
   render(){
    
    return (
       <View>
        <Surface width={DEVICE_WIDTH} height={DEVICE_HEIGHT}>
             <AnimatedShape
                 strokeWidth={10}
                 stroke={'#3366FF'}
                 x={this.animateX}
                 y={this.animateX}
                 d={this.linePath}
              >
        </Surafce>
       </View>
    )
   }
}

（2）旋转
Shape的originX,originY属性为旋转中心，通过不断改变 rotation 旋转角度来实现旋转动画

旋转的圆形加载进度条：

import React from 'react';
import {
    View,
    Dimensions
} from 'react-native';
import {Surface, Shape,Path,Transform} from '@react-native-community/art';
export default class MainScreen extends React.Component{
    radius=30
    bgCirclePath=new Path().moveTo(DEVICE_WIDTH/2-this.radius,DEVICE_HEIGHT/2)
        .arc(this.radius*2,0,this.radius,0,0)
        .arc(-(this.radius*2),0,this.radius,0,0)

    progressCirclePath=new Path().moveTo(DEVICE_WIDTH/2- this.radius,DEVICE_HEIGHT/2)
        .arc(this.radius*2,0,this.radius,0,0)
    deg=new Animated.Value(0)    
    rotate=Animated.timing(this.deg, {
    toValue: 1,        //属性目标值
    duration: 1000,    //动画执行时间
    easing: Easing.linear
    })    
    
    componentDidMount() {
        this.startAnimate()
    }

    startAnimate(){
        this.deg.setValue(0)
        this.rotate.start(()=>{this.startAnimate()})
    }    
   render(){
    
    return (
       <View>
        <Surface width={DEVICE_WIDTH} height={DEVICE_HEIGHT}>
        
         <AnimatedShape
             strokeWidth={10}
             stroke={'#C0C0C0'}
             d={this.bgCirclePath}
             >
         </AnimatedShape>

     <AnimatedShape
         strokeWidth={10}
         stroke={'#0066FF'}
         d={this.progressCirclePath}
         rotation={realDeg}
         originX={DEVICE_WIDTH/2}
         originY={DEVICE_HEIGHT/2}>  
      </AnimatedShape>
     </Surafce>
   </View>
    )
   }
}

（3）缩放 通过修改Shape的scale或者scaleX,scaleY属性值来实现缩放
这个就不再写示例了，直接参考上面平移，旋转动画实现就可以了；

以上就是React Native ART 动画的基本实现

殇神马
关注
专栏目录
react-native之ART绘图详解
xiangzhihong8的专栏
08-02 1万+
背景在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上，Facebook又开发了react-art ，封装art，使之可以被react.js所使用，即实现了前端的svg库。然而，考虑到
react-native-ART-绘图
西海燃风的博客
10-19 901
Android默认就包含ART库，IOS需要单独添加依赖库。(添加依赖的方法百度一下哦) 这里主要是我自己做的笔记，把别人的代码都跑了一遍而已 基础组件 ART暴露的组件有7个，这篇用到的有五个。先介绍即将用到的四个组件，之后在介绍另外三个。  Surface - 一个矩形可渲染的区域，是其他元素的容器！ Group - 可容纳多个形状、文本和其他的分组 Shape - 形状定义，可填...
探索创新：React Native中的强大绘图工具——react-native-canvas
最新发布
gitblog_00444的博客
08-10 326
探索创新：React Native中的强大绘图工具——react-native-canvas react-native-canvasA Canvas component for React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-canvas 在移动开发领域，React Native以其卓越的跨平台能力和灵活的组件系统赢...
react-native之ART绘图方法详解
08-29
本篇文章主要介绍了react-native之ART绘图方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native-art-绘图入门
weixin_34270865的博客
08-19 215
在React Native中ART是个非常重要的库，它让非常酷炫的绘图及动画变成了可能。但是可能是知道的人真的不多导致文档及少中文更少。很多都是把英文的参数列表翻译过来，也没有案例。于是决定出这样一份入门文档及可能遇到的坑，希望能够帮助到大家。本文的示例工程https://github.com/xu-duqing/React-Native...
React-Native使用ART实现水波纹动画、波浪线、声波音频波动效果(附源码)
05-02
在React Native中有个ART库，它可以绘制各种线(实线、虚线、曲线)、图形(矩形、圆、扇形)组合，让非常酷炫的绘图及动画变成了可能。 至于水波纹、波浪动画、声波音频这些常用的效果，一般都是贝塞尔曲线加持画出来...
ReactNative组件用于利用ReactART创建动画圆形进度条
08-10
ReactART是React的一个扩展库，它为React Native提供了一个2D图形渲染层，使得开发者能够在移动平台上创建丰富的图形，包括自定义的动画和图表。 本篇将详细讲解如何利用React Native组件与ReactART来创建动画圆形...
react-native-art画二次贝塞尔曲线实现
xiongqiangwin1314的专栏
12-19 6923
1、关于react-native ART库的使用，目前网上能搜到的少之又少，简书上的一篇react-native-art 绘图入门，从基本上讲解了一下react-native-art的使用方法，但是只是简单的横竖曲线的绘制，但项目中有一个需求就是绘制网速的速率曲线， （项目最终效果） 那么如果按照react-native-art绘图入门上给的寥寥几个接口是不可能实现画出一个平滑曲线的目
React-Native ART绘图
supming1的专栏
10-20 2152
最近项目中需要实现类似进度条的仪表盘效果，考虑可能可以通过绘图实现，网上查了不少资料，都是说采用React-Native 自带的ART模块进行绘图，但按照参照网上的方法，各种报错，后在github 的react-native项目issue中，发现ART模块已经独立出来了，官方推荐采用https://github.com/react-native-community/art进行代替，经尝试，按官网...
react-sketchpad, 用画布创建的绘图板.zip
09-17
react-sketchpad, 用画布创建的绘图板 sketchpad用画布创建的绘图板我为什么要这么做？学习学习学习好玩:？示例： 这个gif中使用了 web socket，它不是示例的一部分。 让它与同步工作，只运行这个 web socket服务器i
react-native-pure-chart：react-native图表库，不使用svg或ART，而仅使用react本地纯组件
02-05
React本机纯图表 不使用svg或ART而是仅使用react-native组件的纯React本机图表库。 （您不必导入带有react-native link图形库或将ART添加到您的项目中！） 演示版 线图 LineChart（多系列） 条形图 条形图（多系列） 饼图（测试版） 安装 yarn add react-native-pure-chart 或者使用npm： npm install react-native-pure-chart --save 需要 import PureChart from 'react-native-pure-chart' ; 用法 单一系列：简
react-native-art 实现二次贝塞尔曲线绘制
12-19
利用react-native自带ART库实现贝塞尔曲线的绘制
react-native-sketch-view：React Native组件，用于基于触摸的绘图，支持iOS和Android
02-06
无法保留此套餐 您应该将与一起使用 react-native-sketch-view React Native组件，用于支持iOS和Android的基于触摸的绘图。 受库的启发， 和 。 编写此组件是为了满足以下用例： 适用于iOS和android的基于Touch的基本绘图。 不应包含任何用于交互的UI元素。 可以在react native中创建和自定义UI元素。 支持触摸绘图，擦除部分绘图，清除绘图，本地保存绘制的图像以及打开本地保存的图像。 入门 $ npm install react-native-sketch-view --save或$ yarn add react-nati
react-native-sketch：React一个React Native 基于触摸的绘图的组件
02-03
:artist_palette: React本机素描 用于基于触摸的绘图的React Native组件。 产品特点 :backhand_index_pointing_up: 用手指绘图，并从中导出图像。 :crayon: 动态更改笔触的颜色和粗细。 :ghost: 生成透明图像（或不生成）。 建立 从npm安装模块： npm i -S react-native-sketch 将模块链接到您的项目： react-native link react-native-sketch 用法 import React from 'react' ; import { Alert , Button , View } from 'react-native' ; import Sketch from 'react-native-sketch' ; export default class MyPaint extends React . Component { save = ( ) => { this . sketch . save ( ) . then ( ( { path } )
react-native-Art动画基础
喜欢你就像站在灿烂的晴空下，玻璃心碎一地，每片渣却都在发光。
11-25 5283
一：基础： ART：暴露了七个组件： ● Surface - 一个矩形可渲染的区域，是其他元素的容器！ ● Group - 可容纳多个形状、文本和其他的分组 ● Shape - 形状定义，可填充 ● Text - 文本形状定义 props ● Surface ○ width : 渲染区域的宽 ○ height : 定义渲染区域的高
React Native SVG Animated 绘制动画
s349856186的专栏
01-09 4045
转自：React Native SVG描边动画stroke属性 stroke 定义描边颜色 stroke="#0078ff" strokeWidth 定义描边的宽度strokeWidth="3" 创建虚线时候用到的属性：strokeDasharray 创建虚线// 假设一个‘空格’5像素，一个‘_’5像素 strokeDasharray="5" // 看到的是 _ _ _ _ 即5像素实线，
React-Native ART 绘图简析
...
10-23 3433
  刚创建的React Native 微信公众号，欢迎微信扫描关注订阅号，每天定期会分享react native 技术文章，移动技术干货,精彩文章技术推送。同时可以扫描我的微信加入react-native技术交流微信群。欢迎各位大牛,React Native技术爱好者加入交流！ 本篇博客依旧是关于 React Native 的开发内容。今天和大家唠唠 React Native 中绘图机制：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值