Flutter Koyarwa: Canza Canvas zuwa Hoto

A cikin Flutter, zaku iya canza hoto Canvas zuwa hoto ta amfani da toImage() hanyar daga ui.Image aji. Ajin Canvas yana ba ku damar zana zane-zane da siffofi akan widget na al'ada ko lokacin zanen widget din CustomPainter. Da zarar kun zana komai akan canvas, zaku iya canza shi zuwa hoto ta amfani da toImage() hanyar.

Anan ga jagorar mataki-mataki kan yadda ake canza hoto Canvas zuwa hoto a Flutter:

Shigo da fakitin da ake buƙata

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

Ƙirƙiri widget na al'ada ko CustomPainter inda za ku zana a kan 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;  
  }  
}  

Ƙirƙiri aiki don canza shi canvas zuwa hoto

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  
}  

Kira captureCanvasToImage() aikin kuma rike hoton

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  
}  

A cikin wannan misalin, mun ƙirƙiri widget ɗin al'ada mai suna MyCanvasWidget, wanda ke zana da'irar ja a tsakiyar canvas. Aikin captureCanvasToImage() yana ƙirƙirar Canvas, zana shi ta amfani da widget ɗin al'ada ko CustomPainter, sannan ya canza shi zuwa ui.Image.

Lura cewa canvas yakamata a saita girman a cikin widget ɗin al'ada( MyCanvasWidget) da kuma toImage() hanyar don tabbatar da cewa zane da hoton suna da madaidaitan ma'auni. A cikin wannan misali, mun saita canvas girman zuwa 200x200, amma zaka iya daidaita shi zuwa girman da kake so.

Tuna don sarrafa kurakurai kuma jira ayyukan asynchronous yadda ya kamata lokacin aiki tare da Futures da ayyukan async. Hakanan, tabbatar da kiran _convertCanvasToImage() lokacin da ya dace don ɗaukar hoton canvas da samun hoton.