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

秒速五厘米 2024-05-06 09:33 77阅读 0赞

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

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

##  ##

## 创建应用 ##

选择空模板。

![https://img1.sycdn.imooc.com/65d5cb4600010ada05540372.jpg][https_img1.sycdn.imooc.com_65d5cb4600010ada05540372.jpg]

创建名为ArkTSSVGChineseLoong的HarmonyOS应用。

![https://img1.sycdn.imooc.com/65d5cb4e0001888308310558.jpg][https_img1.sycdn.imooc.com_65d5cb4e0001888308310558.jpg]

## 核心代码讲解 ##

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

![https://img1.sycdn.imooc.com/65d5cb4d000199ea04060453.jpg][https_img1.sycdn.imooc.com_65d5cb4d000199ea04060453.jpg]

主页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%')
      }
    }复制

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

![https://img1.sycdn.imooc.com/65d5cb950001968a03180661.jpg][https_img1.sycdn.imooc.com_65d5cb950001968a03180661.jpg]

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

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)复制

## 效果演示 ##

![https://img1.sycdn.imooc.com/65d5cbcd0001f2da04800713.jpg][https_img1.sycdn.imooc.com_65d5cbcd0001f2da04800713.jpg]

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

## 源码 ##

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

[https_img1.sycdn.imooc.com_65d5cb4600010ada05540372.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3a8fd565e06c4e99bf8e0d3beedaaef5.jpeg
[https_img1.sycdn.imooc.com_65d5cb4e0001888308310558.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/59996a1799c74b998c95a37487d302dc.jpeg
[https_img1.sycdn.imooc.com_65d5cb4d000199ea04060453.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/dd3ff2c973a04ccb86dc3a2d89114f5e.jpeg
[https_img1.sycdn.imooc.com_65d5cb950001968a03180661.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/85b4676f5c87450fa02d830704b038f2.jpeg
[https_img1.sycdn.imooc.com_65d5cbcd0001f2da04800713.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/22207e7e998b44009c494c3659c45ed4.jpeg
[042_HarmonyOS ArkTS_SVG_bilibili]: https://www.bilibili.com/video/BV1Tz421R7Rq/
[GitHub - waylau_harmonyos-tutorial_ HarmonyOS Tutorial. _HarmonyOS]: https://github.com/waylau/harmonyos-tutorial