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

大家好，龙年报喜，大地回春，作为程序员，以代码之名，表达对于龙年的祝福。本节将演示如何在基于HarmonyOS ArkTS的Image组件来实现画一条中国龙，祝大家“码”上“鸿”福到！
本文涉及的所有源码，均可以在文末链接中找到。


创建应用

选择空模板。

创建名为ArkTSSVGChineseLoong的HarmonyOS应用。

焦点代码讲解

起首是准备SVG图片资源chineseloong.svg，放置media目录下。图片是这样的

主页Index.ets 重要是使用了Image来实现SVG图片显示。
代码如下：

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = '画龙迎春，“码”上“鸿”福到';
6.   build() {
7.     Row() {
8.       Column() {
9.         Text(this.message)
10.           .fontSize(26)
11.           .fontWeight(FontWeight.Bold)
12.         Image($r('app.media.chineseloong'))
13.           .height(390)
14.           .width(330)
15.       }
16.       .width('100%')
17.     }
18.     .height('100%')
19.   }
20. }复制

复制代码

当然，此时的龙，还是一条睡着的黑龙，结果如下：

如何来叫醒呢？可以加个按钮事件。

1. Button('画龙')
2.           .onClick(()=>{            // 点击变化颜色
3.             if (this.fillColor == Color.Black) {              this.fillColor = Color.Red;
4.             } else if (this.fillColor == Color.Red) {            this.fillColor = Color.Blue;
5.             }else if (this.fillColor == Color.Blue) {              this.fillColor = Color.Orange;
6.             }else if (this.fillColor == Color.Orange) {              this.fillColor = Color.Pink;
7.             }else if (this.fillColor == Color.Pink) {              this.fillColor = Color.Black;
8.             }
9.           })复制

复制代码

上述按钮事件，实现了颜色的切换。
其中fillColor是一个颜色变量，默认是黑色。

1. @State fillColor: Color = Color.Black;复制

复制代码

我们把fillColor变量赋值到Image组件上。

1. Image($r('app.media.chineseloong'))
2.           .height(390)
3.           .width(330)
4.           .fillColor(this.fillColor)复制

复制代码

结果演示

B站视频：【老卫搬砖】042期：纯血鸿蒙来画龙！基于HarmonyOS ArkTS来操作SVG图片_哔哩哔哩_bilibili
源码

见：GitHub - waylau/harmonyos-tutorial: HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。