Flutter Pamoka: konvertuoti Canvas į vaizdą

, Flutter galite konvertuoti a Canvas į vaizdą naudodami toImage() klasės metodą ui.Image. Kursas Canvas leidžia piešti grafiką ir figūras pasirinktame valdiklyje arba valdiklio tapybos fazėje CustomPainter. Nupiešę viską ant canvas, galite konvertuoti jį į vaizdą naudodami šį toImage() metodą.

Štai žingsnis po žingsnio vadovas, kaip konvertuoti a Canvas į vaizdą Flutter:

Importuokite reikiamus paketus

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

Sukurkite tinkintą valdiklį arba CustomPainter vietą, kurioje piešite 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;  
  }  
}  

Sukurkite funkciją konvertuoti canvas į vaizdą

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  
}  

Iškvieskite captureCanvasToImage() funkciją ir tvarkykite vaizdą

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  
}  

Šiame pavyzdyje sukūrėme tinkintą valdiklį pavadinimu MyCanvasWidget, kuris nubrėžia raudoną apskritimą centre canvas. Funkcija captureCanvasToImage() sukuria Canvas, piešia jį naudodama pasirinktinį valdiklį arba CustomPainter ir konvertuoja į ui.Image.

Atkreipkite dėmesį, kad canvas dydis turėtų būti nustatytas ir pasirinktiniame valdiklyje( MyCanvasWidget), ir toImage() metodu, kad būtų užtikrintas tinkamų piešinio ir vaizdo matmenų dydis. Šiame pavyzdyje mes nustatėme canvas 200x200 dydį, tačiau galite jį pakoreguoti pagal norimus matmenis.

Nepamirškite tvarkyti klaidų ir tinkamai laukti asinchroninių operacijų dirbdami su ateities ir asinchroninėmis funkcijomis. Taip pat būtinai paskambinkite, _convertCanvasToImage() kai reikia, kad užfiksuotumėte vaizdą canvas ir gautumėte vaizdą.