HarmonyOS鸿蒙Next中用Path画的内圆角，还有没有更好的办法

HarmonyOS鸿蒙Next中用Path画的内圆角，还有没有更好的办法 图片

看我这个是不是你想要的效果
我是用层叠Stack 和path画的内圆角，下面给出我的中间黄色部分的代码 参考参考

其中两个path是两个内圆角 Image是那个黄色的图片 设置的颜色和边框就不说了那个一看就懂

最主要的就在与commands里面的SVG路径 这个路径得好好研究研究，这个路径我研究了好几天

Stack({ alignContent: Alignment.TopStart }) {
  Path()
    .fill(Color.Gray)
    .antiAlias(true)
    .margin({ left: -23, top: 0 })
    .stroke(Color.Gray)
    .commands('M0 60 H120 V0 A400 400 90 0 1 0 60 Z')
  Path()
    .fill(Color.Gray)
    .antiAlias(true)
    .margin({ left: 53, top: 0 })
    .stroke(Color.Gray)
    .commands('M0 0 V60 H120 A400 400 90 0 1 0 0 Z')
  Image($r('app.media.yuan'))
}
.width(80)
.height(80)
.padding(5)
.backgroundColor(Color.Gray)
.margin({ bottom: 0 })
.borderRadius(85)

更多关于HarmonyOS鸿蒙Next中用Path画的内圆角，还有没有更好的办法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，使用Path绘制内圆角时，可以考虑使用Canvas组件的clipPath方法结合几何运算来优化绘制效率。另外，利用Rect和RoundRect的API直接生成圆角路径，可以减少手动计算。还可以通过自定义组件封装常用圆角样式，提升代码复用性。

更多关于HarmonyOS鸿蒙Next中用Path画的内圆角，还有没有更好的办法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，除了使用Path绘制内圆角外，还可以考虑使用clip结合Shape组件实现更简洁的内圆角效果。通过Rectangle或RoundedRectangle的裁剪能力，可以避免复杂的SVG路径计算，代码更易维护且性能更优。例如，用.clip(Shape.RoundedRect)直接设置圆角半径，再叠加内容，这样无需手动计算路径，适配性也更好。

回到顶部