HarmonyOS使用ArkUI绘制圣诞树

最新推荐文章于 2025-05-20 15:10:03 发布

原创

最新推荐文章于 2025-05-20 15:10:03 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许禁止转载。如有问题，欢迎指正。

文章标签：

#harmonyos #华为 #华为云 #ArkUI #鸿蒙

本文介绍如何使用HarmonyOS的ArkUI和SVG技术绘制圣诞树，包括绘制SVG路径、椭圆、圆形及多边形等元素的具体步骤，并展示了动画效果的实现。

一、前言

起因我参加了 “挑战代码画颗圣诞树” 活动，又因为本次推出一个“圣诞定制勋章”活动，一个是传资源，一个是写文章，为了更好的把知识传递给大家，所以我又出了这篇文章，大家进来一起学习一下吧。

二、创意名

基于HarmonyOS的ArkUI(方舟UI) + SVG相关技术知识点绘制圣诞树

三、效果展示

四、实现步骤

我们使用SVG数据点击查看

我们简单看下整个 SVG 内容的组成：

那么我们知道这个SVG内容组成，如何通过HarmonyOS的ArkUI去绘制呢？

我们在HarmonyOS的绘制组件中找到下面这几个可以操作路径数据

点击查看绘制组件文档

我们接着看，我们看到 ellipse 下面的第一个 path 的路径数据：

M260,185c0,0,2.5-0.8,6.7,2.6c4.3,3.4,121.1,81.2,121.1,81.2s4,3.9,1.6,9.6C387,284,383,286,383, 286s-49,41-123,41c-76,0-123-42.2-123-42.2s-6.1-2.8-6.5-6.8s-0.4-7.3,2.6-10.1c3-2.9,12
0.1-80.1,120.1-80.1S255,185,260,185z

这个时候我们就需要用到 Path 的属性 commands 设置我们的路径数据：

Path().commands("M260,185c0,0,2.5-0.8,6.7,2.6c4.3,3.4,121.1,81.2,121.1,81.2s4,3.9,1.6,9.6C38
7,284,383,286,383,286s-49,41-123,41c-76,0-123-42.2-123-42.2s-6.1