HarmonyOS入门之图形显示-CFANZ编程社区

1.Image组件

在现代应用程序开发中，图片作为视觉信息的重要载体，对于提升用户体验、传达品牌风格及增强用户界面的吸引力起着至关重要的作用。为了有效地管理和展示各类图片资源，如按钮图标、背景图案、网络图片以及用户上传的本地图片等，开发者广泛采用Image组件这一强大的工具。本文将深入探讨如何利用Image组件处理不同来源的图片、调整显示效果，并结合实际场景优化图片加载与渲染，从而确保应用程序在美观度、性能和资源利用效率上达到最佳状态。

一、创建与加载图片资源

1. 支持的图片格式与数据源

Image组件兼容常见的图片格式，包括PNG、JPEG、BMP、SVG和GIF，确保了广泛兼容性。其创建方式通过调用接口实现，接受多种类型的图片数据源：

本地资源：将图片放置于指定的本地文件夹（如ets），然后在Image组件中直接引用本地图片路径，如Image('images/view.jpg').width(200)。
网络资源：在请求网络图片前，需确保已获取ohos.permission.INTERNET权限。将网络图片链接作为src参数传递给Image组件，如Image('https://www.example.com/example.JPG')。
Resource资源：跨包/跨模块引入图片时，可使用资源格式（如$r('app.media.icon')）读取resources或rawfile文件夹下的图片。
媒体库资源：通过file://data/storage路径前缀访问通过媒体库提供的图片路径，通过调用相关接口获取照片URL集合，如使用picker模块选择用户相册图片。
Base64编码资源：Image组件也支持以Base64编码的图片数据作为数据源。

二、控制图片显示效果

1. 调整尺寸与布局

尺寸设定：通过.width()和.height()方法指定图片的显示尺寸，支持绝对数值（像素单位）和相对比例（如百分比或'25%'）。
适应容器：使用.objectFit()属性控制图片在容器内如何缩放与裁剪以适应空间，支持Auto（自动适配）、Fill（填充容器，可能失真）、ScaleDown（保持宽高比，不超过容器大小）、None（保持原图尺寸）等模式。

2. 边框与间距

边框：.border()方法为图片添加边框，可设定宽度、颜色等属性。
间距：使用.margin()方法设置图片与其他元素之间的间距，有助于构建整洁有序的布局。

3. 插值处理

针对低分辨率图片放大显示时可能出现的模糊与锯齿问题，.interpolation()属性提供图像插值选项，包括None、Low、Medium和High级别，以提高放大后图片的清晰度。

三、图片重复与样式

1. 重复样式

借助.objectRepeat()属性，可以设定图片在水平（X）、垂直（Y）或两个方向（XY）上重复绘制，适用于创建背景图案等效果。

2. 渲染模式

通过.renderMode()属性，可将图片渲染为原色（Original）或黑白（Template）模式，以适应不同设计需求或节省色彩资源。

四、图片解码与优化

1. 解码尺寸

.sourceSize()属性允许指定图片解码时的目标尺寸，如将高分辨率原图（如1280×960）解码为较小尺寸（如150×150或400×400），有助于降低内存消耗和提升加载速度。

2. 滤镜效果

.colorFilter()方法允许应用自定义颜色矩阵，实现对图片像素颜色的调整，轻松添加各种滤镜效果。

五、图片加载策略与事件处理

1. 异步与同步加载

图片加载默认为异步进行，以避免阻塞主线程影响UI响应。然而，针对特定场景如避免图片刷新时出现闪烁，可设置.syncLoad(true)强制同步加载图片，但应谨慎使用，避免长时间加载导致页面卡顿。

2. 加载事件监听

加载成功：通过.onComplete()事件处理器，在图片加载成功后接收包含图片尺寸、组件尺寸等信息的对象，便于后续操作。
加载失败：绑定.onError()回调函数，当图片加载失败时触发，便于记录错误信息或执行备用方案。

2.Shape组件

本文旨在介绍一种强大的绘制组件系统，通过使用Shape组件作为父容器，以及灵活地配置视口viewport，实现对页面上各类图形的精确控制与定制化绘制。以下内容将详细阐述如何创建绘制组件、利用视口进行图形缩放与定位，以及如何自定义组件样式。

一、创建绘制组件

绘制组件有两种创建方式：

使用Shape作为父组件：这种模式类似于SVG的使用方式，通过Shape接口创建带有父组件的绘制组件。接口调用形式如下：

Shape(value?: PixelMap)

其中，value参数用于指定绘制目标，可以选择将图形绘制在指定的PixelMap对象中；如果不设置，则在当前绘制目标中绘制。

示例代码：

Shape() {
  Rect().width(300).height(50)
}

这里展示了如何在Shape内部直接定义一个矩形。

独立使用绘制组件：直接在页面上绘制指定图形，无需Shape作为父容器。支持的图形类型包括Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）和Rect（矩形）。以Circle为例，其接口调用形式如下：

Circle(options?: {width?: string | number, height?: string | number})

其中，width和height分别用于设定圆形的宽度和高度，实际绘制的圆形直径将取两者中的较小值。例如：

Circle({ width: 150, height: 150 })

二、形状视口（viewport）

视口是一个用户空间中的矩形区域，它映射到关联SVG元素的视区边界。视口属性包括x、y、width和height四个可选参数，分别代表视区左上角坐标和尺寸。

以下通过三个示例说明视口的具体应用：

1.通过视口进行图形放大与缩小

原始尺寸Circle组件：直接绘制一个宽高均为75单位、填充为#E87361颜色的圆形。
shape内放大的Circle组件：创建一个宽高均为150单位、背景色为黄色的Shape组件，其视口大小设为75单位，内部绘制一个直径为75单位的圆形，并填充为#E87361。由于视口小于Shape的实际尺寸，绘制结束后，圆形将被放大两倍。
Shape内缩小的Circle组件：同样创建一个宽高为150单位、背景色为黄色的Shape组件，但视口大小设为300单位，内部绘制一个直径为75单位的圆形。此时，圆形将根据视口尺寸缩小两倍显示。

HarmonyOS入门之图形显示_Harmony

2.视口位置调整与图形绘制

创建一个宽高为300单位、背景色为黄色的Shape组件，视口大小同样为300单位，内部填充蓝色矩形，并绘制一个半径为75单位的圆形，圆形填充颜色为#E87361。

HarmonyOS入门之图形显示_Harmony_02

创建另一个宽高为300单位、背景色为黄色的Shape组件，视口大小仍为300单位，但将其向右下方平移150单位，内部填充蓝色矩形，并绘制一个半径为75单位的圆形，圆形填充颜色为#E87361。

HarmonyOS入门之图形显示_Harmony_03

三、自定义样式

绘制组件提供了丰富的属性供开发者调整图形样式：

fill：设置组件填充区域颜色。例如，给Path组件填充#E87361颜色：

Path()
  .width(100)
  .height(100)
  .commands('M150 0 L300 300 L0 300 Z')
  .fill("#E87361")

stroke：设置组件边框颜色。如将Path组件边框设为红色：

Path()
  .width(100)
  .height(100)
  .fillOpacity(0)
  .commands('M150 0 L300 300 L0 300 Z')
  .stroke(Color.Red)

strokeOpacity：设置边框透明度。例如，将Path组件边框透明度设为0.2：

Path()
  .width(100)
  .height(100)
  .fillOpacity(0)
  .commands('M150 0 L300 300 L0 300 Z')
  .stroke(Color.Red)
  .strokeWidth(10)
  .strokeOpacity(0.2)

strokeLineJoin：设置线条拐角绘制样式。支持Bevel（斜角连接）、Miter（尖角连接）和Round（圆角连接）三种样式。以下示例将折线拐角设为圆角：

Polyline()
  .width(100)
  .height(100)
  .fillOpacity(0)
  .stroke(Color.Red)
  .strokeWidth(8)
  .points([[20, 0], [0, 100], [100, 90]])
  .strokeLineJoin(LineJoinStyle.Round)

HarmonyOS入门之图形显示_Image_04

strokeMiterLimit：设置斜接长度与边框宽度比值的极限值。当strokeLineJoin属性取值为LineJoinStyle.Miter时，该属性生效。以下示例设定斜接长度与线宽的比值：

Polyline()
  .width(100)
  .height(100)
  .fillOpacity(0)
  .stroke(Color.Red)
  .strokeWidth(10)
  .points([[20, 0], [20, 100], [100, 100]])
  .strokeLineJoin(LineJoinStyle.Miter)
  .strokeMiterLimit(1.42)

HarmonyOS入门之图形显示_Harmony_05

antiAlias：控制是否开启抗锯齿，默认为true（开启）。以下分别展示开启和关闭抗锯齿效果的Circle组件：

// 开启抗锯齿
Circle()
  .width(150)
  .height(200)
  .fillOpacity(0)
  .strokeWidth(5)
  .stroke(Color.Black)

// 关闭抗锯齿
Circle()
  .width(150)
  .height(200)
  .fillOpacity(0)
  .strokeWidth(5)
  .stroke(Color.Black)
  .antiAlias(false)

HarmonyOS入门之图形显示_Image_06 HarmonyOS入门之图形显示_Image_07

四、场景示例

示例一：在Shape组件的(-80, -5)点绘制一个封闭路径，填充颜色为0x317AF7，线条宽度为3，边框颜色为红色，拐角样式为锐角（默认值）。

@Entry @Component
struct ShapeExample {
  build() {
    Column({ space: 10 }) {
      Shape() {
        Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
      }
      .viewPort({ x: -80, y: -5, width: 500, height: 300 })
      .fill(0x317AF7)
      .stroke(Color.Red)
      .strokeWidth(3)
      .strokeLineJoin(LineJoinStyle.Miter)
      .strokeMiterLimit(5)
    }.width('100%').margin({ top: 15 })
  }
}

HarmonyOS入门之图形显示_Image_08

示例二：绘制一个直径为150的实心圆，以及一个直径为150、线条为红色虚线的圆环。

@Entry @Component
struct CircleExample {
  build() {
    Column({ space: 10 }) {
      // 绘制一个直径为150的圆
      Circle({ width: 150, height: 150 })
      
      // 绘制一个直径为150、线条为红色虚线的圆环
      Circle()
        .width(150)
        .height(200)
        .fillOpacity(0)
        .strokeWidth(3)
        .stroke(Color.Red)
        .strokeDashArray([1, 2])
    }.width('100%')
  }
}

HarmonyOS入门之图形显示_Harmony_09