HarmonyOS 鸿蒙Next中使用Polygon绘制图形的时候有一个边线

HarmonyOS 鸿蒙Next中使用Polygon绘制图形的时候有一个边线 我在使用Polygon绘制一个斜角图像的时候，发现无论怎么绘制右边都会有一个间隙，我想知道这是我为什么。

代码以及图片效果如下，通过改变背景颜色可以发现是一个间隙。

代码：

@Builder
backMiddleItem(){
  Stack({ alignContent: Alignment.TopEnd}){
    Polygon({width: 10, height: 40})
      .points([[4,40], [10, 0], [10, 40]])
      .fill($r('app.color.secondary_red'))
  }
  .backgroundColor(Color.White)
  .width(10)
  .height(40)
}

图片：

cke_1998.png

cke_2258.png


更多关于HarmonyOS 鸿蒙Next中使用Polygon绘制图形的时候有一个边线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

楼主你这个代码只有左边的三角形吧，我这边用Polygon试着绘制了你图片中的梯形，没有看到间隙。能不能提供完整代码一起看下

Row(){
        Polygon({width: 10, height: 40})
          .points([[4,40], [10, 0], [10, 40]])
          .fill(Color.Red)
        Polygon({width: 60, height: 40})
          .points([[0, 0],[0,40], [60, 40], [60, 0]])
          .fill(Color.Red)
      }

更多关于HarmonyOS 鸿蒙Next中使用Polygon绘制图形的时候有一个边线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用Polygon绘制图形时，边线可通过设置stroke属性控制。stroke用于定义边线颜色，strokeWidth调整边线粗细。默认无边线，需显式指定相关属性才会显示。

在HarmonyOS Next中使用Polygon绘制图形时出现右侧边线间隙，通常是由于坐标精度或绘制边界处理导致的。从你的代码来看，Polygon的点坐标设置为[[4,40], [10,0], [10,40]]，其中右侧两个点的x坐标均为10，与Polygon的宽度一致，这可能导致边缘绘制时出现一个像素的间隙。

建议尝试将右侧点的x坐标略微调整，例如改为9.9或9.99，以避免边界重叠问题：

.points([[4,40], [9.99, 0], [9.99, 40]])

这样通常可以消除间隙。如果问题仍然存在，可以检查父容器的对齐方式或背景色设置是否影响了视觉表现。

回到顶部