1、概述

上篇文章中，我们讨论了在鸿蒙系统中如何显示一张图片，鸿蒙UI系统组件13——图片显示(Image)，在鸿蒙开发中，除了使用静态图片展示外，我们还可以自己使用代码画一些几何图形，例如：三角形、矩形、圆形、多边形等。此时，我们就需要用到Shape组件来完成我们的需求。

2、创建绘制组件

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

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

// 【注意：value为可选参数】
Shape(value?: PixelMap)

该接口用于创建带有父组件的绘制组件，其中value用于设置绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制（个人理解为直接绘制在组件所在区域）。

下面是一个demo（同时绘制一个矩形和圆形）：

Shape() {
  Rect().width(300).height(50)
  Circle({ width: 150, height: 150 }).fill('red')
}

效果如下：

**形式二：**绘制组件单独使用，用于在页面上绘制指定的图形。有7种绘制类型，分别为Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）、Rect（矩形）。以Circle的接口调用为例：

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

该接口用于在页面绘制圆形，其中width用于设置圆形的宽度，height用于设置圆形的高度，圆形直径由宽高最小值确定。

下面是一个demo（直接绘制一个圆形）：

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

效果如下：

3、为Shape设置viewport视口

与svg类似，我们在绘制几何图形时，可以为图形设置一个视口，设置方法如下（为Shape设置viewport属性）：

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

viewport参数如下：

viewPort{ x?: number | string, y?: number | string, width?: number | string, height?: number | string }

viewport用于指定用户空间中的一个矩形，该矩形映射到为关联的 SVG 元素建立的视区边界。viewport属性的值包含x、y、width和height四个可选参数，x 和 y 表示视区的左上角坐标，width和height表示其尺寸。

下面展示一下viewport的三个用法：