Flutter გაკვეთილი: გადაიყვანეთ Canvas სურათზე

In Flutter, შეგიძლიათ გადაიყვანოთ a Canvas გამოსახულებად toImage() კლასის მეთოდის გამოყენებით ui.Image. კლასი Canvas საშუალებას გაძლევთ დახატოთ გრაფიკა და ფორმები მორგებულ ვიჯეტზე ან ვიჯეტის შეღებვის ფაზაში CustomPainter. მას შემდეგ რაც დახაზავთ ყველაფერს canvas, შეგიძლიათ გადაიყვანოთ იგი სურათად ამ toImage() მეთოდის გამოყენებით.

აქ მოცემულია ნაბიჯ-ნაბიჯ სახელმძღვანელო, თუ როგორ უნდა გადაიყვანოთ Canvas a გამოსახულება Flutter:

საჭირო პაკეტების იმპორტი

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

შექმენით მორგებული ვიჯეტი ან CustomPainter სადაც დახატავთ მასზე 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;  
  }  
}  

canvas შექმენით ფუნქცია სურათად გადასაყვანად

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  
}  

დარეკეთ captureCanvasToImage() ფუნქციას და დაამუშავეთ სურათი

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  
}  

ამ მაგალითში ჩვენ შევქმენით მორგებული ვიჯეტი სახელად MyCanvasWidget, რომელიც ხაზავს წითელ წრეს ცენტრში canvas. ფუნქცია captureCanvasToImage() ქმნის Canvas, ხატავს მასზე მორგებული ვიჯეტის ან CustomPainter, და შემდეგ გარდაქმნის მას ui.Image.

გაითვალისწინეთ, რომ canvas ზომა უნდა იყოს მითითებული როგორც მორგებულ ვიჯეტში( MyCanvasWidget) და toImage() მეთოდში, რათა დარწმუნდეთ, რომ ნახატსა და სურათს აქვს სწორი ზომები. ამ მაგალითში ჩვენ დავაყენეთ canvas ზომა 200x200, მაგრამ თქვენ შეგიძლიათ დაარეგულიროთ ის თქვენთვის სასურველ ზომებზე.

დაიმახსოვრეთ, რომ გაუმკლავდეთ შეცდომებს და სწორად დაელოდოთ ასინქრონულ ოპერაციებს Futures და ასინქრონული ფუნქციებთან მუშაობისას. ასევე, დარწმუნდით, რომ დარეკეთ საჭიროების შემთხვევაში სურათის _convertCanvasToImage() გადასაღებად და მისაღებად. canvas