纯血鸿蒙来画龙!基于HarmonyOS ArkTS来操作SVG图片

简介: 大家好,龙年报喜,大地回春,作为程序员,以代码之名,表达对于龙年的祝福。本节将演示如何在基于HarmonyOS ArkTS的Image组件来实现画一条中国龙,祝大家“码”上“鸿”福到!

大家好,龙年报喜,大地回春,作为程序员,以代码之名,表达对于龙年的祝福。本节将演示如何在基于HarmonyOS ArkTS的Image组件来实现画一条中国龙,祝大家“码”上“鸿”福到!

本文涉及的所有源码,均可以在文末链接中找到。

创建应用
选择空模板。

创建名为ArkTSSVGChineseLoong的HarmonyOS应用。
图片1.png

图片2.png

核心代码讲解
首先是准备SVG图片资源chineseloong.svg,放置media目录下。图片是这样的

图片3.png

主页Index.ets 主要是使用了Image来实现SVG图片显示。

代码如下:

@Entry
@Component
struct Index {
@State message: string = '画龙迎春,“码”上“鸿”福到';

build() {
Row() {
Column() {
Text(this.message)
.fontSize(26)
.fontWeight(FontWeight.Bold)
Image($r('app.media.chineseloong'))
.height(390)
.width(330)
}
.width('100%')
}
.height('100%')
}
}

当然,此时的龙,还是一条睡着的黑龙,效果如下:

图片4.png

如何来唤醒呢?可以加个按钮事件。

Button('画龙')
.onClick(()=>{
// 点击变化颜色
if (this.fillColor == Color.Black) {
this.fillColor = Color.Red;
} else if (this.fillColor == Color.Red) {
this.fillColor = Color.Blue;
}else if (this.fillColor == Color.Blue) {
this.fillColor = Color.Orange;
}else if (this.fillColor == Color.Orange) {
this.fillColor = Color.Pink;
}else if (this.fillColor == Color.Pink) {
this.fillColor = Color.Black;
}
})

上述按钮事件,实现了颜色的切换。

其中fillColor是一个颜色变量,默认是黑色。

@State fillColor: Color = Color.Black;
复制
我们把fillColor变量赋值到Image组件上。

Image($r('app.media.chineseloong'))
.height(390)
.width(330)
.fillColor(this.fillColor)

效果演示

arktssvgchineseloong.gif

B站视频:https://www.bilibili.com/video/BV1Tz421R7Rq/

源码
见:https://github.com/waylau/harmonyos-tutorial

学习更多HarmonyOS
作为开发者,及时投入HarmonyOS 4的学习是非常必要的。鸿蒙生态经历了艰难的四年,但轻舟已过万重山,目前已经慢慢走上了正轨,再现繁荣指日可待。

可以从HaromnyOS 官网了解到最新的HaromnyOS咨询以及开发指导。除此之外,笔者也整理了以下学习资料。

华为开发者联盟
《跟老卫学HarmonyOS开发》 开源免费教程
《鸿蒙HarmonyOS手机应用开发实战》(清华大学出版社)
《鸿蒙HarmonyOS应用开发从入门到精通战》(北京大学出版社)
“鸿蒙系统实战短视频App 从0到1掌握HarmonyOS”
《鸿蒙HarmonyOS应用开发入门》(清华大学出版社)

目录
相关文章
|
13天前
|
编解码 视频直播 开发工具
|
13天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
61 0
|
13天前
|
Java 开发工具 Android开发
鸿蒙HarmonyOS 与 Android 的NDK有什么区别?
鸿蒙(HarmonyOS)和Android的NDK(Native Development Kit)是两个不同的概念,它们在设计理念、架构、开发方式和目标平台等方面存在着一些显著的不同。
22 0
|
13天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Scroll容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Scroll容器组件
152 0
|
13天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Row容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Row容器组件
39 1
|
13天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之FlowItem容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之FlowItem容器组件
38 1
|
13天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
72 5
|
9月前
|
IDE JavaScript API
HarmonyOS开发第一步,熟知开发工具DevEco Studio
本文主要以常见的功能点作为概述希望可以帮助到学习HarmonyOS的开发者。
245 0
|
13天前
|
数据管理 API 调度
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
244 0
|
9月前
|
开发框架
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 四)
被@Observed装饰的类,可以被观察到属性的变化;子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中是属性,这个属性同样也需要被@Observed装饰。单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。