HarmonyOS鸿蒙Next中如何制作这种梯形的图案

HarmonyOS鸿蒙Next中如何制作这种梯形的图案 cke_177.png

这种形状如何制作的(除了使用UI图片)


更多关于HarmonyOS鸿蒙Next中如何制作这种梯形的图案的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

可利用clipShape接口将组件裁剪为所需的形状。调用该接口后，可以保留该形状覆盖的组件部分，同时移除组件的其余部分。裁剪形状本身是不可见的。

// xxx.ets
import { PathShape } from '@kit.ArkUI';

@Entry
@Component
struct ClipShapeExample {
  build() {
    Column({ space: 15 }) {
      Row() {
        Image($r('app.media.background'))
          .clipShape(new PathShape({ commands: 'M0 0 H400 V200 H0 Z' }))
          .width('500px').height('300px')
      }
      .clip(true)
      .borderRadius(20)
    }
    .width('100%')
    .margin({ top: 15 })
  }
}

参考地址

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-clip-shape

更多关于HarmonyOS鸿蒙Next中如何制作这种梯形的图案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你好，参考我这篇. 使用SVG绘制路径，进行裁剪。

https://developer.huawei.com/consumer/cn/forum/topic/0203201643850568205?fid=0109140870620153026

让UI出图！

二个梯形拼在一起 出一张图就可以了

有专门绘制形状的api，

在HarmonyOS Next中，可通过ArkUI的clip属性结合Path绘制梯形。使用Shape组件，定义commands为M（起点）、L（连线）等指令构成梯形路径。示例代码片段：Shape({ width: 200, height: 100 }) .clip(new Path().commands('M 0 0 L 200 0 L 160 100 L 40 100 Z'))。

在HarmonyOS Next中，可以通过ArkUI的绘制能力实现梯形效果，无需依赖图片。主要使用Canvas或Shape组件进行自定义绘制。

方案一：使用Shape组件（推荐，声明式API）

Shape是声明式绘制组件，代码更简洁。通过组合Polygon或Path即可绘制梯形。

示例代码：

// 使用Polygon直接定义梯形四个顶点坐标
@Entry
@Component
struct TrapezoidExample {
  build() {
    Column() {
      Shape() {
        Polygon()
          .width(200)
          .height(120)
          .points([
            [50, 0],   // 左上角（向内偏移）
            [250, 0],  // 右上角（向内偏移）
            [200, 120], // 右下角
            [100, 120]  // 左下角
          ])
      }
      .fill(Color.Blue)  // 填充颜色
      .stroke(Color.Red) // 边框颜色
      .strokeWidth(2)
    }
  }
}

关键点：

  • points数组按顺序定义四个顶点坐标，形成闭合路径
  • 通过调整x坐标值控制梯形的倾斜角度
  • 可使用fill()设置填充色，stroke()设置边框

方案二：使用Canvas绘制（更灵活）

Canvas提供更底层的绘制控制，适合动态或复杂图形。

示例代码：

@Entry
@Component
struct TrapezoidCanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Column() {
      Canvas(this.context)
        .width(300)
        .height(150)
        .onReady(() => {
          const ctx = this.context
          ctx.beginPath()
          ctx.moveTo(80, 20)   // 左上角
          ctx.lineTo(220, 20)  // 右上角
          ctx.lineTo(250, 130) // 右下角
          ctx.lineTo(50, 130)  // 左下角
          ctx.closePath()
          ctx.fillStyle = '#007DFF'
          ctx.fill()
          ctx.strokeStyle = '#FF0000'
          ctx.lineWidth = 2
          ctx.stroke()
        })
    }
  }
}

方案三：使用Clip裁剪

通过组合矩形和裁剪区域实现梯形效果。

Shape() {
  Path()
    .width(200)
    .height(120)
    .commands('M50 0 L250 0 L200 120 L100 120 Z')
}

调整技巧：

  1. 控制倾斜度：调整上下边对应顶点的x坐标差值
  2. 等边梯形：确保左右倾斜角度对称
  3. 添加样式：使用.fillGradient()添加渐变或.shadow()添加阴影增强效果

性能建议：

  • 静态梯形优先使用Shape组件，性能更优
  • 动态变化梯形考虑Canvas
  • 复杂场景可使用Path2D复用路径定义

这两种方案都能高效实现梯形绘制，且支持响应式尺寸调整。Shape组件语法更简洁，适合大多数UI场景；Canvas适合需要动态交互或复杂绘制的场景。

回到顶部