我面临一个问题，即我的 DotComponent 实例没有出现在 Flutter 的 Flame 游戏中的 LineComponent 上

Question

我正在创建一条可调整大小的线，当尝试拖动线上的点以调整大小时，DotComponents 不会出现在该线上；相反，它们出现在其下方。我附上了一张图片以便更好地说明。

我想要实现的目标：

我的结果：

我的代码：

class LineComponent extends DraggableComponent  {

  final Path _path = Path();
  final int lineWidth = 20;
  final int lineHeight = 80;

  final Paint paint = Paint()
    ..color = Colors.white
    ..style = PaintingStyle.fill;

  late final DotComponent startPoint,endPoint,middlePoint;

  LineComponent({required position}): super(position: position) {

    priority = 10;

    startPoint = DotComponent(position: Vector2(position.x - lineHeight/2, position.y));
    endPoint   = DotComponent(position: Vector2(position.x + lineHeight/2, position.y));
    middlePoint = DotComponent(position: Vector2(position.x, position.y));

    addAll([startPoint,endPoint,middlePoint]);
  }

  @override
  bool containsLocalPoint(Vector2 point){
    return _path.contains(Offset(point.x, point.y));
  }

  @override
  void render(Canvas canvas) {

    _path.addRect(Rect.fromPoints(Offset(startPoint.position.x,startPoint.position.y-lineWidth/2),
        Offset(endPoint.position.x,endPoint.position.y+lineWidth/2)));
    _path.close();

    canvas.drawPath(_path, paint);
  }
}

class DotComponent extends DraggableComponent {

  DotComponent({required super.position} ) {
    priority = 0;
  }

  final double radius = 10.0;

  final Path _path = Path();

  final Paint paint = Paint()
    ..color = Colors.blue
    ..strokeWidth = 2
    ..style = PaintingStyle.fill;

  @override
  bool containsLocalPoint(Vector2 point){
    return _path.contains(Offset(point.x, point.y));
  }

  @override
  void onDragUpdate(DragUpdateEvent event) {
    position = event.localStartPosition;
  }

  @override
  void render(Canvas canvas) {
    _path.reset();
    _path.addOval(Rect.fromCenter(center: Offset(position.x, position.y), width: radius, height: radius));
    _path.close();

    canvas.drawPath(_path, paint);
  }
}'''

Answer 1

您已将线的优先级设置为 10，点的优先级设置为 0，较低的优先级意味着它将位于具有较高优先级的任何内容的下面。 请注意，优先级仅适用于兄弟姐妹之间。 如果我是你，我会让

DotComponent

成为

LineComponent

的子级，只需确保它随后相对于该线而不是它现在拥有的任何父级进行渲染即可。