Flutter ٹیوٹوریل: Canvas تصویر میں تبدیل کریں۔

میں Flutter ، آپ کلاس سے طریقہ Canvas استعمال کرتے ہوئے a کو تصویر میں تبدیل کر سکتے ہیں ۔ کلاس آپ کو اپنی مرضی کے ویجیٹ پر یا ویجیٹ کی پینٹنگ کے مرحلے کے دوران گرافکس اور شکلیں بنانے کی اجازت دیتی ہے ۔ ایک بار جب آپ نے پر سب کچھ کھینچ لیا ہے ، تو آپ طریقہ استعمال کرتے ہوئے اسے تصویر میں تبدیل کر سکتے ہیں ۔ 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 سائز کو 200x200 پر سیٹ کیا ہے، لیکن آپ اسے اپنے مطلوبہ جہتوں میں ایڈجسٹ کر سکتے ہیں۔

غلطیوں کو ہینڈل کرنا یاد رکھیں اور فیوچرز اور async فنکشنز کے ساتھ کام کرتے وقت اسینکرونس آپریشنز کا صحیح طریقے سے انتظار کریں۔ اس کے علاوہ، اس بات کو یقینی بنائیں کہ _convertCanvasToImage() جب مناسب ہو تو کال کریں canvas اور تصویر حاصل کریں۔