如何在CustomPainter的paint函数中获取画布的偏移量？

Question

假设我们有一个背景图像： 我想呈现几个视图，共享相同的背景图片： 我认为我可以使用CustomPainter，并通过canvas offset绘制我的背景图片，但我不知道如何在绘制函数内获取该属性：

class PanelBackgroundPainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;
    canvas.clipRect(rect);

    canvas.drawImage(image, new Offset(-canvasOffsetX, -canvasOffsetY), new Paint());
  }

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

}

如何计算canvasOffsetX和canvasOffsetY？

我正在使用行和列来布置我的面板：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Column(
        children: <Widget>[
          new Expanded(
            child: new Container(
              color: new Color.fromARGB(255, 128, 128, 128),
            ),
            flex: 100,
          ),
          new Container(height: 10.0),
          new Container(
            color: new Color.fromARGB(255, 128, 128, 128),
            height: 120.0,
          ),
          new Container(height: 10.0),
          new Expanded(
            child: new Container(
              child: new Row(
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                      color: new Color.fromARGB(255, 128, 128, 128),
                    ),
                    flex: 50,
                  ),
                  new Container(width: 10.0),
                  new Expanded(
                    child: new Container(
                      color: new Color.fromARGB(255, 128, 128, 128),
                    ),
                    flex: 50,
                  ),
                ],
              ),
            ),
            flex: 200,
          ),
        ],
      ),
    );
  }
}

- raver

---

知道您是如何布置所有子元素的会很有帮助 - 您是使用行+列还是手动指定它们的位置？如果您能够添加代码，那肯定会更快地测试出来。 - rmtmckenzie

@rmtmckenzie 好的，谢谢提醒。我已经更新了我的问题，并附上了示例布局代码。 - raver

Answer 1

虽然我不确定这是否是一个好主意，但这是可能的。最好的解释可能就是看一下这段代码：

import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class SharedBackgroundPainter extends CustomPainter {
  final ui.Image image;
  final RenderBox renderBox;
  final RenderBox parentRender;

  SharedBackgroundPainter({@required this.image, @required this.renderBox, @required this.parentRender});

  @override
  void paint(Canvas canvas, Size size) {
    var rect = ui.Offset.zero & size;

    var globalThisTopLeft = renderBox.localToGlobal(new ui.Offset(0.0, 0.0), ancestor: parentRender);

    canvas.clipRect(rect);
    canvas.drawImage(image, new Offset(-globalThisTopLeft.dx, -globalThisTopLeft.dy), new Paint());
  }

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

class BackgroundBuilder extends StatelessWidget {
  final Size size;
  final ui.Image image;
  final RenderBox parentRender;

  const BackgroundBuilder({Key key, @required this.size, @required this.image, @required this.parentRender})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
      RenderBox box = context.findRenderObject();
      assert(box != null);

      return new CustomPaint(
        size: new Size(constraints.maxWidth, constraints.maxHeight),
        painter: new SharedBackgroundPainter(image: image, renderBox: box, parentRender: parentRender),
      );
    });
  }
}

class SharedBackgroundBuilder extends StatelessWidget {
  final ui.Image toDraw;
  final Size size;
  final RenderBox parentRender;

  const SharedBackgroundBuilder({Key key, @required this.toDraw, @required this.size, @required this.parentRender})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Expanded(
          child: new BackgroundBuilder(
            image: toDraw,
            size: size,
            parentRender: parentRender,
          ),
          flex: 100,
        ),
        new SizedBox(height: 10.0),
        new SizedBox(
          height: 120.0,
          child: new BackgroundBuilder(
            image: toDraw,
            size: size,
            parentRender: parentRender,
          ),
        ),
        new SizedBox(height: 10.0),
        new Expanded(
          child: new Container(
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new BackgroundBuilder(
                    image: toDraw,
                    size: size,
                    parentRender: parentRender,
                  ),
                  flex: 50,
                ),
                new Container(width: 10.0),
                new Expanded(
                  child: new BackgroundBuilder(
                    image: toDraw,
                    size: size,
                    parentRender: parentRender,
                  ),
                  flex: 50,
                ),
              ],
            ),
          ),
          flex: 200,
        ),
      ],
    );
  }
}

/// This is to resize an image to the size of the overall structure. Note that this will
/// only work in an environment where LayoutBuilder can find constraints.

class ImageResizingPainter extends CustomPainter {
  final ui.Image image;
  final BoxFit boxfit;

  ImageResizingPainter(this.image, this.boxfit);

  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    final ui.Rect rect = ui.Offset.zero & size;
    final Size imageSize = new Size(image.width.toDouble(), image.height.toDouble());

    FittedSizes sizes = applyBoxFit(boxfit, imageSize, size);

    // if you don't want it centered for some reason change this.
    final Rect inputSubrect = Alignment.center.inscribe(sizes.source, Offset.zero & imageSize);
    final Rect outputSubrect = Alignment.center.inscribe(sizes.destination, rect);
    canvas.drawImageRect(image, inputSubrect, outputSubrect, new Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class ImageResizer extends StatelessWidget {
  final ui.Image image;
  final BoxFit boxFit;

  // if you want a different boxfit you can set it. See BoxFit documentation.
  const ImageResizer({Key key, @required this.image, this.boxFit = BoxFit.cover}) : super(key: key);

  ui.Image getResizedImage(Size size) {
    var pictureRecorder = new ui.PictureRecorder();
    Canvas canvas = new Canvas(pictureRecorder);
    CustomPainter painter = new ImageResizingPainter(image, boxFit);
    painter.paint(canvas, size);
    return pictureRecorder.endRecording().toImage(size.width.floor(), size.height.floor());
  }

  Widget build(BuildContext context) {
    return new LayoutBuilder(builder: (context, constraints) {
      RenderBox box = context.findRenderObject();
      var size = new Size(constraints.maxWidth, constraints.maxHeight);
      // This might not be a good idea to do in the build function, but we're going to ignore that
      // and do it anyways.
      ui.Image resizedImage = getResizedImage(size);
      return new SharedBackgroundBuilder(toDraw: resizedImage, size: size, parentRender: box);
    });
  }
}

class ImageDrawer extends CustomPainter {
  final ui.Image image;

  ImageDrawer(this.image);

  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    canvas.drawImage(image, ui.Offset.zero, new Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

/// This is just to build an image to display. I'm too lazy to load one =D

class GradientPainter extends CustomPainter {
  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    Rect rect = ui.Offset.zero & size;
    var linearGradient = new LinearGradient(
      colors: [Colors.red, Colors.green],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    var shader = linearGradient.createShader(rect);
    canvas.drawRect(rect, new Paint()..shader = shader);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class GradientGetter extends StatelessWidget {
  // I'm too lazy to create an image so I'm just drawing a gradient
  ui.Image getGradientImage(Size size) {
    var pictureRecorder = new ui.PictureRecorder();
    Canvas canvas = new Canvas(pictureRecorder);
    GradientPainter painter = new GradientPainter();
    painter.paint(canvas, size);
    return pictureRecorder.endRecording().toImage(size.width.floor(), size.height.floor());
  }

  @override
  Widget build(BuildContext context) {
    return new LayoutBuilder(builder: (context, constraints) {
      var size = new Size(constraints.maxWidth, constraints.maxHeight);
      // remove the / 20 to get it smooth again, it's just there to test
      // out the scaling.
      var changedSize = size / 20.0;
      ui.Image gradientImage = getGradientImage(changedSize);
      assert(gradientImage != null);
      return new ImageResizer(
        image: gradientImage,
      );
    });
  }
}

/// This is just so that you can copy/paste this and have it run.
void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new Padding(
          padding: const EdgeInsets.all(30.0),
          child: new GradientGetter(),
        ));
  }
}

当我仔细研究后，我意识到它需要比我最初想象的更为复杂 - 你需要处理将图像缩放到容器大小等问题。现在它可以实现所有这些功能，尽管我并没有进行过超级广泛的测试。

另外要注意的是，这没有考虑性能 - 性能几乎肯定很差。

- rmtmckenzie

---

我应该在哪里调用那段代码？我已经尝试在LayoutBuilder的builder回调函数和我的自定义widget的build函数中调用，但两种情况下都返回了null。 - raver

嗯，实际上现在想想那样做不太好 - 你必须在布局完成后调用它。等我接近电脑时，我会更新更好的答案。 - rmtmckenzie

@rmtmckenzie 这很可能会导致性能非常糟糕，因为你需要在每一帧之后重新绘制。 - Rémi Rousselet

@raver 我已经更新了答案，并提供了一个更详细的示例（它确实使用了我最初发布的代码）。我已经在我的手机上测试过这个示例，它可以正常工作。你可能需要做一些修改才能让它与你的图像配合使用，但这应该为你提供了一个很好的基础。 - rmtmckenzie

经过进一步考虑，我不会使用CustomPainter（我将编写一个包装器来传递偏移量到子元素的Column和Row类），但感谢您的努力，我从您的示例中学到了很多，并且意外地解决了我的其他问题 :)。 - raver

如果我们使用drawPath而不是Rect会怎样？ - Harsh Bhavsar

Answer 2

我知道这是一个老问题，而且它已经有了答案，但我刚遇到了同样的问题，想分享我的解决方案。

如果我们创建一个自定义的RenderObject，这个问题就可以很容易地解决：

import 'package:flutter/widgets.dart';

/// An image with a slight pattern.
///
/// The pattern is always the same on a certain part of the screen, even if the
/// widget itself doesn't cover the whole screen.
class Background extends LeafRenderObjectWidget {
  const Background({super.key});

  @override
  RenderObject createRenderObject(BuildContext context) {
    return BackgroundRenderObject(MediaQuery.of(context).size);
  }

  @override
  void updateRenderObject(BuildContext context, BackgroundRenderObject renderObject) {
    renderObject.screenSize = MediaQuery.of(context).size;
  }
}

class BackgroundRenderObject extends RenderBox {
  BackgroundRenderObject(this._screenSize);

  Size _screenSize;

  set screenSize(Size value) {
    if (_screenSize == value) {
      return;
    }

    _screenSize = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    size = constraints.biggest;
  }
  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;

    // The rect where the background should be painted.
    final drawRect = offset & size;

    // A rect covering the entire screen.
    // This ensures that the painted shader is the same no matter the offset
    // and size of the rect where the background is painted.
    final fullScreenRect = Offset.zero & _screenSize;


    const gradient = LinearGradient(
      colors: [
        Color(0xFF000824),
        Color(0xFF00283F),
        Color(0xFF001134),
      ],
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
    );

    final paint = Paint()..shader = gradient.createShader(fullScreenRect);

    canvas.drawRect(drawRect, paint);
  }

- Hannes Hultergård