如何在flutter中在图像边框上应用不同的框架

Question

我搜索了很多如何在图像上应用框架但没有找到答案。我读过堆栈函数，我们可以在其中将图像放入其他图像中，但这不是一个好技巧。我认为必须有框架库，并且通过使用该框架可以自动应用于图像边框。请指导我如何使用不同的框架外部图像设计，例如某些滤镜应用程序。

我想向用户提供框架选项，如下所示，当用户单击将应用于图像的任何框架时

Answer 1

解决这个问题有很多方法。我过去用过几个。它与您使用图像的方式有很大不同。您需要在图像上绘制一些东西还是只是显示它？

在我看来，使用

CustomPainter

可以最好地实现图像上的多个帧。查看文档了解更多信息。下面的画家应该可以做到这一点。

class TestPainter extends CustomPainter {
  final ui.Image image;

  TestPainter({required this.image});

  @override
  void paint(Canvas canvas, Size size) {
    //draw the image
    canvas.drawImage(image, const Offset(0, 0), Paint());

    double rectWidth = image.width.toDouble();
    double rectHeight = image.height.toDouble();
    final imageCenter = Offset(image.width / 2, image.height / 2);

    //first frame
    var border1 = Rect.fromCenter(
     center: imageCenter,
     width: rectWidth + 1,
     height: rectHeight + 1);

    var painting = Paint();
    painting.color = Colors.red;
    painting.strokeWidth = 2;
    painting.style = PaintingStyle.stroke;

    canvas.drawRect(border1, painting);

    //second frame
    var border2 = Rect.fromCenter(
     center: imageCenter,
     width: rectWidth + 3,
     height: rectHeight + 3);

    var painting2 = Paint();
    painting2.color = Colors.green;
    painting2.strokeWidth = 2;
    painting2.style = PaintingStyle.stroke;

    canvas.drawRect(
     border2,
     painting2,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

请谨慎。该示例中的图像必须是

dart:ui

库 (Documentation) 的图像。有多种转换方式。取决于您的项目。

Answer 2

您可以使用以下命令从

ui.Image

加载

Image.asset

Future<ui.Image> load(String asset) async {
  ByteData data = await rootBundle.load(asset);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}