Flutter：CustomPainter 难以确定偏移量

Question

我试图在 Flutter 中实现以下目标，但我失败了

<style>
   #square {
      display: block;
      width:  300px;
      height: 300px;
      overflow: hidden;
   }

   #square img {
     position: absolute;
   }
</style>
<body>
   <div id="square">
     <img src="whatever.jpg" style="left:-5%;top:-10%;width:130%" />
   </div>
</body>

我的想法是 "pan/zoom" 图像，这样它就不会依赖于容器的尺寸（这就是为什么我使用百分比样式）。

我试图通过 CustomPainter 实现此目的，但我无法确定要传递给 paintImage() 方法的绘制矩形。 canvas 左上角似乎与要绘制到的容器的左上角不对应。

部分代码如下：

class _ImagePainter extends CustomPainter {
  const _ImagePainter({this.image, this.leftPercent, this.topPercent, this.widthPercent});

  final ui.Image image;
  final double leftPercent;
  final double topPercent;
  final double widthPercent;

  //
  //  How to compute the theOffset ???
  //
  Offset offset;


  @override
  void paint(Canvas canvas, Size size) {
    paintImage(canvas: canvas, rect: offset & (size * widthPercent), image: image, fit:BoxFit.contain, alignment: Alignment.topLeft);
  }

  @override
  bool shouldRepaint(_ZoomableImagePainter old) {
    return old.image != image || old.leftPercent != leftPercent || old.topPercent != topPercent  || old.widthPercent != widthPercent;
  }
}

我现在已经苦苦挣扎了几个小时....

谁能帮帮我？

非常感谢

Answer 1

好吧，我终于知道了...

代码如下：

class _ImagePainter extends CustomPainter {
  const _ImagePainter({this.image, this.leftPercent, this.topPercent, this.widthPercent});

  final ui.Image image;
  final double leftPercent;
  final double topPercent;
  final double widthPercent;

  @override
  void paint(Canvas canvas, Size size) {
    //
    //  This is how to compute both offset and paintRectangle
    //
    double imageWidhHeightRatio = image.width.toDouble() / image.height.toDouble();
    Offset offset = new Offset(leftPercent * size.width, topPercent * size.height);
    Rect imagePaintRect = new Rect.fromLTRB(offset.dx, offset.dy, offset.dx + size.width * widthPercent, offset.dy + size.height * widthPercent / imageWidthHeightRatio);

    paintImage(canvas: canvas, rect: imagePaintRect, image: image, fit:BoxFit.fill, alignment: Alignment.topLeft);
  }

  @override
  bool shouldRepaint(_ZoomableImagePainter old) {
    return old.image != image || old.leftPercent != leftPercent || old.topPercent != topPercent  || old.widthPercent != widthPercent;
  }
}

技巧是： 1. 我们需要考虑将图像绘制到的矩形，作为其尺寸重新缩放到目标区域的区域。 2. 要绘制图像，请使用 BoxFit.fill

希望对您有所帮助。

尽情享受吧！

Flutter：CustomPainter 难以确定偏移量

Flutter: CustomPainter difficulties with offset determination

flutter