Flutter图像绘制与导出插件magic_canvas_with_image_export的使用

本插件允许从canvas导出图像，Canvas由magic canvas库使用。

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  magic_canvas_with_image_export: ^1.0.0

然后运行flutter pub get来获取该包。

使用示例

首先，确保你已经安装了必要的依赖，并且在你的项目中导入了该插件：

import 'package:magic_canvas_with_image_export/magic_canvas_with_image_export.dart';

创建一个简单的画布

接下来，我们创建一个基本的画布，并允许用户在上面绘制图像。

import 'package:flutter/material.dart';
import 'package:magic_canvas_with_image_export/magic_canvas_with_image_export.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Magic Canvas with Image Export'),
        ),
        body: MagicCanvasWithImageExport(),
      ),
    );
  }
}

绘制图像

在MagicCanvasWithImageExport类中，我们将实现基本的绘图功能。用户可以点击并拖动鼠标或手指在画布上绘制线条。

class MagicCanvasWithImageExport extends StatefulWidget {
  @override
  _MagicCanvasWithImageExportState createState() => _MagicCanvasWithImageExportState();
}

class _MagicCanvasWithImageExportState extends State<MagicCanvasWithImageExport> {
  List<Offset> points = [];
  bool isDrawing = false;

  void _startDraw(PointerDownEvent details) {
    setState(() {
      points = [details.position];
      isDrawing = true;
    });
  }

  void _draw(PointerMoveEvent details) {
    if (isDrawing) {
      setState(() {
        points = [...points, details.position];
      });
    }
  }

  void _endDraw(PointerUpEvent details) {
    setState(() {
      isDrawing = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: _startDraw,
      onPointerMove: _draw,
      onPointerUp: _endDraw,
      child: CustomPaint(
        size: Size.infinite,
        painter: DrawingPainter(points),
      ),
    );
  }
}

class DrawingPainter extends CustomPainter {
  final List<Offset> points;

  DrawingPainter(this.points);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;

    for (int i = 0; i < points.length - 1; i++) {
      canvas.drawLine(points[i], points[i + 1], paint);
    }
  }

  @override
  bool shouldRepaint(DrawingPainter oldDelegate) => oldDelegate.points != points;
}

导出图像

最后，我们可以添加一个按钮，用于导出当前绘制的图像。

class MagicCanvasWithImageExport extends StatefulWidget {
  @override
  _MagicCanvasWithImageExportState createState() => _MagicCanvasWithImageExportState();
}

class _MagicCanvasWithImageExportState extends State<MagicCanvasWithImageExport> {
  // 其他方法保持不变...

  Future<void> _exportImage() async {
    RenderRepaintBoundary boundary = context.findRenderObject() as RenderRepaintBoundary;
    if (boundary != null) {
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      Uint8List pngBytes = byteData.buffer.asUint8List();

      // 保存或分享图像
      final directory = await getApplicationDocumentsDirectory();
      File file = File("${directory.path}/drawing.png");
      await file.writeAsBytes(pngBytes);
      print("Image saved at ${file.path}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Listener(
          onPointerDown: _startDraw,
          onPointerMove: _draw,
          onPointerUp: _endDraw,
          child: CustomPaint(
            size: Size.infinite,
            painter: DrawingPainter(points),
          ),
        ),
        ElevatedButton(
          onPressed: _exportImage,
          child: Text('导出图像'),
        ),
      ],
    );
  }
}

以上代码展示了如何使用magic_canvas_with_image_export插件在Flutter中创建一个可绘制的画布，并将其导出为图像。希望这对你有所帮助！