#鸿蒙通关秘籍#如何实现鸿蒙中Polygon投票组件的中间间隙效果？

要在鸿蒙中实现Polygon投票组件中间的间隙效果，可以通过使用绘制组件Polygon绘制一个中间的平行四边形。这个平行四边形的样式会根据不同的状态进行变化。以下是详细的实现步骤：

• 绘制平行四边形：

Polygon()
  .points(this.points)
  .fill(Color.White)
  .stroke(Color.White)
  .antiAlias(true)
  .width($r("app.integer.polygon_width"))
  .height($r("app.integer.polygon_height"))

• 根据是否点击状态变更，显示/隐藏"PK"文字：

if (!this.isClick) {
  Text() {
    Span($r("app.string.mid_text_left"))
      .fontColor(Constants.LEFT_COLOR)
    Span($r("app.string.mid_text_right"))
      .fontColor(Constants.RIGHT_COLOR)
  }
  .fontSize($r("app.integer.mid_text_font_size"))
  .fontStyle(FontStyle.Italic)
  .fontWeight(Constants.MID_TEXT_FONT_WEIGHT)
  .textAlign(TextAlign.Center)
}

• 通过 position 和 markAnchor 来确保 Polygon 的正确定位：

.position({ x: this.leftOptionWidth })
.markAnchor({ x: $r("app.string.mid_gap_mark_anchor") })

通过上述步骤，可以实现Polygon组件中间的投票间隙效果。