如何使用HarmonyOS鸿蒙Next中CircleShape裁剪图形后设置边框颜色？

如何使用HarmonyOS鸿蒙Next中CircleShape裁剪图形后设置边框颜色？

Image(this.appIcons.get(renderItem.entryKey))
  .clipShape(new CircleShape({width:'32vp', height:'32vp'}).position({x: '2vp', y: '2vp'}))
  .width('36vp')
  .border({ width: '1px', color: '#99808080', style: BorderStyle.Solid })

希望能设置图标的边框，实际无法设置边框


更多关于如何使用HarmonyOS鸿蒙Next中CircleShape裁剪图形后设置边框颜色？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

clip形状裁剪后无法设置边框

可以尝试使用不带边框的图片，设置borderradius实现圆形，再设置边框

更多关于如何使用HarmonyOS鸿蒙Next中CircleShape裁剪图形后设置边框颜色？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用CircleShape裁剪图形后，可以通过ShapeDrawable设置边框颜色。首先创建CircleShape对象，然后将其传递给ShapeDrawable。接着使用ShapeDrawable的setStroke方法设置边框宽度和颜色。例如：

let circleShape = new CircleShape();
let shapeDrawable = new ShapeDrawable(circleShape);
shapeDrawable.setStroke(5, Color.Red);

通过这种方式，你可以在裁剪图形后设置边框颜色。

在HarmonyOS Next中，使用CircleShape裁剪图形后设置边框颜色的问题可以通过以下方式解决：

  1. 确保在clipShape之后调用border方法，顺序很重要。您的代码顺序是正确的。

  2. 检查CircleShape的尺寸与Image组件尺寸的关系：

  • 您的CircleShape设置为32vp，而Image组件设置为36vp
  • 边框宽度1px，所以理论上应该能看到边框
  1. 可能的解决方案：
  • 尝试增加边框宽度到2vp或更大值测试是否可见
  • 检查颜色值是否过于透明(#99808080中前两位99表示透明度)
  1. 替代方案： 可以尝试使用overlay叠加一个圆形边框：
Image(this.appIcons.get(renderItem.entryKey))
  .clipShape(new CircleShape({width:'32vp', height:'32vp'}))
  .width('32vp')
  .overlay(
    Circle()
      .width('32vp')
      .height('32vp')
      .stroke({ width: '1vp', color: '#808080' })
  )
  1. 如果仍然无效，可能是当前版本的渲染限制，建议检查组件是否在正确的容器中并有足够的显示空间。
回到顶部