Flutter手指绘图插件 finger_painter 的使用

finger_painter 是一个允许用户通过手指在屏幕上绘制不同类型的笔触，并支持多种混合模式的Flutter插件。绘制的结果可以作为位图或点列表读取，例如用于地图标注。

主要特性

• 三种类型的画笔（铅笔、画笔1、画笔2）
• 支持设置最小和最大笔触宽度
• 获取最后绘制的图像和绘制点
• 设置背景小部件（如Google Map）
• 设置背景颜色
• 使用图像混合模式进行绘制

开始使用

首先，在您的项目中添加 finger_painter 插件：

dependencies:
  finger_painter: ^latest_version

然后运行 flutter pub get 来安装依赖。

初始化 PainterController

在 initState() 方法中初始化 PainterController：

[@override](/user/override)
void initState() {
  super.initState();
  painterController = PainterController()
    ..setPenType(PenType.pencil)
    ..setStrokeColor(Colors.black)
    ..setMinStrokeWidth(3)
    ..setMaxStrokeWidth(10)
    ..setBlurSigma(0.0)
    ..setBlendMode(ui.BlendMode.srcOver);
}

在Widget树中插入Painter

将 Painter 小部件插入到您的Widget树中：

Painter(
  controller: painterController,
  backgroundColor: Colors.green.withOpacity(0.4),
  size: const Size(300, 300),
  child: Image.asset('assets/your_image.png'),
  onDrawingEnded: (Uint8List bytes) async {
    // 处理绘制结束后的逻辑
  },
),

完整示例Demo

下面是一个完整的示例代码，展示了如何使用 finger_painter 进行手指绘图：

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late PainterController painterController;

  [@override](/user/override)
  void initState() {
    super.initState();
    painterController = PainterController()
      ..setStrokeColor(Colors.black)
      ..setMinStrokeWidth(3)
      ..setMaxStrokeWidth(15)
      ..setBlurSigma(0.0)
      ..setPenType(PenType.paintbrush2)
      ..setBlendMode(ui.BlendMode.srcOver);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Finger Painter Demo')),
        body: Column(
          children: [
            const SizedBox(height: 30),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Painter(
                  controller: painterController,
                  backgroundColor: const Color(0xFFF0F0F0),
                  onDrawingEnded: (bytes) async {
                    print('${painterController.getPoints()?.length} drawn points');
                  },
                  size: const Size(double.infinity, 250),
                ),
              ),
            ),
            Controls(pc: painterController),
          ],
        ),
      ),
    );
  }
}

class Controls extends StatelessWidget {
  final PainterController pc;

  const Controls({Key? key, required this.pc}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            for (int i = 0; i < PenType.values.length; i++)
              OutlinedButton(
                child: Text(PenType.values[i].name),
                style: ButtonStyle(
                  backgroundColor: pc.getState()?.penType.index == i
                      ? MaterialStateProperty.all(Colors.greenAccent.withOpacity(0.5))
                      : MaterialStateProperty.all(Colors.transparent),
                ),
                onPressed: () {
                  pc.setPenType(PenType.values[i]);
                },
              ),
          ],
        ),
        const SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            FloatingActionButton(
              backgroundColor: Colors.red,
              onPressed: () => pc.setStrokeColor(Colors.red),
            ),
            FloatingActionButton(
              backgroundColor: Colors.yellowAccent,
              onPressed: () => pc.setStrokeColor(Colors.yellowAccent),
            ),
            FloatingActionButton(
              backgroundColor: Colors.black,
              onPressed: () => pc.setStrokeColor(Colors.black),
            ),
            FloatingActionButton(
              backgroundColor: Colors.green,
              onPressed: () => pc.setStrokeColor(Colors.green),
            ),
            FloatingActionButton(
              backgroundColor: Colors.blue,
              child: const Icon(Icons.image),
              onPressed: () async {
                // 加载背景图片
                Uint8List image = await rootBundle.load('assets/dash.png').then((data) => data.buffer.asUint8List());
                pc.setBackgroundImage(image);
              },
            ),
            FloatingActionButton(
              backgroundColor: Colors.red,
              child: const Icon(Icons.delete_outline),
              onPressed: () => pc.clearContent(clearColor: const Color(0xfff0f0ff)),
            ),
          ],
        ),
      ],
    );
  }
}