如何通过火焰库在正方形上制作蓝色半透明覆盖

Question

我想创建一个单词搜索游戏。我正在研究一个火焰库来做到这一点。我有一个问题，如何在正方形上制作蓝色半透明覆盖层。 我试过了：

class Box2 extends PositionComponent {
  static const speed = 0.25;
  static const squareSize = 50.0;



  Box2({double size = 50}){
    height =size;
    width = size;
  }

  @override
  void render(Canvas c) {
    prepareCanvas(c);
    c.drawRect(Rect.fromLTWH(2, 2, width - 4, height - 4), PaletteEntry(Colors.green.withOpacity(0.5)).paint());

  }

  @override
  void update(double t) {
    super.update(t);
  }

  @override
  void onMount() {
    super.onMount();
    size.setValues(squareSize, squareSize);
    anchor = Anchor.center;
  }
}

class MyGame extends BaseGame with  PanDetector {

  bool running = true;


  var display =[
    ["S","T","A","R","T"],
    ["S","U","A","R","I"],
    ["C","H","N","P","T"],
    ["I","K","N","R","0"],
    ["S","H","L","R","U"],
  ];

  @override
  // TODO: implement size
  Vector2 get size => super.size;

   void generateBox(){
     double initialWidth =  (size[0]*1.1-(50*display.length))/2;
     double initialHeight =  (size[1]*1.1-(50*display.length))/2;
    for(int i=0 ;i< display.length;i++){
      for(int j=0 ;j< display.length;j++){
        add(Box(text:display[i][j])..position=
        Vector2(initialWidth +i.toDouble()*50, initialHeight+ j.toDouble()*50));
      }
    }

  }

  Future<void> onLoad() async {
    generateBox();
  }

  @override
  void onPanStart(DragStartInfo info) {
    super.onPanStart(info);
  }

  @override
  void onPanUpdate(DragUpdateInfo info) {

    final touchArea = RectExtension.fromVector2Center(
      center: info.eventPosition.game,
      width: 0,
      height: 0,
    );

    final handled = components.any((c) {
      if (c is PositionComponent && c.toRect().overlaps(touchArea)) {
        if (c is Box) {
          debugPrint("remove");

          add(Box2()..y= c.y
            ..x =c.x);
        }
      
        return true;
      }
      return false;
    });
    debugPrint("onPanUpdate  ${info.delta.game}");
    super.onPanUpdate(info);
  }

  void onPanDown(DragDownInfo info) {
     debugPrint("Pandown");

     final touchArea = RectExtension.fromVector2Center(
      center: info.eventPosition.game,
      width: 0,
      height: 0,
    );

    final handled = components.any((c) {
      if (c is PositionComponent && c.toRect().overlaps(touchArea)) {
        if (c is Box) {
          
          add(Box2()..y= c.y
          ..x =c.x);
        }
        debugPrint(c.toString());
        return true;
      }
      return false;
    });
  }

  void onPanEnd(DragEndInfo info) {
    debugPrint("onPanEnd");
  }
  void onPanCancel() {
    debugPrint("onPanCancel");
  }
}

我没有达到我的期望。我希望如下： image

但我的代码生成如下： image 2 它完全掩盖了下面的字母！！！

我正在寻找另一个不那么复杂的想法，并且可以做我想做的事情。

Answer 1

这是因为在事件期间多次调用 onPanUpdate 方法后，您将多个 Box2 叠加在一起，所有叠加在一起的不透明部分都变为纯绿色。

我只需要在 Box 类上添加一个字段 bool isMarked 而不是 Box2 类，而当 isMarked 是 true 时，您会在其顶部呈现不透明的绿色矩形。

类似这样的：

class Box extends PositionComponent {
  ...
  vool isMarked = false;

  @override
  void render(Canvas c) {
    super.render(c);
    // Do what you normally render in Box here

    // Render the green rectangle with opacity on top of your normal render
    if (isMarked) {
      c.drawRect(Rect.fromLTWH(2, 2, width - 4, height - 4), PaletteEntry(Colors.green.withOpacity(0.5)).paint());
    }
  }
  
  ...
}

然后在你的游戏类中做这样的事情：

class MyGame extends BaseGame with PanDetector {

  ...

  @override
  void onPanUpdate(DragUpdateInfo info) {
    super.onPanUpdate(info);
    final touchArea = RectExtension.fromVector2Center(
      center: info.eventPosition.game,
      width: 0,
      height: 0,
    );

    final handled = components.any((c) {
      if (c is PositionComponent && c.toRect().overlaps(touchArea)) {
        if (c is Box) {
          debugPrint("remove");
          c.isMarked = true;
        }
      
        return true;
      }
      return false;
    });
    debugPrint("onPanUpdate  ${info.delta.game}");
  }

  void onPanDown(DragDownInfo info) {
     debugPrint("Pandown");

     final touchArea = RectExtension.fromVector2Center(
      center: info.eventPosition.game,
      width: 0,
      height: 0,
    );

    final handled = components.any((c) {
      if (c is PositionComponent && c.toRect().overlaps(touchArea)) {
        if (c is Box) {
          c.isMarked = true;
        }
        debugPrint(c.toString());
        return true;
      }
      return false;
    });
  }

  void onPanEnd(DragEndInfo info) {
    removeMarkings();
  }

  void onPanCancel() {
    removeMarkings();
  }

  void removeMarkings() {
    components.whereType<Box>().forEach((box) => box.isMarked = false);
  }
}

（在...s 所在的代码中填写其余代码）。