Flutter Tutorial: Convertiți Canvas în imagine

În Flutter, puteți converti o Canvas imagine într-o imagine folosind toImage() metoda din ui.Image clasă. Clasa Canvas vă permite să desenați grafice și forme pe un widget personalizat sau în timpul fazei de pictare a unui widget CustomPainter. După ce ați desenat totul pe canvas, îl puteți converti într-o imagine folosind toImage() metoda.

Iată un ghid pas cu pas despre cum să convertiți o Canvas imagine într-o imagine în Flutter:

Importați pachetele necesare

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

Creați un widget personalizat sau un CustomPainter loc în care veți desena pe 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;  
  }  
}  

Creați o funcție pentru a converti canvas într-o imagine

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  
}  

Apelați captureCanvasToImage() funcția și gestionați imaginea

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  
}  

În acest exemplu, am creat un widget personalizat numit MyCanvasWidget, care desenează un cerc roșu în centrul canvas. Funcția captureCanvasToImage() creează un Canvas, desenează pe el utilizând widgetul personalizat sau CustomPainter, apoi îl convertește într-un ui.Image.

Rețineți că canvas dimensiunea trebuie setată atât în ​​widgetul personalizat( MyCanvasWidget) cât și în toImage() metoda pentru a vă asigura că desenul și imaginea au dimensiunile corecte. În acest exemplu, am setat dimensiunea canvas la 200x200, dar o puteți ajusta la dimensiunile dorite.

Nu uitați să gestionați erorile și să așteptați corect operațiunile asincrone atunci când lucrați cu funcții Futures și asincrone. De asemenea, asigurați-vă că sunați _convertCanvasToImage() atunci când este cazul pentru a captura canvas și a obține imaginea.