Flutter Teagaisc: Tiontaigh Canvas go Íomhá

In Flutter, is féidir leat a thiontú Canvas go íomhá ag baint úsáide as an toImage() modh ón ui.Image rang. Ligeann an Canvas rang duit grafaic agus cruthanna a tharraingt ar ghiuirléid saincheaptha nó le linn na céime péintéireachta de ghiuirléid CustomPainter. Nuair a bheidh gach rud ar an, tarraingthe agat canvas, is féidir leat é a thiontú ina íomhá ag baint úsáide as an toImage() modh.

Seo treoir céim ar chéim ar conas Canvas íomhá a thiontú i Flutter:

Iompórtáil na pacáistí riachtanacha

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

Cruthaigh giuirléid saincheaptha nó CustomPainter áit a mbainfidh tú tarraingt ar an 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;  
  }  
}  

Cruthaigh feidhm chun an íomhá a thiontú canvas go híomhá

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  
}  

Cuir glaoch ar an captureCanvasToImage() bhfeidhm agus láimhseáil an íomhá

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  
}  

Sa sampla seo, chruthaíomar giuirléid saincheaptha darb ainm MyCanvasWidget, a tharraingíonn ciorcal dearg i lár an canvas. captureCanvasToImage() Cruthaíonn an fheidhm a Canvas, tarraingíonn sé air ag baint úsáide as an ghiuirléid saincheaptha nó CustomPainter, agus ansin é a thiontú go ui.Image.

Tabhair faoi deara gur chóir an canvas méid a shocrú sa ghiuirléid saincheaptha( MyCanvasWidget) agus sa toImage() mhodh araon chun a chinntiú go bhfuil na toisí cearta ag an líníocht agus an íomhá. Sa sampla seo, leagamar an canvas méid go 200x200, ach is féidir leat é a choigeartú de réir na dtoisí atá uait.

Cuimhnigh earráidí a láimhseáil agus fanacht ar na hoibríochtaí asincrónacha i gceart agus tú ag obair le Futures agus feidhmeanna asincrónacha. Chomh maith leis sin, déan cinnte glaoch _convertCanvasToImage() nuair is cuí chun an canvas íomhá a ghabháil agus a fháil.