How to get offset of canvas in CustomPainter's paint function? - flutter

Question

lets say that we have a background image:
I want to render few views with shared background:
I think that I can use CustomPainter and draw my background image translated by canvas offset, but I don't know how to get that property inside paint function:
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;
}
}
How can I calculate canvasOffsetX and canvasOffsetY?
I am using rows and columns to lay out my panels:
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

While I don't know that it is necessarily a great idea, it is possible. The best explanation is probably just to look at this code:
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(),
));
}
}
As I went through it I realized that it needs to be more complex than I originally thought - you have to deal with scaling the image to the size of the container etc. This does all that now, although I haven't tested it super extensively.
Also note that this gives no consideration to performance - it's almost for sure bad performance-wise.