鸿蒙开发-UI-图形-绘制几何图形

最新推荐文章于 2025-03-01 08:54:43 发布

鸿蒙布道

最新推荐文章于 2025-03-01 08:54:43 发布

阅读量1.5k

点赞数 29

分类专栏：鸿蒙开发文章标签： harmonyos ui 华为

本文链接：https://blog.youkuaiyun.com/u013488266/article/details/136205997

版权

42 篇文章

订阅专栏

本文介绍了鸿蒙开发中UI组件的图形绘制功能，包括Shape组件、SVG效果、图形组件接口如Circle、Ellipse等，以及形状视口的使用和自定义样式。通过实例展示了如何绘制图形和使用形状视口进行缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鸿蒙开发-UI-组件

鸿蒙开发-UI-组件2

鸿蒙开发-UI-组件3

鸿蒙开发-UI-气泡/菜单

鸿蒙开发-UI-页面路由

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件导航-Tabs

鸿蒙开发-UI-图形-图片

前言

上文详细学习了鸿蒙开发UI图片显示相关知识，学习了图片资源加载的两种类型，以及矢量图的显示，同时学习了图片渲染组件的相关属性和相关事件的使用方式和效果。本文将学习鸿蒙开发UI图形绘制

绘制组件用于在页面绘制图形，Shape组件是绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性

创建绘制组件有两种方式

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

Shape(value?: PixelMap)

该接口用于创建带有父组件的绘制组件，其中value用于设置绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制

方式二：绘制组件单独使用，用于在页面上绘制指定的图形

图像组件	接口调用
Circle（圆形）	Circle(options?: {width?: string \| number, height?: string \| number}
Ellipse（椭圆形）	Ellipse(options?: {width?: string \| number, height?: string \| number})
Line（直线）	Line(value?: {width?: string \| number, height?: string \| number})
Polyline（折线）	Polyline(value?: {width?: string \| number, height?: string \| number})
Polygon（多边形）	Polygon(value?: {width?: string \| number, height?: string \| number})
Path（路径）	Path(value?: { width?: number \| string; height?: number \| string; commands?: string })
Rect（矩形）	Rect(value?: {width?: string \| number,height?: string \| number,radius?: string \| number \| Array<string \| number>} \| {width?: string \| number,height?: string \| number,radiusWidth?: string \| number,radiusHeight?: string \| number})