Flutter Tutorial: Konverter Canvas til billede

I Flutter kan du konvertere a Canvas til et billede ved hjælp af toImage() metoden fra ui.Image klassen. Klassen Canvas giver dig mulighed for at tegne grafik og figurer på en brugerdefineret widget eller under malefasen af ​​en widgets CustomPainter. Når du har tegnet alt på canvas, kan du derefter konvertere det til et billede ved hjælp af toImage() metoden.

Her er en trin-for-trin guide til, hvordan du konverterer en Canvas til et billede i Flutter:

Importer de nødvendige pakker

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

Opret en brugerdefineret widget eller en CustomPainter hvor du vil 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;  
  }  
}  

Opret en funktion til at konvertere canvas til et billede

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  
}  

Kald captureCanvasToImage() funktionen og håndter billedet

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 eksempel oprettede vi en brugerdefineret widget ved navn MyCanvasWidget, som tegner en rød cirkel i midten af canvas ​​. Funktionen captureCanvasToImage() opretter en Canvas, tegner på den ved hjælp af den brugerdefinerede widget eller CustomPainter, og konverterer den derefter til en ui.Image.

Bemærk, at canvas størrelsen skal indstilles i både den tilpassede widget( MyCanvasWidget) og toImage() metoden for at sikre, at tegningen og billedet har de korrekte mål. I dette eksempel sætter vi canvas størrelsen til 200x200, men du kan justere den til dine ønskede mål.

Husk at håndtere fejl og afvent de asynkrone operationer korrekt, når du arbejder med Futures og asynkrone funktioner. Sørg også for at ringe, _convertCanvasToImage() når det er relevant for at fange canvas og få billedet.