flutter 如何在抖动中对图像边界应用不同的帧

ujv3wf0j  于 2023-01-05  发布在  Flutter
关注(0)|答案(1)|浏览(97)

我搜索了很多如何在图像上应用框架,但没有找到答案。我读了堆栈函数,其中我们可以把一个图像内其他,但它不是很好的伎俩。我认为必须有库的框架,并通过使用该框架可以自动应用于图像的边界。请指导我如何使用不同设计的框架外的图像像一些过滤器的应用程序。

我想给予用户的框架选项如下,当用户点击任何框架,将适用于图像

kgsdhlau

kgsdhlau1#

有很多方法可以解决这个问题。我过去用过几种。它与你使用图像的方式有很大的不同。你需要在图像上画一些东西还是仅仅显示它?
在我看来,使用CustomPainter可以最好地实现图像上的多帧。请查看documentation以了解更多信息。下面的画家应该可以做到这一点。

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

请注意。该示例中的图像需要是dar:ui libraryDocumentation)的图像。有多种转换方式。取决于您的项目。

相关问题