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 ਆਕਾਰ ਨੂੰ 200x200 ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਇਸਨੂੰ ਆਪਣੇ ਲੋੜੀਂਦੇ ਮਾਪਾਂ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦੇ ਹੋ।

ਫਿਊਚਰਜ਼ ਅਤੇ ਅਸਿੰਕ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣਾ ਅਤੇ ਅਸਿੰਕ੍ਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਦੀ ਸਹੀ ਢੰਗ ਨਾਲ ਉਡੀਕ ਕਰਨਾ ਯਾਦ ਰੱਖੋ। ਨਾਲ ਹੀ, ਚਿੱਤਰ ਨੂੰ _convertCanvasToImage() ਕੈਪਚਰ ਕਰਨ ਅਤੇ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਜਦੋਂ ਉਚਿਤ ਹੋਵੇ ਤਾਂ ਕਾਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ । canvas