【画龙迎春】纯血鸿蒙，用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 {
    // 字符图展示
}

dragonData类：
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(￣▽￣)ブ。

李庆浩 / 新年礼遇一：迎春画龙，码上鸿福到

【画龙迎春】纯血鸿蒙，用Image组件将龙图!

实现效果：

实现方式：

项目结构：

Index：

dragonCode：

项目总结：

简介

发行版

贡献者

近期动态

李庆浩 / 新年礼遇一：迎春画龙，码上鸿福到 .gitee-modal { width: 500px !important; }

【画龙迎春】纯血鸿蒙，用Image组件将龙图!

实现效果：

实现方式：

项目结构：

Index：

dragonCode：

项目总结：

简介

发行版

贡献者

近期动态

搜索帮助

李庆浩 / 新年礼遇一：迎春画龙，码上鸿福到