Flutter Samouczek: Konwertuj Canvas na obraz

W Flutter, możesz przekonwertować a Canvas na obraz za pomocą toImage() metody z ui.Image klasy. Klasa Canvas umożliwia rysowanie grafiki i kształtów na niestandardowym widgecie lub podczas fazy malowania widżetu CustomPainter. Po narysowaniu wszystkiego na canvas, możesz przekonwertować go na obraz za pomocą toImage() metody.

Oto przewodnik krok po kroku, jak przekonwertować a Canvas na obraz w Flutter:

Zaimportuj wymagane pakiety

import 'package:flutter/material.dart';  
import 'dart:ui' as ui;  

Utwórz niestandardowy widżet lub widżet, CustomPainter na którym będziesz rysować canvas

class MyCanvasWidget extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return CustomPaint(  
      size: Size(200, 200), // Set the size of the canvas  
      painter: MyCanvasPainter(),  
   );  
  }  
}  
  
class MyCanvasPainter extends CustomPainter {  
  @override  
  void paint(Canvas canvas, Size size) {  
    // Draw on the canvas here  
    // For example, draw a red circle at the center  
    final Paint paint = Paint()..color = Colors.red;  
    final double centerX = size.width / 2;  
    final double centerY = size.height / 2;  
    final double radius = 50.0;  
    canvas.drawCircle(Offset(centerX, centerY), radius, paint);  
  }  
  
  @override  
  bool shouldRepaint(CustomPainter oldDelegate) {  
    return false;  
  }  
}  

Utwórz funkcję do konwersji canvas na obraz

Future<ui.Image> captureCanvasToImage() async {  
  final pictureRecorder = ui.PictureRecorder();  
  final canvas = Canvas(pictureRecorder);  
  
  // Create the custom widget or draw on the canvas using a CustomPainter  
  final widget = MyCanvasWidget();  
  widget.paint(canvas, Size(200, 200)); // Set the size of the canvas to match the custom widget size  
  
  final recordedPicture = pictureRecorder.endRecording();  
  return await recordedPicture.toImage(200, 200); // Set the image size, should match the canvas size  
}  

Wywołaj captureCanvasToImage() funkcję i obsłuż obraz

void _convertCanvasToImage() async {  
  ui.Image image = await captureCanvasToImage();  
  // Use the image here as needed, such as displaying it in an `Image` widget or saving it to a file  
}  

W tym przykładzie utworzyliśmy niestandardowy widżet o nazwie MyCanvasWidget, który rysuje czerwone kółko na środku canvas. Funkcja captureCanvasToImage() tworzy plik Canvas, rysuje na nim za pomocą niestandardowego widżetu lub CustomPainter, a następnie konwertuje go na plik ui.Image.

Należy pamiętać, że canvas rozmiar należy ustawić zarówno w widżecie niestandardowym( MyCanvasWidget), jak iw toImage() metodzie, aby upewnić się, że rysunek i obraz mają prawidłowe wymiary. W tym przykładzie ustawiliśmy canvas rozmiar na 200x200, ale możesz dostosować go do żądanych wymiarów.

Pamiętaj o prawidłowej obsłudze błędów i oczekiwaniu na operacje asynchroniczne podczas pracy z Futures i funkcjami asynchronicznymi. Pamiętaj też, aby zadzwonić _convertCanvasToImage() w razie potrzeby, aby uchwycić canvas i uzyskać obraz.