2

我想在 Flutter 的画布上的路径内绘制交叉对角线。

现在，我已经通过将图像资源加载到 a 中ui.Image，然后使用 aCustomPainter和 anImageShader在画布上绘制它来使其工作。它有效，但它要求我为每对线条颜色创建一个图像资源（不仅是红色/黑色）。

Future<ui.Image> _loadAssetImage(int number) {
  Completer<ui.Image> completer = new Completer<ui.Image>();

  AssetImage('assets/pngs/pattern_$number.png')
    .resolve(new ImageConfiguration())
    .addListener(ImageStreamListener((ImageInfo image, bool synchronousCall){
      ui.Image img;
      img = image.image;
      completer.complete(img);
    })
  );

  return completer.future;
}

ui.Image myImage = await _loadAssetImage(1);

接着

          canvas.drawPath(path, Paint()
            ..shader = ImageShader(myImage, TileMode.repeated, TileMode.repeated, Matrix4.identity().scaled(0.2).storage)
            ..style = PaintingStyle.fill
          );

          canvas.drawPath(path, Paint()
            ..style = PaintingStyle.stroke
            ..strokeJoin= StrokeJoin.round
            ..strokeCap= StrokeCap.round
            ..color = Colors.black
            ..strokeWidth = 1
          );

但是，我很想知道是否有比加载和绘制资产图像更有效的方法来做到这一点。这应该很容易——毕竟它实际上只是重复线条——但我不知道如何绘制它们并将它们剪辑到路径上。

有什么建议么？

在此处输入图像描述

4

1 回答 1

0

只需剪切路径并在路径边界中绘制线条：

        var b = path.getBounds();

        FCanvas.save();
        FCanvas.clipPath(path);

        for (int i = step; i < b.width; i = i + step)
          FCanvas.drawLine(Offset(b.left + i, b.top), Offset(b.left + i, b.bottom), getPenPaint());

        for (int i = step; i < b.height; i = i + step)
          FCanvas.drawLine(Offset(b.left, b.top + i), Offset(b.right, b.top + i), getPenPaint());


        FCanvas.restore();
于 2020-11-13T12:00:42.857 回答