鸿蒙Next如何绘制虚线

在鸿蒙Next开发中，我想绘制一条虚线用于界面分隔，但找不到相关的API或示例代码。请问应该如何实现？需要设置哪些参数（如虚线长度、间隔等）？能否提供具体的代码示例？

2 回复

鸿蒙Next画虚线？简单！用PathDashPathEffect，设置好虚线样式和间距，再搭配Canvas的drawPath，嗖嗖几下就搞定！代码一写，虚线秒现，比画饼还快！😄

更多关于鸿蒙Next如何绘制虚线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，绘制虚线可以通过Line组件结合DashPathEffect来实现。以下是具体步骤和示例代码：

  1. 使用Line组件：定义起点和终点坐标。
  2. 设置DashPathEffect：通过graphic属性添加虚线效果，指定实线长度和间隔。

示例代码（ArkTS）：

import { Line, DashPathEffect } from '@kit.ArkGraphics2D';

@Entry
@Component
struct DashedLineExample {
  build() {
    Column() {
      // 绘制虚线
      Line()
        .width(300)
        .height(2)
        .startPoint({ x: 0, y: 0 })
        .endPoint({ x: 300, y: 0 })
        .graphic(DashPathEffect.create([10, 5])) // 参数：[实线长度, 间隔长度]
        .stroke(Color.Black)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

参数说明：

  • DashPathEffect.create([10, 5])：表示虚线由“10像素实线 + 5像素间隔”循环组成。
  • 调整数组值可改变虚线样式（例如[15, 3, 5, 3]表示“15像素实线+3间隔+5实线+3间隔”）。

注意事项：

  • 确保Line的宽度/高度足够显示完整虚线周期。
  • 适用于水平/垂直线，斜线需通过坐标调整。

通过这种方式可灵活定制各类虚线样式。

回到顶部