HarmonyOS鸿蒙Next中clipShape裁剪图片

HarmonyOS鸿蒙Next中clipShape裁剪图片 cke_175.png

cke_404.png

图片应该被裁减成黑色区域的形状，但是还是正方形
我想实现裁减图片应该怎么做，我想裁减成三角形的


更多关于HarmonyOS鸿蒙Next中clipShape裁剪图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

楼主可以使用PathShape来定义裁剪的范围：

Image($r('app.media.background'))
  .clipShape(
    new PathShape({
      commands: 'M0 0 H300 L400 100 V200 H0 Z'
    })

  )
  .width('500px').height('300px')

cke_5321.png

M0 0 → 左上角

H300 → 到 (300,0)，这时右上角被“缩短”

L400 100 → 连线到 (400,100)，形成一个斜边

V200 → 到 (400,200)

H0 → 回到 (0,200)

Z → 闭合

这样右上角就是一个三角形切掉的效果。

参考文档：形状裁剪（clipShape）-几何图形绘制-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

指令总结：

指令 全写 用法 示例 含义
M x y moveto 移动画笔到 (x,y)，不画线 M0 0 把起点移到左上角
L x y lineto 从当前位置画直线到 (x,y) L100 100 画一条直线到 (100,100)
H x horizontal lineto 水平画线到 x 坐标 H200 向右画到 (200,y)
V y vertical lineto 垂直画线到 y 坐标 V150 向下画到 (x,150)
Z 或 z closepath 闭合路径（自动画线回起点） Z 闭合图形

更多关于HarmonyOS鸿蒙Next中clipShape裁剪图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


SVG路径命令：

  • M x y：将绘图“画笔”移动到指定坐标点(x,y)，作为新子路径的起点。该命令不绘制任何内容，仅设置起始位置。示例M 10 20表示将起点定位到坐标(10,20)。
  • L x y：从当前点绘制一条直线到目标坐标点(x,y)。示例：L 50 60表示从当前位置画一条直线至(50,60)。
  • H x：绘制一条水平线到x轴坐标为x的位置，y坐标保持不变。示例：H 100表示画一条水平线至x=100，y不变。
  • V y：绘制一条垂直线到y轴坐标为y的位置，x坐标保持不变。示例：V 80表示画一条垂直到y=80，x不变。
  • Z：关闭当前子路径，即从当前点绘制一条直线回到路径的起始点，形成闭合图形。大小写不敏感，但通常使用大写。示例：Z结束并闭合路径。

没看太懂效果图，可以参考下面的代码：

import { PathShape } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  aboutToAppear(): void {
  }

  build() {
    Column() {
      Image($rawfile('logo.png')).width(300).height(300).clipShape(new PathShape({
        commands: `M0 0 ` + // 起点：左上
          `H${vp2px(300)} ` + // 横向到右上
          `V${vp2px(300)} ` + // 向下到右下上方一点
          `L${0} ${0} ` + // 斜线连到左下的右方
          `Z`                 // 闭合路径
      }))
    }
  }
}

在HarmonyOS鸿蒙Next中，clipShape用于通过几何形状（如圆形、矩形）裁剪图片。使用clipShape属性并指定Shape参数（如CircleShape或RectangleShape）可实现视觉裁剪效果。该操作仅影响UI显示，不修改原始图片文件。示例代码中通常在Image组件内设置clipShape属性。

在HarmonyOS Next中，可以通过clipShape属性结合几何形状（如三角形）裁剪图片。以下是使用Shape组件定义三角形路径并裁剪的示例代码：

import { Shape, Image } from '@kit.ArkUI';

@Entry
@Component
struct ClipExample {
  build() {
    Column() {
      // 使用Shape定义三角形路径
      Shape() {
        Image($r('app.media.example'))
          .width(100)
          .height(100)
          .clipShape(new Triangle()) // 应用自定义三角形裁剪
      }
      .width(100)
      .height(100)
    }
  }
}

// 自定义Triangle类实现Shape接口
class Triangle implements Shape {
  constructor() {}

  // 定义三角形路径
  getPath(): Path2D {
    let path = new Path2D();
    path.moveTo(50, 0);    // 顶点
    path.lineTo(100, 100); // 右下角
    path.lineTo(0, 100);   // 左下角
    path.closePath();      // 闭合路径
    return path;
  }
}

关键点：

  1. 使用Shape组件包装需要裁剪的Image
  2. 通过clipShape属性应用自定义几何形状（此处为Triangle类）
  3. Triangle类需实现Shape接口的getPath()方法，用Path2D定义三角形顶点坐标

注意：裁剪操作仅在渲染时生效，不会修改原始图片数据。

回到顶部