close

Flutter Mafunzo: Geuza Canvas hadi Picha

Katika Flutter, unaweza kubadilisha a Canvas kuwa picha kwa kutumia toImage() mbinu kutoka kwa ui.Image darasa. Darasa Canvas hukuruhusu kuchora michoro na maumbo kwenye wijeti maalum au wakati wa hatua ya uchoraji wa wijeti CustomPainter. Mara tu unapochora kila kitu kwenye canvas, unaweza kuibadilisha kuwa picha kwa kutumia toImage() mbinu.

Hapa kuna mwongozo wa hatua kwa hatua wa jinsi ya kubadilisha a Canvas kuwa picha katika Flutter:

Ingiza vifurushi vinavyohitajika 

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

Unda wijeti maalum au CustomPainter mahali utachora kwenye 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;  
  }  
}

Unda chaguo la kukokotoa ili kubadilisha canvas kuwa picha 

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  
}

Piga captureCanvasToImage() kitendakazi na ushughulikie picha 

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  
}

Katika mfano huu, tuliunda wijeti maalum inayoitwa MyCanvasWidget, ambayo huchota duara nyekundu katikati ya canvas. Kitendakazi captureCanvasToImage() huunda a Canvas, kuchora juu yake kwa kutumia wijeti maalum au CustomPainter, na kisha kuibadilisha kuwa ui.Image.

Kumbuka kwamba canvas ukubwa unapaswa kuwekwa katika wijeti maalum( MyCanvasWidget) na toImage() mbinu ya kuhakikisha kuwa mchoro na picha zina vipimo sahihi. Katika mfano huu, tunaweka canvas ukubwa wa 200x200, lakini unaweza kurekebisha kwa vipimo unavyotaka.

Kumbuka kushughulikia makosa na kungojea utendakazi usiolingana vizuri unapofanya kazi na Futures na vitendakazi vya usawazishaji. Pia, hakikisha unapiga simu _convertCanvasToImage() inapofaa ili kunasa canvas na kupata picha.