Flutter如何使用pencil绘图工具

在Flutter中如何集成pencil绘图工具实现手绘功能？想开发一个支持手写笔记的应用，但不太清楚如何将pencil的压感和倾斜检测等特性与Flutter结合。是否需要通过平台通道调用原生API？有没有现成的插件或示例代码可以参考？

2 回复

Flutter中可使用CustomPaint和CustomPainter实现类似pencil的绘图功能。通过监听触摸事件，记录路径点，使用canvas.drawPath()绘制。可调整画笔粗细、颜色等属性。

更多关于Flutter如何使用pencil绘图工具的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 本身不直接集成 Pencil 绘图工具，但可以通过以下方式实现类似绘图功能或与绘图工具交互：

1. 使用绘图库（推荐）

Flutter 提供 CustomPaint 和 Canvas 类，用于自定义绘图：

import 'package:flutter/material.dart';

class DrawingCanvas extends StatefulWidget {
  @override
  _DrawingCanvasState createState() => _DrawingCanvasState();
}

class _DrawingCanvasState extends State<DrawingCanvas> {
  List<Offset> points = [];

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          points = [...points, details.localPosition];
        });
      },
      onPanEnd: (DragEndDetails details) => points.add(null),
      child: CustomPaint(
        painter: DrawingPainter(points),
        size: Size.infinite,
      ),
    );
  }
}

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

  DrawingPainter(this.points);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 4.0;

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

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

2. 第三方绘图包

使用现成插件简化开发：

  • flutter_sketch: 轻量级绘图板
  • painter: 支持笔触和图层 在 pubspec.yaml 添加依赖后直接调用组件。

3. 与 Apple Pencil 集成（iOS）

在 Info.plist 添加：

<key>UIRequiresFullScreen</key>
<true/>

通过 Listener 监听原始指针事件，支持压感：

Listener(
  onPointerDown: (PointerEvent event) {
    // 使用 event.pressure 获取压感数据（iOS）
  },
  child: CustomPaint(...),
)

4. 保存和导出

使用 PictureRecorder 和 Image 类将绘图转换为图片，通过 image_gallery_saver 保存到相册。

注意事项：

  • Android 对主动笔的支持需依赖设备厂商驱动。
  • 测试时建议使用真机（尤其iOS设备配Apple Pencil）。

通过组合这些方法，即可在 Flutter 中实现类似 Pencil 的绘图体验。

回到顶部