HarmonyOS使用ArkUI绘制圣诞树

一、前言

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

二、创意名

基于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-2.8-6.5-6.8s-0.4-7. 3,2.6-10.1c3-2.9,120.1-80.1,120.1-80.1S255,185,260,185z").fill('#42CE8E')

设置之后，我们可以看到，绘制出来的内容如下:

看完发现，这太简单了吧，哈哈哈，那么 ellipse 如何绘制呢？

我们看第一个 ellipse 的内容：

<ellipse id="tree-base" fill="#39445B" cx="259.5" cy="319" rx="120" ry="38"/>

那么我们如何使用呢？又该如何使用里面的数据呢？

我们先看看 SVG 里面的 ellipse 元素里面的内容含义：SVG：可缩放矢量图形 - ellipse

那么，HarmonyOS 里面的 ArkTS 如何绘制这个 ellipse 元素？

我们通过 SVG 里面的内容可以计算出来 width/height:

Width = 120 * 2 => 240px
Height = 38*2 => 76px

这个时候还不够，我们知道 SVG 里面设置了 cx 和 cy 中心点坐标。

那么这个 cx 和 cy，在 HarmonyOS 里面如何设置？

我们通过 HarmonyOS 的文档的通用属性里面找到如下属性：

那么这个 x 和 y 如何计算出来？

X = 259.5-120 => 139.5px
Y = 390 - 38*2 => 314px

那么我们进行如下代码设置：

Ellipse({width: '240px', height: '76px'
}).fill('#39445B')
.offset({x: '139.5px', y: '314px'
})

运行之后，看到效果如下：

我们在 SVG 里面还看到 2 个新的元素
Circle、Polygon 那么这 2 个如何使用呢？

我们根据上面的内容，同样的可以应用到 Circle 和 Polygon 里面，
如果我们使用下面这个 Circle：

<circle id="l1-r4-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="146" cy="256"
r="15"/>

这个 Circle 里面的内容都代表什么内容呢？点击查看

同样的 HarmonyOS 里面也有 Circle 绘制组件

Width = 15 * 2 => 30px
Heigth = 15 * 2 => 30px

同样的中心点，我们可以通过 offset 进行位置调整

X = 320 - 15 => 305px
Y = 286 - 15 => 271px

Circle().size({ width : '30px', Height: '30px'})
.fill('#FFDF9F')
.fillOpacity(0.5)
.offset({x:'305px', y:'271px'
})

polygon 不同，我们只需要设置 point 点坐标类型。

HarmonyOS 文档里面的 polygon，点击查看

SVG 里面的内容：

<polygon id="gift-red-side-shadow" fill="#D10F50" points="335,345 315,339 315,319
335,323"/>

我们直接使用里面的坐标即可。

Polygon()
.fill('#D10F50')
.points([['335px','345px'],['315px','339px'] ,['315px','319px'], ['335px','323px']])

我们把上面用到的知识点，用到我的项目中，SVG中有g元素标签的，使用Shape绘制组件，其他的在HarmonyOS文档中查找到和SVG同名的组件进行绘制。

我们看到，我们点击小猫咪的时候，它会进行躲藏，这里同时使用到了ArkUI的显示动画

我们通过下面animateTo的方式进行 躲藏 和 探头 动画：

 animateTo({duration: 500,curve: Curve.EaseOut,iterations: 1,playMode: PlayMode.Normal,onFinish: () => {// 设置一个超时机制，如果这个时间范围内，没有点击，则触发小猫探头this.timerId = setTimeout(() => {animateTo({duration: 400,curve: Curve.EaseOut,iterations: 1,playMode: PlayMode.Normal,}, () => {// 探头，哈哈哈this.catAnimationModel = {...this.catAnimationModel,translateY: '0px'}})}, 800)}}, () => {// 躲猫猫this.catAnimationModel = {...this.catAnimationModel,translateY: '60px'}})

在Shape绘制组件中添加 translate属性方法，大致如下：

 Shape(){....}.translate({y: this.viewModel.getCatTranslateY()}).viewPort({width: '520px',height: '390px'})

只要执行了animateTo，我们的猫咪就可以进行躲藏和探头了。

点击下载HarmonyOS绘制圣诞树源码

感兴趣的同学，可以去学习我们的另一篇文章：HarmonyOS玩转ArkUI动效 - 水母动画