前言
在前端开发中，图形和可视化的处理不仅仅是美观的考虑，对于数据的解释和展示也有重要意义。React库中的react-art的出现，为前端工程师提供了一种简单易用的图形处理方式，我们可以通过npm安装其包：@prometheansacrifice/react-art 来使用这个库。
简介
React Native的一个特性是可以通过与Art库结合来渲染图形对象。react-art就是React Native中的一个图形绘制库，其主要特点是可以将绘图以声明式的方式建立在React组件树中，这与使用HTML/CSS的方式非常相似。@prometheansacrifice/react-art正是基于这个优秀的库进行二次开发后的优化。
安装
使用npm安装@prometheansacrifice/react-art:
npm install --save @prometheansacrifice/react-art
使用教程
以下利用一个简单的实例进行演示，同时假定项目中已经安装了@prometheansacrifice/react-art包和react-native-web包。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ------ ----- ---- ---------------------------------
----- ----------- ------- --------------- -
-------- -
----- ---- - ------
------------
--------------
------------------------- -- ------
---------
------ -
-------- ----------- -------------
------ -------- ------------- --------------- ----------- --
----------
--
-
-在上面的代码中，我们通过一个Path对象来创建一条路径，并通过Shape组件将路径渲染到画布(Surface)之上。
Surface、Shape、Path 这三个对象是使用react-art中最频繁的三个对象，下面我们分别看一下。
Surface
Surface是创建画布的组件，一个页面上可以有多个Surface组件。它的实现方式和<canvas>大致相同，区别在于它是组成了React树的一部分，并且支持声明式的方式创建图形元素。
Surface常用的属性有如下几个：
- width - 指定画布的宽度。
- height - 指定画布的高度。
- style - 设置画布的CSS样式。
- top/left/bottom/right - 如果需要定位, 此4个值可以用来指定位置。
Shape
Shape是创建基本图形元素的组件，包括了线、圆等。它的d属性可以接收一个Path对象，通过这个Path对象来决定这个Shape要渲染出来怎样的图形。
Shape常用的属性有如下几个：
- d - 指定一个Path对象，描述该Shape的形状。
- fill - 填充颜色。
- stroke - 边框颜色。
- strokeWidth - 边框的大小。
Path
Path是创建基本图形的工具类，提供了一系列的方法来描述形状。本来Path对象就是用于在canvas上进行画图、线条等基本绘制的，仅仅小小修改一下（屏蔽了mouse和touch事件等浏览器交互），就可以变成React Native的组件了。
Path常用的方法有如下几个:
- moveTo(x, y) - 移动到（x，y）给定的坐标处。
- lineTo(x, y) - 创建到（x，y）给定的平面点的线条。
- arc(x, y, radius, startAngle, endAngle, clockwise) - 从(cx，cy)给定的中心开始创建一个圆弧，其半径为r并由开始（以弧度表示）和结束（以弧度表示）角所给定的角度范围定义。最后一个布尔值参数控制逆时针还是顺时针绘制弧线。
- close() - 将当前子路径的"回路"闭合，并将其终点与起点相连。
示例代码
下面是一个更为综合的示例，包含了一个简单的形状和一段动画，可以在画布中呈现一个跳动的心形。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ----- ------ ------ ---- ---------------------------------
------ - -------- - ---- ------------------
----- ----- ------- --------- -
------------------ -
-------------
---------- - -
---------- --- -----------------
--
-
------------------- -
--------------
------------------------------------- -
-------- --
------- ----
--
----------
-
-------- -
----- ---- -
------
--------------
---------------------------------
-------------------------------------
-----------------------------------
---------------------------------------
--------------------------------------
---------------------------------
---------
------ -
-------- ----------- -------------
------ ------- --------
--------------
--------
----------------
--------------
-----------------------------------------
----------- --- ---
------------ --- ----
---
--
--------
----------
-
-
-
----- ------------- - ----------------------------------------
------ ------- ------我们在组件中创建了一个Animated.Value实例，并将其作为动画的进度，然后使用Animated.createAnimatedComponent高阶函数将Shape组件转换为一个能够响应动画进度的组件，最终在画布上渲染该组件即可达到心形动态跳动的效果。
结语
通过该篇文章，我们已经学习到了使用@prometheansacrifice/react-art包进行图形绘制的基本方法及其三个对象的属性和使用方式，同时通过一个简单的示例了解到了在画布中创建动画的方法。在实际开发中使用react-art库，我们可以利用其声明式的方式构建图形树，大大提高可读性与编写效率，同时减少了一些手动绘制图形时的困难与错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005569681e8991b448d3618