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 दुवैमा साइज सेट हुनुपर्छ भन्ने कुरा ध्यान दिनुहोस् । यस उदाहरणमा, हामीले आकारलाई 200x200 मा सेट गर्छौं, तर तपाईं यसलाई आफ्नो मनपर्ने आयामहरूमा समायोजन गर्न सक्नुहुन्छ। MyCanvasWidget toImage() canvas

Futures र async प्रकार्यहरूसँग काम गर्दा त्रुटिहरू ह्यान्डल गर्न र एसिन्क्रोनस अपरेसनहरू ठीकसँग पर्खन सम्झनुहोस्। साथै, छवि _convertCanvasToImage() खिच्न र प्राप्त गर्न उपयुक्त हुँदा कल गर्न निश्चित गर्नुहोस् । canvas