HarmonyOS鸿蒙Next中【画龙迎春】纯血鸿蒙，用Image组件将龙图转为心目中的字符图龙！

HarmonyOS鸿蒙Next中【画龙迎春】纯血鸿蒙，用Image组件将龙图转为心目中的字符图龙！ 龙，这一自古以来充满神秘色彩和强大生命力的象征，以其威猛之姿，盘旋于无数传说与神话之中。作为一名计算机专业的在校大学生，我心目中的龙是以字符的形式展示的。今天，就让我带大家走进一个神奇的领域——使用鸿蒙软件，将龙的图片转化为字符图版的龙，让古老的龙图腾在现代科技的助力下焕发新的生机！

实现效果：

实现方式：

项目结构：

项目主要为两个页面，首页index为各个龙的图片展示。第二个页面dragonCode为字符图龙的展示。

项目实现龙图转为字符图的方式主要是通过Image组件展示，资源为rawfile下的图片资源。

Index：

index首页下使用ForEach循环遍历dragonImageRow列表组件，使用List、ListItem、Image、Button组件完成UI的展示。

对每个Buuton组件绑定一个点击事件，事件行为是使用router模块跳转到dragonCode页面，通过params属性传列表的index值。

// 按钮点击后触发的事件
buttonAction(index:number){
  router.pushUrl({
    url:"pages/dragonCode",
    params:{
      "data":index
    }
  })
}

dragonCode：

在dragonCode页面的onPageshow方法内获取index页面传的index值，然后控制dragonCode下的字符图正确展示。

除此之外，增加一个LoadingProgress组件，留取页面缓冲时间。增加一个statu变量，再使用if语法控制LoadingProgress组件和image组件的切换展示。

缓冲的时间用setInterval（）方法实现。

onPageShow(){
  let seconds = 1;
  let that = this;
  if (router.getParams()) {
    this.index = router.getParams()['data'].toString();
  }
  var intervalID = setInterval(function(){
    if((seconds--)==0){
      Prompt.showToast({
        message:"转码成功！",
        duration:2000
      })
      that.statu = false;
      clearInterval(intervalID);
    }
  }, 1000);
}

if(this.statu){
  Column(){
    LoadingProgress()
      .width(100).height(100)
      .color(Color.White)
    Text("转码中")
      .fontSize(20).fontColor(Color.White)
  }
  .width("100%").height("90%")
  .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
}else {
  // 字符图展示
}

export class dragonData {
  static dragonImageRow:Array<Resource> = [
    $rawfile('dragon1.jpg'),
    $rawfile('dragon2.jpg'),
    $rawfile('dragon3.jpg'),
    $rawfile('dragon4.jpg'),
    $rawfile('dragon5.jpg')
  ]

  static dragonImageNew:Array<object> = [
    {
      "image1":$rawfile('code1-1.png'),
      "image2":$rawfile('code1-2.png')
    },
    {
      "image1":$rawfile('code2-1.png'),
      "image2":$rawfile('code2-2.png')
    },
    {
      "image1":$rawfile('code3-1.png'),
      "image2":$rawfile('code3-2.png')
    },
    {
      "image1":$rawfile('code4-1.png'),
      "image2":$rawfile('code4-2.png')
    },
    {
      "image1":$rawfile('code5-1.png'),
      "image2":$rawfile('code5-2.png')
    }
  ]
}

项目总结：

项目实质上是图片的切换和展示，所有的龙图和字符龙图都是事先准备好的静态资源。原本是想准备一个接口，通过点击按钮，将龙图上传至接口内，然后接收接口返回的字符图并展示在页面上，但是目前还没有找到这样的免费接口。所以只能暂时使用这种方式完成龙图到字符图的切换，之后学有余力的话会开发一个类似接口并补充完善。除此之外，还想增加一个保存图片功能按钮，能够将转换后的字符图保存到系统相册，但目前查看官方接口暂时没有找到实现的方法。最后欢迎大家对于这个项目提出更多的问题，如果有解决刚刚这些问题的方法，可以评论区展示，谢谢大家o(￣▽￣)ブ。