Flutter Tutorial: Tukar Canvas kepada Imej

Dalam Flutter, anda boleh menukar a Canvas kepada imej menggunakan toImage() kaedah daripada ui.Image kelas. Kelas ini Canvas membolehkan anda melukis grafik dan bentuk pada widget tersuai atau semasa fasa lukisan widget CustomPainter. Sebaik sahaja anda telah melukis segala-galanya pada canvas, anda kemudian boleh menukarnya kepada imej menggunakan toImage() kaedah tersebut.

Berikut ialah panduan langkah demi langkah tentang cara menukar a Canvas kepada imej dalam Flutter:

Import pakej yang diperlukan

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

Buat widget tersuai atau CustomPainter tempat anda akan melukis pada 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;  
  }  
}  

Buat fungsi untuk menukar canvas kepada imej

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  
}  

Panggil captureCanvasToImage() fungsi dan kendalikan imej

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  
}  

Dalam contoh ini, kami mencipta widget tersuai bernama MyCanvasWidget, yang melukis bulatan merah di tengah canvas. Fungsi captureCanvasToImage() mencipta Canvas, melukis padanya menggunakan widget tersuai atau CustomPainter, dan kemudian menukarnya kepada ui.Image.

Ambil perhatian bahawa canvas saiz harus ditetapkan dalam kedua-dua widget tersuai( MyCanvasWidget) dan toImage() kaedah untuk memastikan lukisan dan imej mempunyai dimensi yang betul. Dalam contoh ini, kami menetapkan canvas saiz kepada 200x200, tetapi anda boleh melaraskannya kepada dimensi yang anda inginkan.

Ingat untuk mengendalikan ralat dan tunggu operasi tak segerak dengan betul apabila bekerja dengan Niaga Hadapan dan fungsi tak segerak. Juga, pastikan untuk memanggil _convertCanvasToImage() apabila sesuai untuk menangkap canvas dan mendapatkan imej.