Question

假设我们有一张背景图片：

我想用共享背景渲染一些视图：

我认为我可以使用CustomPainter并绘制由canvas offset转换的背景图像，但我不知道如何在paint函数中获取该属性：

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,
          ),
        ],
      ),
    );
  }
}

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

当我经历它时，我意识到它需要比我原先想象的更复杂 - 你必须处理将图像缩放到容器的大小等。这就完成了所有这一切，尽管我还没有测试过它非常广泛。

另请注意，这并没有考虑到性能 - 这几乎肯定是性能不佳。

如何在CustomPainter的绘画功能中获得画布的偏移量？

1 个答案: