鸿蒙初开，开天辟地

图片

Image组件图片组件,在应用中用于显示图片

组件的参数类型为String,Resource,media.PixelMap

String类型的参数用于通过路径的方式应用图片,包括网络和本地的图片

Button({type:ButtonType.Circle}){
      Image("https://i-blog.csdnimg.cn/direct/9ed16dcd083d4e70a240adba82a6e8d4.png").height(30).width(30);
    }.width(50).height(50).backgroundColor(this.color);

 

使用网络图片的形式

本地图片的方式,需要把图片放置于ETS目录下,提供的路径是图片相对于ets目录的路径

网络图片在真机环境下需要配置网络的访问权限才能访问

Resource类型

Resource类型的参数主要用于引入resources目录下的图片

该目录统一存储应用所需的各种资源包括图片,音频,视频,文本在内

 

项目目录

element,media,profile

这三兄弟开源存在多种版本,用于适配不同的环境,例如语言环境(zh_CN和en_US)

系统主题,设备类型等,我们开源为上述每一种环境各自准备一套资源文件,每种环境对应resources下的一个目录,系统会自动根据设备所处的环境自动选择匹配的版本

media用于存放媒体资源,包括图片,音频,视频等

element存放描述页面元素的尺寸,颜色,样式等值,需要把每种类型的值定义在一个相应的JSON中

profile存放自定义配置文件

总的来说类似安卓开发的res

 

resources目录

RawFile

rawFile用于存储任意格式的原始文件,但是他不能像resources一样根据环境自动匹配

media目录

该目录下的资源,$r(路径)的方式获取,无需指定版本,系统自动选择

直接写为$r('app.media.image')也不需要写文件后缀

$r返回的类型就是Resources类型,也就是说,我们这里用的是传递Resources类型的方式

 

@Component
export default struct See {
  @State options:string[] = ["JAVA","Python","C#","Golang"];
  @State answer:string = "____";
  build() {
    Column({space:20}){
      Row(){
        Text("江河浩瀚,胡生可安").fontSize(25).fontWeight(FontWeight.Bold);
        Text(this.answer).fontSize(25).fontWeight(FontWeight.Bold);
      };
      Image($r('app.media.background')).height(40);
      Image($rawfile('123.png')).height(40);
      Button({type:ButtonType.Circle}){
        Text("ArkTS")
      }.onClick(()=>{
        // this.options = ["JAVA","Python","C#","Golang","ArkTs"];
        this.options.push("ArkTs");
      }).width(50).height(50);
      ForEach(this.options,(item:string) => {
        Button(item).width(100).backgroundColor(Color.Red).onClick(()=>{
          this.answer = item;
        });
      },((item:string)=>
          JSON.stringify(item)
      ));
    }
  }
}

@Component
export default struct See {
  @State options:string[] = ["JAVA","Python","C#","Golang"];
  @State answer:string = "____";
  build() {
    Column({space:20}){
      Row(){
        Text("江河浩瀚,胡生可安").fontSize(25).fontWeight(FontWeight.Bold);
        Text(this.answer).fontSize(25).fontWeight(FontWeight.Bold);
      };
      Image($r('app.media.background')).height(40);
      Image($rawfile('123.png')).height(40);
      Button({type:ButtonType.Circle}){
        Text("ArkTS")
      }.onClick(()=>{
        // this.options = ["JAVA","Python","C#","Golang","ArkTs"];
        this.options.push("ArkTs");
      }).width(50).height(50);
      ForEach(this.options,(item:string) => {
        Button(item).width(100).backgroundColor(Color.Red).onClick(()=>{
          this.answer = item;
        });
      },((item:string)=>
          JSON.stringify(item)
      ));
    }
  }
}

 

获取图片展示

media.pixelMap

图片的像素位图,将图片以二维数组的形式获取,数组的每一个元素对应一个像素点,包含了该像素的颜色等信息,像素位图主要用于图片编辑的场景展示图片,这样就可以实时展示修改的图片