【鸿蒙应用实战开发】ArkUI组件（Shape）

最新推荐文章于 2025-06-01 18:00:00 发布

原创

最新推荐文章于 2025-06-01 18:00:00 发布 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#android #华为 #鸿蒙 #前端 #harmonyos

一、Shape

Shape组件是用于创建2D形状和粒子效果的组件。它可以创建包括圆形、正方形、三角形和多边形等基本形状，同时还可以自定义形状。Shape组件创建各种不同的效果，例如火花、烟雾、雨滴等。在使用Shape组件时，可以通过编辑顶点、路径和大小等属性来控制形状的外观和行为。

1.创建绘制组件

1.1 Shape嵌套使用

使用Shape作为父组件，实现类似SVG的效果

Shape(value?: PixelMap)

其中value用于设置绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Shape() {
        Rect().width(300).height(50)
      }
    }
  }
}

在这里插入图片描述

1.2 单独使用

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Circle({ width: 150, height: 150 })
    }
  }
}

在这里插入图片描述

其他的就不做多介绍

2.形状视口viewport

形状视口（Shape Viewport）是SVG（Scalable Vector Graphics）中的一个重要概念，它指定了用户空间中的一个矩形，并将该矩形映射到与该SVG元素相关联的视区边界上，用于在屏幕上渲染出SVG图像。在SVG中，每个元素都有一个默认的视口，可以通过设置viewport属性来自定义视口。viewport属性的值包括四个可选参数，分别为x、y、width和height，用于定义视口的位置和大小。其中，x和y表示视口左上角的坐标，width和height表示视口的尺寸。

由于SVG是一种矢量图形格式，可以在不失真的情况下自由缩放，因此视口设置在设计中具有非常重要的作用。通过指定不同的视口大小和缩放级别，可以使SVG图像在不同的设备和屏幕尺寸下以最佳方式呈现。

viewport属性指定的是视口在用户空间中的位置和大小，而不是在屏幕上的位置和大小。在实际应用中，需要根据屏幕分辨率、窗口大小等因素计算出实际的屏幕位置和大小，并将视口映射到屏幕上。因此，在设