Flutter Öğretici: Canvas Resme Dönüştür

içinde, sınıfın yöntemini kullanarak bir görüntüye Flutter dönüştürebilirsiniz. Sınıf, özel bir pencere öğesinde veya bir pencere öğesinin boyama aşamasında grafikler ve şekiller çizmenize olanak tanır. Üzerinde her şeyi çizdikten sonra, yöntemi kullanarak onu bir görüntüye dönüştürebilirsiniz. Canvas toImage() ui.Image Canvas CustomPainter canvas toImage()

Canvas İşte bir görüntüyü bir görüntüye nasıl dönüştüreceğinize dair adım adım bir kılavuz Flutter:

Gerekli paketleri içe aktarın

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

Özel bir widget veya CustomPainter çizim yapacağınız bir yer oluşturun. 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 Bir görüntüye dönüştürmek için bir işlev oluşturun

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  
}  

İşlevi çağırın captureCanvasToImage() ve görüntüyü işleyin

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 Bu örnekte, ortasında kırmızı bir daire çizen adında özel bir pencere öğesi oluşturduk canvas. İşlev captureCanvasToImage() bir a oluşturur Canvas, özel parçacığı veya öğesini kullanarak üzerine çizim yapar CustomPainter ve ardından onu bir ui.Image.

Çizim ve resmin doğru boyutlara sahip olduğundan emin olmak için canvas boyutun hem özel widget'ta( MyCanvasWidget) hem de yöntemde ayarlanması gerektiğini unutmayın. toImage() Bu örnekte boyutu canvas 200x200 olarak ayarladık ama siz istediğiniz boyutlara ayarlayabilirsiniz.

Futures ve zaman uyumsuz işlevlerle çalışırken hataları işlemeyi ve eşzamansız işlemleri düzgün bir şekilde beklemeyi unutmayın. _convertCanvasToImage() Ayrıca, görüntüyü yakalamak ve elde etmek için uygun olduğunda aradığınızdan emin olun canvas.