鸿蒙UI系统组件14——几何图形(Shape)

如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号，公众号更新更快，同时也有更多学习资料和技术讨论群。

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)