目录
一、什么是 ArkUI 与矢量图
ArkUI，即方舟 UI 框架，是为 HarmonyOS 应用的 UI 开发提供完整基础设施的关键技术。它拥有简洁的 UI 语法，这使得开发者在编写代码时能够更加高效，减少不必要的冗余代码，提升开发效率。同时，ArkUI 具备丰富的 UI 功能，涵盖组件、布局、动画以及交互事件等多个方面。在组件上，提供了如按钮、文本框、列表等基础组件，方便开发者快速搭建界面；布局方面，支持线性布局、弹性布局、相对布局等多种布局方式，满足不同界面设计的需求；动画功能则能为应用增添生动的效果，提升用户体验；交互事件的支持，让用户与应用之间能够进行自然交互，例如点击、滑动、长按等操作。此外，ArkUI 还配备了实时界面预览工具，开发者在编写代码的过程中，能够实时查看界面效果，及时调整，极大地提高了开发体验和效率。
而矢量图，是一种基于数学公式和几何形状来描述的图像。它使用点、线、多边形等几何图形，通过数学公式精确地描述图像的位置、形状和颜色。与位图不同，矢量图不是由像素点构成，这赋予了它许多独特的优势。矢量图最大的特点就是可以无限缩放而不失真，无论将其放大多少倍，图像的边缘依然保持平滑且清晰，不会出现模糊和锯齿现象。比如一个企业的 logo，无论是用于小小的图标展示，还是放大到巨幅海报上，都能保持清晰锐利的效果。同时，矢量图的文件大小相对较小，因为它存储的是图形的数学描述，而不是大量的像素信息，这在网络传输和存储方面具有很大的优势，能够节省带宽和存储空间。此外，矢量图易于编辑和修改，设计师可以轻松地调整图像中各个元素的位置、形状、大小和颜色等属性，而不会影响图像的质量，这使得矢量图在图形设计和插图制作中非常受欢迎 。
在应用中，矢量图有着广泛的使用场景。在图形设计领域，如标志设计、海报设计、插画绘制等，矢量图因其高清晰度、可编辑性和可缩放性，能够满足设计师对细节和精度的要求，方便进行反复修改和调整，以达到最佳的设计效果。在网页与 UI 设计中，矢量图形式的图标和用户界面元素可以在不同分辨率的设备上清晰显示，保证视觉效果的一致性，例如常见的 SVG 格式矢量图，在网页中被广泛应用于图标展示和交互元素设计 。在工业制造与 3D 打印中，矢量图可以用于零部件的精确设计，与 3D 建模软件无缝对接，确保设计的准确性和生产的高效性。
二、ArkUI 显示矢量图的方法
2.1 引入矢量图资源
在 ArkUI 中，引入矢量图资源有多种方式。最为直接的是通过本地路径引入，开发者只需将矢量图文件放置在合适的项目目录下，例如将 icon.svg 放在 ets 文件夹下的 images 子文件夹中，在代码中就可以这样引入：
Image('images/icon.svg').width(50).height(50)
使用这种方式时，要确保文件路径的准确性，因为一旦路径错误，就无法正确加载矢量图。比如，如果将 images 文件夹误写成 img，就会导致加载失败 。
还可以通过 Resource 资源格式引入矢量图。在 resources 文件夹下管理图片资源，然后使用 $r 资源接口读取并转换到 Resource 格式。假设在 resources 文件夹下的 media 目录中有一个名为 logo.svg 的矢量图，引入代码如下：
Image($r('app.media.logo')).width(80).height(80)
这种方式的优势在于方便管理和跨包 / 跨模块引入图片资源，增强了代码的可维护性和可扩展性。在大型项目中，不同模块可能需要使用相同的矢量图资源，通过 Resource 资源格式引入就能轻松实现资源共享 。
2.2 使用 Image 组件显示
在 ArkUI 中，使用 Image 组件来展示矢量图是核心步骤。Image 组件的使用非常灵活，关键在于对其属性的设置，其中 src 属性用于指定矢量图的数据源。例如：
Image($r('app.media.icon')).width(40).height(40)
这里的 src 使用了通过 $r 获取的 Resource 资源格式的矢量图路径，同时设置了 width 和 height 属性来定义图片的显示尺寸。如果不设置尺寸，图片可能会以默认大小显示，这可能不符合界面设计的要求。
Image 组件支持多种矢量图标签，包括 svg、rect、circle、ellipse、path、line、polyline、polygon 和 animate 等。这些标签为矢量图的绘制和动画效果实现提供了丰富的功能。如果想要在矢量图中绘制一个圆形，可以使用 circle 标签，代码如下：
<svg width="100" height="100">
<circle cx="50" cy="50" r="30" fill="blue" />
</svg>
在 ArkUI 中通过 Image 组件显示这个包含圆形的矢量图时，只需将上述代码作为矢量图文件内容，然后按照正常的引入方式即可。
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
