OpenHarmonyアプリケーション開発のETS開発方法における画像コンポーネントの詳細な説明

ナゲッツテクノロジーコミュニティのクリエイター署名プログラムの募集に参加しています。リンクをクリックして登録し、送信してください。

今日は、ETS開発方法の画像コンポーネントを理解するためにあなたを連れて行きます

著者：ナッツ

パブリックアカウント：「ビッグフロントエンドツアー」

OpenHarmonyの説教者、InfoQ契約の作成者、CSDNブログの専門家、Huaweiクラウド共有の専門家、Alibaba Cloudの専門家ブロガー、51CTOブログのチーフエクスペリエンスオフィサー、オープンソースプロジェクトGVAのメンバーの1人、 Flutter、Hongmeng、小さなプログラム、Android、Vue、JavaScript。

画像

画像コンポーネントは、ローカル画像とネットワーク画像のレンダリングと表示をサポートします。

彼のインターフェースが何を持っているかを見ることができます

(src: string | PixelMap | Resource): ImageAttribute;

src：string | PixelMap画像URI、ローカル画像とネットワークパスをサポートし、メディアPixelMapオブジェクトの使用をサポートします。

PixelMap：画像ピクセルクラス。画像データの読み取りまたは書き込みと画像情報の取得に使用されます。PixelMapメソッドを呼び出す前に、createPixelMapを使用してPixelMapインスタンスを作成する必要があります。ここでは、最初のパラメーターについてのみ説明します。

アプリのローカルイメージを参照してください

ここでは、最初に、インターフェースを介してアプリのローカル画像を参照する方法を示します。画像形式は「png/jpg / gif / svg」に対応しており、画像ファイルはメディアメディアディレクトリ、または自分で作成した「/ common/images」ディレクトリに保存できます。

紅門に関連する2枚の写真をプロジェクトに入れましたが、それらは異なっていて見分けやすいです。次に、それらをプロジェクトで使用します。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%")
          .aspectRatio(1.5)
        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
          .width("100%")
          .aspectRatio(1.5)
      }
      .width('100%')
    }
    .height('100%')
  }
}

右側のプレビューをクリックして見てみましょう

上記はローカル画像の簡単な使用法です。次に、ネットワーク画像についても同じようにします。

ネットワーク画像を引用するときは、権限を追加することを忘れないでください

引用网络图片时记得添加权限。 方法： 需要在config.json（FA模型）或者module.json5（Stage模型）对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。

"abilities": [
  {
    ...
    "permissions": ["ohos.permission.INTERNET"],
    ...
  }
] 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%")
          .aspectRatio(2.6)
        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
          .width("100%")
          .aspectRatio(2.6)
        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
          .width("100%")
          .aspectRatio(2.6)
      }
      .width('100%')
    }
    .height('100%')
  }
}

接下来我们继续接着对通用属性之外的其他特有属性来进行学习

首先来个预览：

接下来，我将对其中的属性一一了解

.alt(string | PixelMap)：

加载时显示的占位图。支持本地图片和网络路径，支持使用媒体PixelMap对象。

示例代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
//        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
​
//        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
        Text("alt属性").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%")
          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg")
      }
      .width('100%')
    }
    .height('100%')
  }
}

大家可以看到的就是/common/images/HarmonyOS.jpg为加载时显示的占位图

. objectFit (ImageFit)： 设置图片的缩放类型。

          /**
           * .objectFit(ImageFit) 设置图片的缩放类型，默认值Cover。
           *    ImageFit.Cover 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
           *    ImageFit.Contain 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
           *    ImageFit.Fill 不保持宽高比进行放大缩小，使得图片填充满显示边界。
           *    ImageFit.None 保持原有尺寸显示。通常配合objectRepeat属性一起使用。
           *    ImageFit.ScaleDown 保持宽高比显示，图片缩小或者保持不变。
           */

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
//        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
​
//        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("alt属性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
         .objectFit(ImageFit.Cover)
        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Contain)
        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.ScaleDown)
        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Fill)
      }
      .width('100%')
​
​
    }
    .height('100%')
  }
}

. objectRepeat (ImageRepeat): 设置图片的重复样式。

ImageRepeat枚举说明

名称	描述
X	只在水平轴上重复绘制图片。
Y	只在竖直轴上重复绘制图片。
XY	在两个轴上重复绘制图片。
NoRepeat	不重复绘制图片。

. interpolation (ImageInterpolation)： 设置图片的插值效果，仅针对图片放大插值。

对于一些较小的图片，或老照片，插值计算有助于提升画质。下面是它的一些参数

ImageInterpolation

名称	描述
None	不使用插值图片数据。
High	插值图片数据的使用率高，可能会影响图片渲染的速度。
Medium	插值图片数据的使用率中。
Low	插值图片数据的使用率低。

. renderMode (ImageRenderMode)： 设置图片渲染的模式。 相当于PS中对图片做去色处理，可将彩色图片变为灰度图片。

ImageRenderMode

名称	描述
Original	按照原图进行渲染，包括颜色。
Template	将图片渲染为模板图片，忽略图片的颜色信息

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
//        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
​
//        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("alt属性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
//        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//         .objectFit(ImageFit.Cover)
//        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Contain)
//        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.ScaleDown)
//        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Fill)
        Text("ImageRenderMode.Original").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Original) // 按照原图进行渲染，包括颜色
        Text("ImageRenderMode.Template").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Template) // 按照原图进行渲染，包括颜色
      }
      .width('100%')
​
​
    }
    .height('100%')
  }
}

.sourceSize（{width：number、height：number}）：画像のデコードサイズを設定し、元の画像を指定されたサイズの画像にデコードします。数値のタイプの単位はpxです。

元のサイズが1140x570ピクセルの画像で、デコードサイズが120x100ピクセルの画像を指定した後、画像の表示サイズがこのサイズを超えるとぼやけます。サンプルコードは次のとおりです。

 Text("原图").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
​
        Text("解码为小尺寸后显示模糊").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6).sourceSize({
          width: 120,
          height: 100
        }) // 解码为小尺寸后显示模糊

もちろん、これらに加えて、他のプロパティがあります

イベントのプロパティ

1. onComplete（callback：（event ?: {width：number、height：number、componentWidth：number、componentHeight：number、loadingStatus：number}）=> void）：このコールバックは、画像が正常に読み込まれたときにトリガーされ、正常に読み込まれた画像が返されます。ソースサイズ。

• width：画像の幅（ピクセル単位）。
• height：画像の高さ（ピクセル単位）。
• componentWidth：コンポーネントの幅（ピクセル単位）。
• componentHeight：コンポーネントの高さ（ピクセル単位）。
• LoadingStatus：画像が正常に読み込まれたステータス。

2. onError（callback：（event ?: {componentWidth：number、componentHeight：number}）=> void）：このコールバックは、画像の読み込みが異常な場合にトリガーされます。

3. onFinish（callback：（）=> void）ロードされたソースファイルがエフェクト付きのsvgイメージである場合、このコールバックはsvgアニメーションが完了したときにトリガーされます。アニメーションが無限ループアニメーションの場合、このコールバックはトリガーされません。このコールバックをトリガーしました。

 Text("原图").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6).onComplete((msg: { width: number,height: number,componentWidth: number,
 componentHeight: number, loadingStatus: number }) => {
​
          console.log(msg.width.toString());
        })
          .onError(() => {
            console.log('加载图片失败')
          })
          .onFinish(() => {
            //当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。
          })
​
​

上記はImageの最も簡単な使用法です

要約する

この記事では主に、ローカルイメージやネットワークイメージの参照など、イメージコンポーネントの簡単な使用法について説明します。