如何设置"z-index"?画布元素? [英] How to set "z-index" of canvas elements?

问题描述

所以我让这位画家为我的游戏绘制了一个小地图:

So I got this painter to draw a minimap for my game:

class MiniMapPainter extends CustomPainter {
  final GameMap map;
  final double tileSize;
  final List<ui.Image> images;

  MiniMapPainter(
      {@required this.images, @required this.map, @required this.tileSize});

  @override
  void paint(Canvas canvas, Size size) {
    var row = 0;
    var column = 0;

    map.encodedMap.runes.forEach((charCode) {
      final character = String.fromCharCode(charCode);

      if (character == map.rowSeparator) {
        row++;
        column = 0;
      } else if (character == map.colSeparator) {
        column++;
      } else {
        final code = map.codeFromInt(int.parse(character));
        final paint = _paintFromMapCode(code);

        switch (code) {
          case MapCode.TreasureChestClosed:
          case MapCode.TreasureChestLocked:
            _paintImageFromAsset(canvas, column, row, images[0]);
            break;
          default:
            canvas.drawRect(
                Rect.fromLTWH(
                  _getLeft(column), // Determines position on x-axis
                  _getTop(row), // Determines position on y-axis
                  tileSize,
                  tileSize,
                ),
                paint);
            break;
        }
      }
    });
  }

  double _getTop(int index) {
    return index * tileSize;
  }

  double _getLeft(int index) {
    return (index % map.columns).floor().toDouble() * tileSize;
  }

  void _paintImageFromAsset(Canvas canvas, int x, int y, ui.Image asset) {
    final size = tileSize * 3;
    final offset = (size / 2);

    paintImage(
        canvas: canvas,
        rect: Rect.fromLTWH(
          _getLeft(x) - offset,
          _getTop(y) - offset,
          size,
          size,
        ),
        image: asset);
  }

  Paint _paintFromMapCode(MapCode code) {
    var paint = Paint();

    switch (code) {
      case MapCode.Obstacle:
        paint.color = Colors.black;
        break;
      case MapCode.DamageTrap:
        paint.color = Colors.red[300];
        break;
      case MapCode.StunTrap:
        paint.color = Colors.red[100];
        break;
      default:
        paint.color = Colors.grey[300];
        break;
    }

    return paint;
  }

  @override
  bool shouldRepaint(MiniMapPainter oldDelegate) => true;
  @override
  bool shouldRebuildSemantics(MiniMapPainter oldDelegate) => true;
}

有些东西需要图像而不是矩形，例如宝物.因此，我添加了 _paintImageFromAsset 方法，该方法效果很好，但是在此屏幕截图中可以看到一个问题:

Some things require an image instead of a rectangle, such as treasures. So I added the _paintImageFromAsset method which works great but there's a problem which can be seen in this screenshot:

您可以看到，在藏宝似乎获得更高的z索引之后绘制的任何矩形，因此它们剪切了图像.

As you can see any rectangles drawn after the treasures seem to get a higher z-index so they clip the images.

我还没有找到设置像这样的自定义画布元素的z-index的方法.如果可能的话，我希望避免在所有矩形之后绘制图像.

I haven't found a way to set the z-index of custom canvas elements like this. I would like to avoid having to draw images after all the rectangles if possible.

我该怎么做?

推荐答案

也许使用两个小部件?例如

Stack(children: [
  CustomPaint(paint: ThePaintToCreateThingsWithSmallZIndex()),
  CustomPaint(paint: ThePaintToCreateThingsWithBigZIndex()),
])

这样做，您不必关心绘制的顺序，即使以后重新绘制 ThePaintToCreateThingsWithSmallZIndex 时，它仍然位于下面.

By doing this, you do not need to care about the order of drawing, and even if ThePaintToCreateThingsWithSmallZIndex is painted later, it is still on below.

别忘了透明地绘画，而不是白色背景.

Do not forget to paint transparently instead of white background.

(该代码仅用于演示目的，当然不能编译)

(The code is only for demo purpose and cannot be compiled, of course)

这篇关于如何设置"z-index"?画布元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！