Flutter Vadnica: Pretvori Canvas v sliko

V Flutter, lahko pretvorite Canvas v sliko z uporabo toImage() metode iz ui.Image razreda. Razred Canvas vam omogoča risanje grafike in oblik na gradniku po meri ali med fazo slikanja gradnika CustomPainter. Ko narišete vse na canvas, ga lahko pretvorite v sliko z uporabo toImage() metode.

Tukaj je vodnik po korakih za pretvorbo a Canvas v sliko v Flutter:

Uvozite zahtevane pakete

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

Ustvarite pripomoček po meri ali CustomPainter mesto, na katerem boste risali 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;  
  }  
}  

Ustvarite funkcijo za pretvorbo canvas v sliko

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  
}  

Pokličite captureCanvasToImage() funkcijo in obdelajte sliko

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  
}  

V tem primeru smo ustvarili pripomoček po meri z imenom MyCanvasWidget, ki nariše rdeč krog v središču canvas. Funkcija captureCanvasToImage() ustvari Canvas, ga nariše z gradnikom po meri ali CustomPainter in ga nato pretvori v ui.Image.

Upoštevajte, da canvas je treba velikost nastaviti tako v gradniku po meri( MyCanvasWidget) kot v toImage() metodi, da zagotovite, da imata risba in slika pravilne dimenzije. V tem primeru smo canvas velikost nastavili na 200x200, vendar jo lahko prilagodite želenim dimenzijam.

Pri delu s terminskimi in asinhronimi funkcijami ne pozabite obravnavati napak in pravilno počakati na asinhrone operacije. Poskrbite tudi, da pokličete _convertCanvasToImage(), ko je to primerno, da zajamete canvas in pridobite sliko.