如何在 Flutter 的画布上的路径内绘制图案？

Posted 2023-02-23

【中文标题】如何在 Flutter 的画布上的路径内绘制图案？

【英文标题】：How can I draw a pattern inside a path on a canvas in Flutter?

【发布时间】：2020-06-02 16:41:42

【问题描述】：

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

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

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
          );

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

有什么建议吗？

【问题讨论】：

剪辑是一个选项吗？例如。使用您想要的任何画家绘制完整的矩形背景，然后添加某种剪裁以删除您不想要的区域？ developerlibs.com/2019/08/…

@SebastianRoth 我需要在画布上绘制它，并且画布上还绘制了许多其他东西，所以我不能轻易地将它剪辑到路径上。我想我会以某种方式将它绘制在一个单独的图像上，然后以与使用资产图像相同的方式使用该图像。或者，如果有办法将一个画布复制到另一个画布上，这可能是一种选择，但我在搜索时没有找到任何此类解决方案。

【参考方案1】：

只是剪切路径并在路径边界内画线：

        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();