!21332 翻译完成 21290+20346+20677：Image组件精品上新

Merge pull request !21332 from ester.zhou/TR-21290

en/application-dev/ui/arkts-common-events-focus-event.md

@@ -171,7 +171,7 @@ The preceding example includes four steps:
 4. When the Tab key (or the down arrow key) is pressed, the **Third Button** component is focused, its **onFocus** callback is triggered, and its background color turns green. **Second Button** loses focus, its **onBlur** callback is triggered, and its background color turns gray.
 
 
-## Setting Whether a Component Is focusable
+## Setting Whether a Component Is Focusable
 
 Use the **focusable** API to set whether a component is focusable.
 

en/application-dev/ui/arkts-graphics-display.md

 # Displaying Images (Image)
 
 
-More often than not, you may need to display images in your application, for example, logos in buttons, online images, and local images. To do so, you need to use the **\<Image>** component, which supports a wide range of image formats, including PNG, JPG, BMP, SVG, and GIF. For details, see [Image](../reference/arkui-ts/ts-basic-components-image.md).
+More often than not, you may need to display images in your application, for example, logos in buttons, online images, and local images. This is where the **\<Image>** component comes in handy. The **\<Image>** component supports a wide range of image formats, including PNG, JPG, BMP, SVG, and GIF. For details, see [Image](../reference/arkui-ts/ts-basic-components-image.md).
 
 
-You can call the API in the following format to create an image:
+To use the **\<Image>** component, call the following API:
 
 
 
 ```ts
-Image(src: string | Resource | media.PixelMap)
+Image(src: PixelMap | ResourceStr | DrawableDescriptor)
 ```
 
 
-Obtains a local or online image from the image data source specified by **src**. For details about how to load the data source, see [Loading Image Resources](#loading-image-resources).
+This API obtains a local or online image from the data source specified by **src**. For details about how to load the data source, see [Loading Image Resources](#loading-image-resources).
 
 
 ## Loading Image Resources
@@ -21,24 +21,22 @@ Obtains a local or online image from the image data source specified by **src**.
 The **\<Image>** component supports two types of images: archived and pixel map.
 
 
-### Archived Type Data Source
+### Archived Type Data Sources
 
-Data sources of the archived type can be classified into local resources, online resources, **Resource** objects, media library data share resources, and Base64 resources.
+Data sources of the archived type can be classified into local resources, online resources, **Resource** objects, media library resources, and Base64 resources.
 
 - Local resources
 
-  Create a folder and place a local image in any position in the **ets** folder.
-
-  In the **\<Image>** component, import the local image path to display the image. The root directory is the **ets** folder.
+  To load local images, create an **ets** folder and place the local images in any position in the folder. Then, in the **\<Image>** component, set **src** to the local image path, with the root directory being the **ets** folder.
 
   ```ts
-  Image('images/view.jpg')
+Image('images/view.jpg')
   .width(200)
   ```
-
+  
 - Online resources
 
-  To use online images, first apply for the **ohos.permission.INTERNET** permission. For details, see [Applying for Permissions](../security/accesstoken-guidelines.md). Under this scenario, the **src** parameter of the **\<Image>** component is the URL of the online image.
+  To use online images, first apply for the **ohos.permission.INTERNET** permission. For details, see [Applying for Permissions](../security/accesstoken-guidelines.md). Then, in the **\<Image>** component, set **src** to the URL of the online image.
 
   ```ts
   Image('https://www.example.com/example.JPG') // Replace the URL with the actual URL.
@@ -46,7 +44,9 @@ Data sources of the archived type can be classified into local resources, online
 
 - **Resource** objects
 
-  **Resource** objects can be used to import images across bundles and modules. All images in the **resources** folder can be read and converted to the **Resource** objects through **$r**.
+  **Resource** objects can be used to import images across bundles and modules.
+
+  To load **Resource** objects, place images in the **resources** folder, which can then be read and converted to the **Resource** objects through **$r**.
 
   **Figure 1** resources folder 
 
@@ -70,9 +70,9 @@ Data sources of the archived type can be classified into local resources, online
   Image($rawfile('snap'))
   ```
 
-- Media library data share resources
+- Media library **file://data/storage**
 
-  To display images from the media library, use a path string that starts with **datashare://**.
+  To load images from the media library, use a path string that starts with **file://**.
 
   1. Call the API to obtain the image URL in the media library.
       ​    
@@ -102,7 +102,7 @@ Data sources of the archived type can be classified into local resources, online
             console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);    }
         }
 
-        // Call the preceding function in aboutToAppear to obtain the URLs of all images in the gallery and store the URLs in imgDatas.
+        // Call the preceding function in aboutToAppear to obtain the image URL set and store the URLs in imgDatas.
         async aboutToAppear() {
           this.getAllImg();
         }
@@ -124,13 +124,13 @@ Data sources of the archived type can be classified into local resources, online
   2. Check the format of the URL obtained from the media library:
       ​    
       ```ts
-      Image('file://media/5')
+      Image('file://media/Photos/5')
       .width(200)
       ```
 
-- base64
+- Base64
 
-  As shown above, the URL format is data:image/[png|jpeg|bmp|webp];base64,[base64 data], in which **[base64 data]** indicates Base64 string data.
+  As shown above, the URL format is data:image/[png|jpeg|bmp|webp];base64,[base64 data], where **[base64 data]** indicates a Base64 string.
 
   Base64 strings are widely used on web pages for storing pixel data of images.
 
@@ -146,9 +146,10 @@ A pixel map is a pixel image obtained after image decoding. For details, see [Im
    ```
 
 2. Reference multimedia.
+
    Request an online image and implement transcoding to generate a pixel map.
 
-   1. Reference the network access permission and media library permission.
+   1. Reference the network and media library access permissions.
        ​    
        ```ts
        import http from '@ohos.net.http';
@@ -195,7 +196,7 @@ A pixel map is a pixel image obtained after image decoding. For details, see [Im
        ```
 
 
-## Display the vector image.
+## Displaying Vector Images
 
 The **\<Image>** component can display vector images in SVG format. The supported SVG labels are **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, and **animate**.
 
@@ -216,14 +217,14 @@ Image($r('app.media.cloud')).width(50)
 ![screenshot_20230223_141404](figures/screenshot_20230223_141404.png)
 
 
-## Adding Attributes
+## Setting Attributes
 
-Setting attributes for the **\<Image>** component can spruce up the image with custom effects. The following are examples of common attributes. For details about all attributes, see [Image](../reference/arkui-ts/ts-basic-components-image.md).
+Setting attributes for the **\<Image>** component can spruce up the image with custom effects. The following are usage examples of common attributes. For details about all attributes, see [Image](../reference/arkui-ts/ts-basic-components-image.md).
 
 
 ### Setting the Image Scale Mode
 
-The **objectFit** attribute is used to scale an image to fit it into a container whose height and width are determined.
+You can use the **objectFit** attribute to scale an image to fit it into a container whose height and width are determined.
 
 
 ```ts
@@ -272,12 +273,221 @@ struct MyComponent {
 }
 ```
 
-![en-us_image_0000001511421240](figures/en-us_image_0000001511421240.png)
+![en-us_image_0000001622804833](figures/en-us_image_0000001622804833.png)
+
+
+### Using Image Interpolation
+
+An image of low resolution may suffer quality loss with aliasing when scaled up. If this is the case, you can use the **interpolation** attribute to conduct image interpolation and improve image quality.
+
+
+```ts
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      Row() {
+        Image($r('app.media.grass'))
+          .width('40%')
+          .interpolation(ImageInterpolation.None)
+          .borderWidth(1)
+          .overlay("Interpolation.None", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+          .margin(10)
+        Image($r('app.media.grass'))
+          .width('40%')
+          .interpolation(ImageInterpolation.Low)
+          .borderWidth(1)
+          .overlay("Interpolation.Low", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+          .margin(10)
+      }.width('100%')
+      .justifyContent(FlexAlign.Center)
+
+      Row() {
+        Image($r('app.media.grass'))
+          .width('40%')
+          .interpolation(ImageInterpolation.Medium)
+          .borderWidth(1)
+          .overlay("Interpolation.Medium", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+          .margin(10)
+        Image($r('app.media.grass'))
+          .width('40%')
+          .interpolation(ImageInterpolation.High)
+          .borderWidth(1)
+          .overlay("Interpolation.High", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+          .margin(10)
+      }.width('100%')
+      .justifyContent(FlexAlign.Center)
+    }
+    .height('100%')
+  }
+}
+```
+
+![en-us_image_0000001643127365](figures/en-us_image_0000001643127365.png)
+
+
+### Setting Image Repeat Pattern
+
+You can use the **objectRepeat** attribute to set the repeat pattern of an image. For details, see [ImageRepeat](../reference/arkui-ts/ts-appendix-enums.md#imagerepeat).
+
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  build() {
+    Column({ space: 10 }) {
+      Row({ space: 5 }) {
+        Image($r('app.media.ic_public_favor_filled_1'))
+          .width(110)
+          .height(115)
+          .border({ width: 1 })
+          .objectRepeat(ImageRepeat.XY)
+          .objectFit(ImageFit.ScaleDown)
+          // Repeat the image along both the horizontal and vertical axes.
+          .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+        Image($r('app.media.ic_public_favor_filled_1'))
+          .width(110)
+          .height(115)
+          .border({ width: 1 })
+          .objectRepeat(ImageRepeat.Y)
+          .objectFit(ImageFit.ScaleDown)
+          // Repeat the image only along the vertical axis.
+          .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+        Image($r('app.media.ic_public_favor_filled_1'))
+          .width(110)
+          .height(115)
+          .border({ width: 1 })
+          .objectRepeat(ImageRepeat.X)
+          .objectFit(ImageFit.ScaleDown)
+          // Repeat the image only along the horizontal axis.
+          .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+      }
+    }.height(150).width('100%').padding(8)
+  }
+}
+```
+
+![en-us_image_0000001593444112](figures/en-us_image_0000001593444112.png)
+
+
+### Setting Image Rendering Mode
+
+You can use the **renderMode** attribute to set the rendering mode of an image.
+
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  build() {
+    Column({ space: 10 }) {
+      Row({ space: 50 }) {
+        Image($r('app.media.example'))
+          // Set the rendering mode to Original.
+          .renderMode(ImageRenderMode.Original)
+          .width(100)
+          .height(100)
+          .border({ width: 1 })
+            // overlay is a universal attribute, which is used to add overlay text on the component.
+          .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+        Image($r('app.media.example'))
+          // Set the rendering mode to Template.
+          .renderMode(ImageRenderMode.Template)
+          .width(100)
+          .height(100)
+          .border({ width: 1 })
+          .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+      }
+    }.height(150).width('100%').padding({ top: 20,right: 10 })
+  }
+}
+```
+
+![en-us_image_0000001593293100](figures/en-us_image_0000001593293100.png)
+
+
+### Setting Image Decoding Size
+
+You can use the **sourceSize** attribute to set the image decoding size. By setting the decoding size to lower than the source size, you can decrease the image resolution.
+
+In this example, the source image size is 1280 x 960, and the decoding size is 150 x 100 and 400 x 400.
+
+
+```ts
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      Row({ space: 20 }) {
+        Image($r('app.media.example'))
+          .sourceSize({
+            width: 150,
+            height: 150
+          })
+          .objectFit(ImageFit.ScaleDown)
+          .width('25%')
+          .aspectRatio(1)
+          .border({ width: 1 })
+          .overlay('width:150 height:150', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
+        Image($r('app.media.example'))
+          .sourceSize({
+            width: 400,
+            height: 400
+          })
+          .objectFit(ImageFit.ScaleDown)
+          .width('25%')
+          .aspectRatio(1)
+          .border({ width: 1 })
+          .overlay('width:400 height:400', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
+      }.height(150).width('100%').padding(20)
+
+    }
+  }
+}
+```
+
+![en-us_image_0000001593769844](figures/en-us_image_0000001593769844.png)
+
+
+### Adding a Filter to an Image
+
+You can use the **colorFilter** attribute to add a filter to an image.
+
+
+```ts
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      Row() {
+        Image($r('app.media.example'))
+          .width('40%')
+          .margin(10)
+        Image($r('app.media.example'))
+          .width('40%')
+          .colorFilter(
+            [1, 1, 0, 0, 0,
+             0, 1, 0, 0, 0,
+             0, 0, 1, 0, 0,
+             0, 0, 0, 1, 0])
+          .margin(10)
+      }.width('100%')
+      .justifyContent(FlexAlign.Center)
+    }
+  }
+}
+```
+
+![en-us_image_0000001643171357](figures/en-us_image_0000001643171357.png)
 
 
 ### Synchronously Loading Images
 
-Generally, the image loading process is performed asynchronously to avoid blocking the main thread and to streamline UI interaction. In certain cases, however, the image may flicker when refreshed. If this occurs, you can use the **syncLoad** attribute to load the image synchronously to avoid flickering. You are not advised to use this attribute when the image loading takes a long time. Otherwise, the page may fail to respond.
+Generally, the image loading process is performed asynchronously to avoid blocking the main thread and to streamline UI interaction. In certain cases, however, the image may flicker when refreshed. If this occurs, you can use the **syncLoad** attribute to load the image synchronously to avoid flickering. Avoid using this attribute if the image loading may take a long time. Otherwise, the page may fail to respond.
 
 
 ```ts