当前位置： 首页 > news >正文

鸿蒙NEXT开发实战：图片显示、几何图形与自定义绘制详解

news 2025/9/4 8:04:25

探索HarmonyOS NEXT强大的图形渲染能力，从图片展示到自定义绘图

HarmonyOS NEXT作为华为自主研发的操作系统，为开发者提供了一套丰富而强大的图形渲染能力。无论是显示图片、绘制几何图形，还是实现复杂的自定义绘图，鸿蒙都提供了简洁而高效的解决方案。

本文将详细介绍鸿蒙NEXT中三种主要的图形处理方式：图片显示、几何图形绘制和画布自定义绘制。

1. 图片显示（Image组件）

Image组件是鸿蒙中用于显示图片的核心组件，它支持多种图片格式和源类型，让开发者能够灵活地在应用中展示图像内容。

基本用法和数据源类型

Image组件支持多种数据源，只需简单调用即可显示不同来源的图片：

typescript

// 本地资源
Image('images/panda.jpg').width(100)// Resource资源
Image($r('app.media.cat')).width(100)// 网络资源（需要申请权限）
Image('https://example.com/example.JPG').width(200)// 媒体库资源
Image('file://media/Photos/5').width(200)// Base64资源
Image('data:image/png;base64,...').width(100)// PixelMap像素图
@State image: PixelMap | undefined = undefined
Image(this.image).width(100).height(100)

网络图片权限申请

使用网络图片时，需要在module.json5文件中声明网络访问权限：

json

{"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET"}]}
}

常用属性配置

Image组件提供了一系列属性用于控制图片显示效果：

typescript

Image($r('app.media.cat')).width(100).height(200).objectFit(ImageFit.Fill) // 设置缩放类型.fillColor(Color.Blue)    // 设置SVG图片的绘制颜色

objectFit属性支持多种枚举值，用于控制图片的缩放行为：

属性值说明
ImageFit.Contain保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内
ImageFit.Cover保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界
ImageFit.Auto自适应显示
ImageFit.Fill不保持宽高比进行放大缩小，使得图片充满显示边界
ImageFit.ScaleDown保持宽高比显示，图片缩小或者保持不变
ImageFit.None保持原有尺寸显示

2. 绘制几何图形（Shape组件）

鸿蒙系统提供了强大的几何图形绘制能力，可以通过Shape组件及其子组件创建各种矢量图形。

创建绘制组件

绘制组件可以由以下两种形式创建：

形式一：绘制组件使用Shape作为父组件，实现类似SVG的效果。

typescript

// 创建带有父组件的绘制组件
Shape() {Rect().width(300).height(50)Circle({ width: 150, height: 150 }).fill('red')
}

形式二：绘制组件单独使用，直接在页面上绘制指定图形。

typescript

// 单独使用绘制组件
Circle({ width: 150, height: 150 })

鸿蒙提供了7种基本绘制类型：Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）、Rect（矩形）。

形状视口viewport

Shape组件支持viewport属性，用于指定用户空间中的一个矩形，该矩形映射到为关联的SVG元素建立的视区边界。

typescript

Shape() {Rect().width(300).height(50)
}
.viewPort({x: 0,y: 0,width: 300,height: 100,
})

viewport属性包含四个可选参数：

  • x 和 y：表示视区的左上角坐标

  • width 和 height：表示视区尺寸

通过viewport可以实现图形的放大与缩小效果：

typescript

// 通过viewport对图形进行放大与缩小
Row({space:10}) {Column() {// 放大效果Shape() {Rect().width('100%').height('100%').fill('#0097D4')Circle({width: 75, height: 75}).fill('#E87361')}.viewPort({x: 0, y: 0, width: 75, height: 75}).width(150).height(150)}Column() {// 缩小效果Shape() {Rect().width('100%').height('100%').fill('#BDDB69')Circle({width: 75, height: 75}).fill('#E87361')}.viewPort({x: 0, y: 0, width: 300, height: 300}).width(150).height(150)}
}

自定义样式

绘制组件支持多种属性来自定义样式：

typescript

// 设置填充颜色
Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z').fill("#E87361")// 设置边框颜色
Path().width(100).height(100).fillOpacity(0).commands('M150 0 L300 300 L0 300 Z').stroke(Color.Red)// 设置边框透明度
Path().width(100).height(100).fillOpacity(0).commands('M150 0 L300 300 L0 300 Z').stroke(Color.Red).strokeWidth(10).strokeOpacity(0.2)// 设置线条拐角样式
Polyline().width(100).height(100).fillOpacity(0).stroke(Color.Red).strokeWidth(8).points([[20, 0], [0, 100], [100, 90]]).strokeLineJoin(LineJoinStyle.Round) // 圆角连接// 设置斜接长度与边框宽度比值
Polyline().width(100).height(100).fillOpacity(0).stroke(Color.Red).strokeWidth(10).points([[20, 0], [20, 100], [100, 100]]).strokeLineJoin(LineJoinStyle.Miter) // 尖角连接.strokeMiterLimit(1/Math.sin(45))    // 设置比值

3. 使用画布绘制自定义图形（Canvas组件）

对于更复杂的绘图需求，鸿蒙提供了Canvas组件，允许开发者进行完全自定义的图形绘制。

初始化画布组件

Canvas组件使用前需要初始化，并通过onReady事件回调进行绘制操作：

typescript

// 配置CanvasRenderingContext2D对象参数
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)// 初始化画布组件
Canvas(this.context).width('100%').height('100%').backgroundColor('#F5DC62').onReady(() => {// 在onReady回调中进行绘制操作this.context.fillStyle = '#0097D4';this.context.fillRect(50, 50, 100, 100);})

画布绘制方式

Canvas组件提供了两种绘制方式：

方式一：直接调用CanvasRenderingContext2D对象的API进行绘制

typescript

Canvas(this.context).onReady(() =>{this.context.beginPath();this.context.moveTo(50, 50);this.context.lineTo(280, 160);this.context.stroke();})

方式二：先定义Path2D对象构造路径，再进行绘制

typescript

Canvas(this.context).onReady(() =>{let region = new Path2D();region.arc(100, 75, 50, 0, 6.28);this.context.stroke(region);})

离屏绘制

离屏绘制（offscreen rendering）允许将渲染结果绘制到与屏幕不直接相关的缓冲区中进行处理，适用于实现阴影、模糊、遮罩等特殊效果。

typescript

// 离屏绘制示例
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
// 创建离屏画布上下文
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)Canvas(this.context).width('100%').height('100%').backgroundColor('#F5DC62').onReady(() =>{// 在离屏画布上绘制this.offContext.strokeRect(50, 50, 200, 150);// 将离屏绘制的图像在普通画布上显示let image = this.offContext.transferToImageBitmap();this.context.transferFromImageBitmap(image);})

画布常用绘制方法

Canvas组件提供了丰富的API用于绘制各种图形和效果：

基础形状绘制：

typescript

Canvas(this.context).onReady(() =>{// 绘制矩形this.context.beginPath();this.context.rect(100, 50, 100, 100);this.context.stroke();// 绘制圆形this.context.beginPath();this.context.arc(150, 250, 50, 0, 6.28);this.context.stroke();// 绘制椭圆this.context.beginPath();this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);this.context.stroke();})

文本绘制：

typescript

Canvas(this.context).onReady(() =>{// 绘制填充类文本this.context.font = '50px sans-serif';this.context.fillText("Hello World!", 50, 100);// 绘制描边类文本this.context.font = '55px sans-serif';this.context.strokeText("Hello World!", 50, 150);})

渐变效果：

typescript

Canvas(this.context).onReady(() =>{// 创建径向渐变色let grad = this.context.createRadialGradient(200,200,50, 200,200,200)// 设置渐变断点值grad.addColorStop(0.0, '#E87361');grad.addColorStop(0.5, '#FFFFF0');grad.addColorStop(1.0, '#BDDB69');// 使用渐变色填充矩形this.context.fillStyle = grad;this.context.fillRect(0, 0, 400, 400);})

绘制图片和图像像素处理：

Canvas组件还支持通过drawImage方法绘制图片，以及通过createImageData、getPixelMap、getImageData等方法进行图像像素信息处理。

实战示例：绘制一个简单的自定义图形

下面是一个综合运用Shape和Canvas组件绘制自定义图形的完整示例：

typescript

@Entry
@Component
struct CustomGraphicsExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)build() {Column({ space: 10 }) {// 使用Shape组件绘制几何图形Shape() {Circle({ width: 100, height: 100 }).fill('#E87361')Rect().width(200).height(50).fill('#0097D4')}.viewPort({ x: 0, y: 0, width: 300, height: 150 }).width(300).height(150).backgroundColor('#F5DC62')// 使用Canvas组件绘制自定义图形Canvas(this.context).width(300).height(300).backgroundColor('#FFFFFF').onReady(() => {// 绘制矩形this.context.fillStyle = '#0097D4';this.context.fillRect(50, 50, 100, 100);// 绘制圆形this.context.beginPath();this.context.arc(200, 200, 50, 0, 6.28);this.context.fillStyle = '#E87361';this.context.fill();// 绘制文本this.context.font = '20px sans-serif';this.context.fillStyle = '#000000';this.context.fillText("HarmonyOS NEXT", 60, 250);})}.width('100%').height('100%').padding(20)}
}

总结

HarmonyOS NEXT提供了丰富而强大的图形渲染能力，从简单的图片显示到复杂的自定义绘图，都能满足开发者的各种需求：

  1. Image组件简单易用，支持多种图片源和显示效果控制，适合大多数图片展示场景。

  2. Shape组件提供了声明式的矢量图形绘制方式，支持7种基本几何图形和丰富的样式配置，适合绘制简单的矢量图形。

  3. Canvas组件提供了底层的绘图API，支持完全自定义的图形绘制，适合复杂的绘图需求和动态图形效果。

无论是开发简单的图片展示功能，还是实现复杂的自定义图形绘制，鸿蒙NEXT都能提供合适的解决方案。希望通过本文的介绍，能帮助您更好地理解和运用鸿蒙的图形渲染能力，开发出更加美观和功能丰富的应用。

温馨提示：在实际开发中，请注意根据需求选择合适的图形渲染方式。对于简单的静态图形，优先考虑使用Shape组件；对于复杂的动态图形，再考虑使用Canvas组件。同时，使用网络图片时别忘了申请相应的权限。

http://www.xdnf.cn/news/1443907.html

相关文章：

  • 编辑器vim（Linux）
  • 【Python接口自动化】调用飞书机器人
  • 树莓派 AT 指令串口助手
  • Mysql学习第五天 Innodb底层原理与Mysql日志机制深入剖析
  • K8s生产级Redis集群：Operator模式实现自动扩缩容 详细内容
  • 稳居全球TOP3：鹏辉能源“3+N” 布局，100Ah/50Ah等户储电芯产品筑牢市场优势
  • 域内的权限提升
  • 计算机网络模型总概述
  • 从检索的角度聊聊数据结构的演进​
  • 基于springboot的在线答题练习系统
  • 【vulhub】thinkphp漏洞系列
  • Java设计模式之结构型—适配器模式
  • 需求调研的核心目标
  • 并发编程——14 线程池参数动态化
  • 前端自动化打包服务器无法安装高版本 Node.js v22 问题解决
  • 京东商品评论API接口概述，json数据返回
  • 51单片机：发光二极管与动态数码管控制
  • 迅为RK3568开发板体验OpenHarmony—烧写镜像-安装驱动
  • dumpsys alarm 简介
  • 关于kafka:consumer_offsets日志不能自动清理，设置自动清理规则
  • Trae x Vizro：低代码构建专业数据可视化仪表板的高效方案
  • 小迪web自用笔记25
  • 年成本下降超80%，银行数据治理与自动化应用实录
  • DS1202示波器的使用教程笔记
  • 【C++八股文】数据结构篇
  • 【Python-Day 42】解锁文本处理神技：Python 正则表达式 (Regex) 从入门到实战
  • FPGA离群值剔除算法
  • wpf 自定义输入ip地址的文本框
  • Linux之shell-awk命令详解
  • Jenkins 可观测最佳实践