Flutter Εκμάθηση: Μετατροπή Canvas σε εικόνα

Στο Flutter, μπορείτε να μετατρέψετε το a Canvas σε εικόνα χρησιμοποιώντας τη toImage() μέθοδο από την ui.Image κλάση. Η Canvas τάξη σάς επιτρέπει να σχεδιάζετε γραφικά και σχήματα σε ένα προσαρμοσμένο γραφικό στοιχείο ή κατά τη φάση ζωγραφικής ενός γραφικού στοιχείου CustomPainter. Αφού σχεδιάσετε τα πάντα στο canvas, μπορείτε στη συνέχεια να το μετατρέψετε σε εικόνα χρησιμοποιώντας τη toImage() μέθοδο.

Ακολουθεί ένας οδηγός βήμα προς βήμα για το πώς να μετατρέψετε μια Canvas εικόνα σε εικόνα στο Flutter:

Εισαγάγετε τα απαιτούμενα πακέτα

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

Δημιουργήστε ένα προσαρμοσμένο γραφικό στοιχείο ή ένα σημείο CustomPainter όπου θα σχεδιάσετε 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;  
  }  
}  

Δημιουργήστε μια συνάρτηση για τη μετατροπή της canvas σε εικόνα

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  
}  

Καλέστε τη captureCanvasToImage() συνάρτηση και χειριστείτε την εικόνα

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  
}  

Σε αυτό το παράδειγμα, δημιουργήσαμε ένα προσαρμοσμένο γραφικό στοιχείο με το όνομα MyCanvasWidget, το οποίο σχεδιάζει έναν κόκκινο κύκλο στο κέντρο του canvas. Η captureCanvasToImage() συνάρτηση δημιουργεί ένα Canvas, σχεδιάζει πάνω του χρησιμοποιώντας το προσαρμοσμένο γραφικό στοιχείο ή CustomPainter και στη συνέχεια το μετατρέπει σε ένα ui.Image.

Σημειώστε ότι το canvas μέγεθος θα πρέπει να οριστεί τόσο στο προσαρμοσμένο γραφικό στοιχείο( MyCanvasWidget) όσο και στη toImage() μέθοδο για να διασφαλιστεί ότι το σχέδιο και η εικόνα έχουν τις σωστές διαστάσεις. Σε αυτό το παράδειγμα, ορίσαμε το canvas μέγεθος σε 200x200, αλλά μπορείτε να το προσαρμόσετε στις επιθυμητές διαστάσεις.

Θυμηθείτε να χειρίζεστε τα σφάλματα και να περιμένετε σωστά τις ασύγχρονες λειτουργίες όταν εργάζεστε με Futures και ασύγχρονες συναρτήσεις. Επίσης, φροντίστε να καλέσετε _convertCanvasToImage() όταν χρειάζεται για να τραβήξετε canvas και να λάβετε την εικόνα.