这个技术分享是关于HarmonyOS原生应用开发的前端UI特效的实现。

我个人的鸿蒙APP：XstoryMakerAPP中大量使用了以下前端开发内容以丰富表现力。

这里准备了五个部分，分别是：

1. SVG的应用

2. 组件的封装

3. Canvas的应用

4. 文件的操作

5. 音频可视化

最终你可以实操获得如下效果Demo：

在HarmonyOS原生应用开发中，我们使用的ArkUI框架提供了一套丰富的UI组件。

在实际开发中，我们可能会遇到一些特殊的UI需求，这时候我们可以使用SVG来实现。

SVG（Scalable Vector Graphics）是一种基于XML的图形文件格式，用于描述二维矢量图形。它的关键特点是图像可以在不损失质量的情况下无限放大或缩小，因其使用矢量（几何形状）而非像素表示图形。SVG由万维网联盟（W3C）制定并维护，最早在1999年提出，2001年发布了1.0版本。

尽管大部分时间我们看到的SVG常常运行在H5，但是在实际应用中。这二十年的时间早已让SVG深入到了各种前端技术中。

那么在HarmonyOS应用开发中，我们来实际操作一个SVG的例子。

1. 开始前的准备

示例:

在上图中是多个利用SVG装饰的自定义组件，这些组件是基于ArkUI原生组件的封装，通过SVG来装饰的UI效果。

首先我们利用SVG创作工具进行设计，得上上图中的多边形矢量图形，然后将其转换为SVG格式的文件。

svg的代码如下：

SVG是通用的矢量图形格式，所以我们得到的文件都是这样的XML格式的文件。我们可以直接在ArkUI原生组件中使用SVG文件。

将SVG文件放到一个DevEco Studio新建的项目中，路径为`src/main/ets/common/test.svg`。

2. SVG在Image组件中的简单使用

在ArkUI的Image组件中，我们可以直接使用SVG文件，如下：

此时的Image组件就相当于一个SVG的视口容器，不论我们如何调整Image组件的大小，SVG图形都会自动缩放以适应视口。

但是我们知道SVG是可以配置颜色，大小等属性的，Image组件只能实现一次性渲染，无法实现SVG的动态效果。

那么在ArkUI中，我们下面来实现像H5一样实现SVG的动态效果。

3. SVG在绘制组件中的使用

首先，我们先要了解在ArkUI中需要使用什么组件能够实现SVG的动态加载。

Shape组件是ArkUI定义好的所有绘制组件的父组件，我们可以通过给Shape组件添加具体绘制组件来实现SVG的动态加载。

结合我们已经准备好的svg文件进行数据解析，我们可以先实现视口的复制。

1. Shape组件viewport视口定义

在svg文件中，我们可以看到`viewBox="0 0 353.27 93.9"`，这个属性定义了视口的大小。

我们在Shape组件中复现定义这个视口，如下：

通过对viewport属性的定义，我们不再需要对Shape组件进行高度的定义。

当我们定义好需要的宽度之后，Shape组件会自动根据视口的大小进行等比例缩放。

所以这里要注意，viewport中的宽高与Shape组件的宽高是不同的。

也正因如此，不仅可以动态加载SVG，还可以实现SVG的动态缩放。

真正实现矢量图形的无限放大或缩小。

2. 绘图组件的实现

先分析查看SVG文件，我们可以看到有两种类型的绘制组件，一种是`polygon`，一种是`path`。

根据需要我们在Shape组件中，写入ArkUI需要的`Polygon`组件与`Path`组件。

但是`Polygon`组件是多边形组件，实现绘图需要多个坐标点的列表。

但是在svg文件中的polygon中，我们只有一串坐标点的字符串。

这时候我们需要将这个字符串进行解析，得到多个坐标点的列表。

手动操作我们看到已经得到需要的图形，但是这样操作太繁琐了。只是字符串的整理，我们可以自定义一个方法函数来实现以后更多复杂图形数据的复用。

下面我们将svg中的绘图数据全部复制出来，用ArkUI的绘图组件复现。

当我们将数据放入Shape组件中，我们就可以看到我们的SVG图形已经复现出来了。

但是缩放大小很明显出现了问题，那是因为在ArkUI中的长度单位与SVG的长度单位不同。

SVG的长度单位是px，而ArkUI的长度单位是vp。

首先，我们需要将视口大小与SVG一致，使用px作为单位。ArkUI全局提供了一个换算方法，可以将px转换为vp。

我们修改了viewport中的宽高，将px转换为vp，这样我们的SVG图形中的path就可以正常显示了。

但是polygon组件还是有问题，他们直接溢出了视口。

不过问题不大，我们目前找到了问题所在，我们可以通过调整相关数据的单位换算来得到最终的效果。

**修改之前整理polygon坐标的方法函数，给具体的点数据转换为vp单位**

到这一步，我们已经实现了SVG的动态加载，但是我们还需要继续丰富细节。

因为还有颜色的迁移，我们需要将SVG中的颜色属性迁移到ArkUI的绘图组件中。

3.绘图组件的颜色细节

跟我们的目标相比，我们可以看到主要在于颜色镂空的效果。

实现这一点，我们需要定义 `Polygon组件`与`Path组件`的strock与fill属性的颜色值。

并且要看清楚svg文件本身style中的颜色值。

修改后的效果：

4. 总结

这样我们就将SVG文件中的图形数据，通过ArkUI的绘图组件复现出来了。

数据的解析，单位的换算，颜色的复现，都是我们在实际开发中需要注意的细节。

我们同样得到了数据化绑定的前提，方便下一步的数据动态绑定。

下一步我们可以进行ArkUI的自定义组件封装，实现更多的SVG图形的复现与交互动态接口。

本文最终绘图组件代码如下：