Flutter Opplæring: Konverter Canvas til bilde

I Flutter kan du konvertere a Canvas til et bilde ved å bruke toImage() metoden fra ui.Image klassen. Klassen Canvas lar deg tegne grafikk og former på en egendefinert widget eller under malefasen av en widgets CustomPainter. Når du har tegnet alt på canvas, kan du konvertere det til et bilde ved å bruke toImage() metoden.

Her er en trinn-for-trinn-guide for hvordan du konverterer en Canvas til et bilde i Flutter:

Importer de nødvendige pakkene

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

Lag en egendefinert widget eller en CustomPainter hvor du skal tegne på 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;  
  }  
}  

Lag en funksjon for å konvertere canvas til et bilde

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  
}  

Ring captureCanvasToImage() funksjonen og håndter bildet

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  
}  

I dette eksemplet har vi laget en egendefinert widget kalt MyCanvasWidget, som tegner en rød sirkel i midten av canvas. Funksjonen captureCanvasToImage() oppretter en Canvas, tegner på den ved hjelp av den egendefinerte widgeten eller CustomPainter, og konverterer den deretter til en ui.Image.

Vær oppmerksom på at canvas størrelsen bør angis i både den egendefinerte widgeten( MyCanvasWidget) og toImage() metoden for å sikre at tegningen og bildet har riktige dimensjoner. I dette eksemplet setter vi canvas størrelsen til 200x200, men du kan justere den til ønsket mål.

Husk å håndtere feil og avvent de asynkrone operasjonene ordentlig når du arbeider med Futures og asynkrone funksjoner. Sørg også for å ringe _convertCanvasToImage() når det er aktuelt for å fange canvas og få bildet.