Flame开发：如何将SpriteComponent置于PolygonComponent边框内？

你的问题出在SpriteComponent的锚点和尺寸适配上：默认锚点为Anchor.topLeft，导致精灵从多边形的左上角开始绘制，无法对齐到边框内部。按以下方式修改代码即可解决：

修改方案 #

• 给SpriteComponent设置Anchor.center，让精灵以自身中心对齐多边形的中心
• 根据多边形的实际大小调整精灵尺寸，避免超出边框（可选，按需调整比例）

修改后完整代码 #

Future<void> onLoad() async {
  super.onLoad();
  size.setValues(cellSize, cellSize);
  //  anchor = Anchor.center;
  PolygonComponent cell = PolygonComponent.relative(
    [
      Vector2(0.0, -1.0),
      Vector2(-1.0, -0.5),
      Vector2(-1.0, 0.5),
      Vector2(0.0, 1.0),
      Vector2(1.0, 0.5),
      Vector2(1.0, -0.5),
    ],
    parentSize: size,
    //angle: 45,

    paint: Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1,
  );
  add(cell);

  SpriteComponent sprite = SpriteComponent()
    ..sprite = await Sprite.load('grass_1.png')
    ..size = Vector2(cellSize * 0.8, cellSize * 0.8) // 按比例缩小适配多边形内部
    ..anchor = Anchor.center; // 锚点设为中心，让精灵居中显示

  cell.add(sprite);
}

说明 #

PolygonComponent.relative创建的组件，其内部坐标原点是自身中心。设置Sprite的锚点为Anchor.center后，精灵会自动对齐到多边形的中心位置。如果不需要缩小尺寸，仅保留..anchor = Anchor.center即可；但若精灵尺寸过大超出多边形边框，建议按比例调整size参数。

内容的提问来源于stack exchange，提问作者astheras