首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在CustomPainter的paint函数中获取画布的偏移量?

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

Stack Overflow用户
提问于 2018-03-25 23:09:03
回答 1查看 3.2K关注 0票数 3

假设我们有一个背景图像:

我想渲染几个具有共享背景的视图:

我认为我可以使用CustomPainter绘制经过画布偏移转换的背景图像,但我不知道如何在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,
          ),
        ],
      ),
    );
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-27 03:04:51

虽然我不知道这是否一定是一个伟大的想法,但它是可能的。最好的解释可能就是看看下面的代码:

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

当我通过它的时候,我意识到它需要比我最初想象的更复杂-你必须处理缩放图像到容器的大小等等。现在这一切都完成了,尽管我还没有对它进行广泛的测试。

还要注意的是,这并没有考虑到性能--这几乎可以肯定是糟糕的性能。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49477316

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档