Flutter Opetusohjelma: Muunna Canvas kuvaksi

Flutter, voit muuntaa Canvas kuvan kuvaksi toImage() luokan menetelmällä ui.Image. Luokassa Canvas voit piirtää grafiikkaa ja muotoja mukautetulle widgetille tai widgetin maalausvaiheessa CustomPainter. Kun olet piirtänyt kaiken canvas, voit muuntaa sen kuvaksi menetelmällä toImage().

Tässä on vaiheittainen opas Canvas kuvan muuntamiseen kuvaksi Flutter:

Tuo tarvittavat paketit

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

Luo mukautettu widget tai paikka, CustomPainter johon voit piirtää 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;  
  }  
}  

Luo funktio muuntaaksesi canvas kuvaksi

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  
}  

Kutsu captureCanvasToImage() toiminto ja käsittele kuvaa

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  
}  

Tässä esimerkissä loimme mukautetun widgetin nimeltä MyCanvasWidget, joka piirtää punaisen ympyrän canvas. Funktio captureCanvasToImage() luo Canvas, piirtää siihen mukautetun widgetin tai avulla CustomPainter ja muuntaa sen sitten ui.Image.

Huomaa, että canvas koko tulee asettaa sekä mukautetussa widgetissä( MyCanvasWidget) että toImage() menetelmässä varmistaaksesi, että piirustuksen ja kuvan mitat ovat oikeat. Tässä esimerkissä asetimme canvas kooksi 200x200, mutta voit säätää sen haluamiisi mittoihin.

Muista käsitellä virheitä ja odottaa asynkronisia operaatioita kunnolla, kun työskentelet Futures- ja async-funktioiden kanssa. Muista myös soittaa _convertCanvasToImage() tarvittaessa kuvan tallentamiseksi canvas ja kuvan saamiseksi.