纯血鸿蒙来画龙!基于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应用开发入门》(清华大学出版社)

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
84 15
|
2月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
81 11
|
2月前
|
缓存 容器
鸿蒙5开发宝藏案例分享---一多开发实例(图片美化)
鸿蒙开发宝藏案例分享:用一套代码搞定手机、折叠屏、平板和PC的图片美化应用!案例解析四大核心技术点:相册页动态列数、大图预览双指缩放、编辑页布局自动翻转及分层架构设计。更有开发避坑指南与实战心得,助你高效完成多端适配,提升开发效率!
|
1月前
|
传感器 移动开发 API
【HarmonyOS 5】鸿蒙中的UIAbility详解(一)
HarmonyOS 5 中的 UIAbility 是应用框架的核心组件,负责管理用户界面生命周期和上下文信息。它类似于 Android 的 Activity 或 iOS 的 UIViewController,主要用于与用户交互。本文详细解析了 UIAbility 的基本概念、启动页面设置、上下文获取、生命周期管理及常用操作(如终止实例、跨 Ability 信息传递)。
144 9
|
2月前
|
存储 开发框架 API
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发二
本文详细介绍了基于声明式UI开发的健康饮食应用的设计与实现过程。内容涵盖从基础环境搭建到复杂功能实现的全流程,包括创建简单视图、构建布局(如Stack、Flex)、数据模型设计、列表与网格布局构建,以及页面跳转和数据传递等核心功能。 本文通过实际案例深入浅出地解析了声明式UI开发的关键技术和最佳实践,为开发者提供了宝贵的参考。
74 14
|
1月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
119 56
|
2月前
|
人工智能 自然语言处理 开发工具
HarmonyOS NEXT~鸿蒙开发能力:HarmonyOS SDK AI 全解析
本文深入解析HarmonyOS SDK中的AI功能集,涵盖分布式AI引擎、核心组件(NLP、计算机视觉等)及智能决策能力。通过代码示例与开发实践指南,帮助开发者掌握环境配置、性能调优及多场景应用(智能家居、移动办公等)。同时探讨性能优化策略与未来演进方向,助力构建高效分布式智能应用。
111 9
|
2月前
|
人工智能 运维 监控
HarmonyOS NEXT~鸿蒙系统运维:全面解析与最佳实践
本书《HarmonyOS NEXT~鸿蒙系统运维:全面解析与最佳实践》深入探讨了鸿蒙系统的运维管理。从架构特点到实际操作,涵盖分布式能力、性能优化、安全维护及故障排查。内容包括设备管理、系统监控、安全管理等核心任务,提供常见问题解决方案与工具推荐。面对未来超级终端和AI赋能的挑战,运维人员需不断学习,以充分发挥鸿蒙的分布式优势,为用户带来流畅体验。
81 8
|
1月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
138 55
|
文字识别 安全 架构师
简单聊聊《鸿蒙HarmonyOS应用开发从入门到精通》这本书
《鸿蒙HarmonyOS应用开发从入门到精通》一书由北京大学出版社出版,已经于2022年4月上市。本文希望与读者朋友们分享下这本书里面的大致内容。
573 0