Flutter: перерисовывать линии Custompaint после изменения масштаба
Я создаю приложение для заметок с помощью Flutter и использую CustomPainter для рисования. Для лучшей производительности CustomPaint преобразуется в изображение после нескольких строк. Теперь проблема с изображениями заключается в том, что при увеличении масштаба линии (которые сейчас являются изображениями) очень пикселизированы. Моя первая идея решить эту проблему - перерисовать линии после масштабирования.
Но как мне их правильно перерисовать, чтобы у них все еще не было плохого разрешения? Кроме того, можно ли перерисовать только те строки, которые в данный момент видны на экране?
все обернуто компоновщиком макетов, который предоставляет ограничения + соотношение пикселей (масштаб):
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 to image (нарисованные линии преобразуются в изображения для экономии производительности):
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());
}
(извините за огромное количество кода)
Если вы знаете способ получше, дайте мне знать.