Flutter البرنامج التعليمي: التحويل Canvas إلى صورة

في Flutter ، يمكنك تحويل صورة Canvas إلى صورة باستخدام toImage() الطريقة من ui.Image الفصل. يسمح لك الفصل Canvas برسم رسومات وأشكال على عنصر واجهة مستخدم مخصص أو أثناء مرحلة الرسم لعنصر واجهة مستخدم CustomPainter. بمجرد رسم كل شيء على canvas ، يمكنك بعد ذلك تحويله إلى صورة باستخدام toImage() الطريقة.

فيما يلي دليل تفصيلي حول كيفية تحويل صورة Canvas إلى صورة في 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 الحجم على 200 × 200 ، ولكن يمكنك تعديله وفقًا للأبعاد التي تريدها.

تذكر معالجة الأخطاء وانتظار العمليات غير المتزامنة بشكل صحيح عند العمل مع وظائف Futures وغير المتزامنة. تأكد أيضًا من الاتصال _convertCanvasToImage() عند الاقتضاء لالتقاط canvas الصورة والحصول عليها.