我正在使用 Flutter 创建一个笔记应用程序,并使用 CustomPainter 作为绘图部分。为了获得更好的性能,CustomPaint 会在一些 Lines 之后转换为图像。现在图像的问题是放大时,线条(现在是图像)非常像素化。现在我解决这个问题的第一个想法是在缩放后重新绘制线条。
但是,如果它们的分辨率仍然很差,我该如何正确地重绘它们呢?另外,是否可以只重绘当前在屏幕上可见的线条?
一切都用提供约束+像素比(比例)的布局构建器包装:
LayoutBuilder(builder: (context, constraints) {
size = constraints.biggest;
scale = MediaQuery.of(context).devicePixelRatio;
我是如何进行缩放的:
GestureDetector(
onScaleStart: (details) {
_initialFocalPoint = details.focalPoint;
_initialScale = _scale;
},
onScaleUpdate: (details) {
setState(() {
_sessionOffset =
details.focalPoint - _initialFocalPoint;
_scale = _initialScale * details.scale;
});
},
onScaleEnd: (details) {
setState(() {
_offset += _sessionOffset;
_sessionOffset = Offset.zero;
});
},
child: Transform.translate(
offset: _offset + _sessionOffset,
child: Transform.scale(
scale: _scale,
child: ....
我的 CustomPaint 出现在 Transform 小部件之后:
CustomPaint(
size: size!,
willChange: true,
painter: DrawingViewPainter(
pointsList: drawingNotifier.points,
image: image
),
);
使用 custpmpaint 到图像转换器的片段(绘制的线被转换为图像以节省性能):
ui.PictureRecorder recorder = ui.PictureRecorder();
Canvas canvas = ui.Canvas(recorder);
canvas.scale(scale!);
DrawingViewPainter(image: image, pointsList: points).paint(canvas, size!);
ui.Picture picture = recorder.endRecording();
ui.Image newImage = await picture.toImage(
(size!.width * scale!).ceil(),
(size!.height * scale!).ceil(),
);
......
image = newImage
带有图像抽屉的 Custompaint 部分:
canvas.drawImageRect(
image!,
Offset.zero & Size(image!.width.toDouble(), image!.height.toDouble()),
Offset.zero & size,
Paint());
}
(对不起大量的代码)
如果您知道更好的方法,请告诉我。