【华为ICT大赛】图形图像

00. 目录

01. 学习目标

图形图像: drawing接口与Canvas。

02. 使用Drawing实现图形绘制与显示

场景介绍

@ohos.graphics.drawing模块提供了基本的绘制能力，如绘制矩形、圆形、点、直线、自定义Path、字体等等。

接口说明

@ohos.graphics.drawing常用接口如下表所示，详细的接口说明请参考@ohos.graphics.drawing。

接口名	描述
drawPath(path: Path) : void	画一个自定义路径。
drawRect(rect: common2D.Rect): void	用于绘制一个矩形，默认使用黑色填充。
drawTextBlob(blob: TextBlob, x: number, y: number): void	用于绘制一段文字。
moveTo(x: number, y: number) : void	设置自定义路径的起始点位置。
lineTo(x: number, y: number) : void	添加一条到目标点的线段。
close(): void	闭合路径，会添加一条到路径起点位置的线段。
setAntiAlias(aa: boolean) : void	用于设置画笔是否开启反走样。开启后，可以使得图形的边缘在显示时更平滑。
setColor(color: common2D.Color) : void	用于设置画笔和画刷的颜色。
setStrokeWidth(width: number) : void	用于设置画笔的线宽。
attachPen(pen: Pen): void	绑定画笔给画布，画布将使用画笔的样式和颜色去绘制图形形状的轮廓。
attachBrush(brush: Brush): void	绑定画刷给画布，画布将使用画刷的样式和颜色去绘制图形形状，并在其内部进行填充。

开发步骤

使用Drawing进行图形绘制与显示时，需要使用@ohos.graphics.drawing模块的画布画笔绘制基本的2D图形和文字，调用绘制和显示的逻辑，最终在应用上显示图形和文字。

03. 使用画布绘制自定义图形(Canvas)

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

使用画布组件绘制自定义图形

可以由以下三种形式在画布绘制自定义图形：

• 使用CanvasRenderingContext2D对象在Canvas画布上绘制。

• 离屏绘制是指将需要绘制的内容先绘制在缓存区，再将其转换成图片，一次性绘制到Canvas上，加快了绘制速度。过程为：

1. 通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象。
2. 通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象。

• 在Canvas上加载Lottie动画时，需要先按照如下方式下载Lottie。

画布组件绘制方式

在Canvas组件生命周期接口onReady()调用之后，开发者可以直接使用canvas组件进行绘制。或者可以脱离Canvas组件和onReady()生命周期，单独定义Path2d对象构造理想的路径，并在onReady()调用之后使用Canvas组件进行绘制。

• 通过CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象直接调用相关API进行绘制。

• 先单独定义path2d对象构造理想的路径，再通过调用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的stroke接口或者fill接口进行绘制，具体使用可以参考Path2D对象。

画布组件常用方法

OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供了大量的属性和方法，可以用来绘制文本、图形，处理像素等，是Canvas组件的核心。常用接口有fill（对封闭路径进行填充）、clip（设置当前路径为剪切路径）、stroke（进行边框绘制操作）等等，同时提供了fillStyle（指定绘制的填充色）、globalAlpha（设置透明度）与strokeStyle（设置描边的颜色）等属性修改绘制内容的样式。将通过以下几个方面简单介绍画布组件常见使用方法：

• 基础形状绘制。 可以通过arc（绘制弧线路径）、 ellipse（绘制一个椭圆）、rect（创建矩形路径）等接口绘制基础形状。

• 文本绘制。

  可以通过fillText（绘制填充类文本）、strokeText（绘制描边类文本）等接口进行文本绘制。

• 绘制图片和图像像素信息处理。

  可以通过drawImage（图像绘制）、putImageData（使用ImageData数据填充新的矩形区域）等接口绘制图片，通过createImageData（创建新的ImageData 对象）、getPixelMap（以当前canvas指定区域内的像素创建PixelMap对象）、getImageData（以当前canvas指定区域内的像素创建ImageData对象）等接口进行图像像素信息处理。

• 其他方法。

  Canvas中还提供其他类型的方法。渐变（CanvasGradient对象）相关的方法：createLinearGradient（创建一个线性渐变色）、createRadialGradient（创建一个径向渐变色）等。

04. 使用动画

4.1 动画概述

动画的原理是在一个时间段内，多次改变UI外观，由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。

ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律（即曲线）等参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。

ArkUI提供的动画能力按照页面的分类方式，可分为页面内的动画和页面间的动画。如下图所示，页面内的动画指在一个页面内即可发生的动画，页面间的动画指两个页面跳转时才会发生的动画。

图1 按照页面分类的动画

如果按照基础能力分，可分为属性动画、显式动画、转场动画三部分。如下图所示。

图2 按照基础能力分类的动画

4.2 页面内的动画

布局更新动画

显式动画（animateTo）和属性动画（animation）是ArkUI提供的最基础和常用的动画功能。在布局属性（如尺寸属性、位置属性）发生变化时，可以通过属性动画或显式动画，按照动画参数过渡到新的布局参数状态。

动画类型	特点
显式动画	闭包内的变化均会触发动画，包括由数据变化引起的组件的增删、组件属性的变化等，可以做较为复杂的动画。
属性动画	动画设置简单，属性变化时自动触发动画。

显式动画：提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

组件内转场动画

组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画。通过组件内转场动画，可定义组件出现、消失的效果。

弹簧曲线动画

ArkUI提供了预置动画曲线，指定了动画属性从起始值到终止值的变化规律，如Linear、Ease、EaseIn等。同时，ArkUI也提供了由弹簧振子物理模型产生的弹簧曲线。通过弹簧曲线，开发者可以设置超过设置的终止值，在终止值附近震荡，直至最终停下来的效果。弹簧曲线的动画效果比其他曲线具有更强的互动性、可玩性。

弹簧曲线的接口包括两类，一类是springCurve，另一类是springMotion和responsiveSpringMotion，这两种方式都可以产生弹簧曲线。

4.3 页面间的动画

放大缩小视图

在不同页面间，有使用相同的元素（例如同一幅图）的场景，可以使用共享元素转场动画衔接。为了突出不同页面间相同元素的关联性，可为它们添加共享元素转场动画。如果相同元素在不同页面间的大小有明显差异，即可达到放大缩小视图的效果。

Exchange类型的共享元素转场

交换型的共享元素转场，需要两个页面中，存在通过sharedTransition函数配置为相同id的组件，它们称为共享元素。这种类型的共享元素转场适用于两个页面间相同元素的衔接，会从起始页共享元素的位置、大小过渡到目标页的共享元素的位置、大小。如果不指定type，默认为Exchange类型的共享元素转场，这也是最常见的共享元素转场的方式。使用Exchange类型的共享元素转场时，共享元素转场的动画参数由目标页options中的动画参数决定。

Static类型的共享元素转场

静态型的共享元素转场通常用于页面跳转时，标题逐渐出现或隐藏的场景，只需要在一个页面中有Static的共享元素，不能在两个页面中出现相同id的Static类型的共享元素。在跳转到该页面（即目标页）时，配置Static类型sharedTransition的组件做透明度从0到该组件设定的透明度的动画，位置保持不变。在该页面（即起始页）消失时，做透明度逐渐变为0的动画，位置保持不变。

共享元素转场的动画参数由该组件sharedTransition属性中的动画参数决定。

页面转场动画

两个页面间发生跳转，一个页面消失，另一个页面出现，这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。页面转场效果写在pageTransition函数中，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。

05. 附录

参考：ArkUI（方舟UI框架） > UI开发 (ArkTS声明式开发范式) > 显示图形