创建逼真的自由手绘线条 —— Perfect Freehand for Dart

创建逼真的自由手绘线条 —— Perfect Freehand for Dart

在数字绘画和设计领域，自由手绘线条的自然感与压力敏感性一直是关键要素。Perfect Freehand 是一个出色的 Dart 库，它允许您绘制出几乎完美的、基于压力的自由手绘线条。这个库源自 JavaScript 版本的 Perfect Freehand，并已被精心移植到 Dart 平台。

该库的核心是 getStroke 函数，它可以基于一系列输入点生成多边形的点数组。首先，它创建一组基于输入点（灰色）的样条点（红色），然后产生轮廓点（蓝色）。您可以使用任何你喜欢的技术来渲染结果。

安装

在您的 Dart 或 Flutter 项目中安装 Perfect Freehand 非常简单：

对于纯 Dart 项目：

dart pub add perfect_freehand

对于 Flutter 项目：

flutter pub add perfect_freehand

更多详情可访问 pub.dev。

使用

getStroke 函数接受点数组和一些选项参数，返回一个描绘笔划轮廓的点数组：

import 'package:perfect_freehand/perfect_freehand.dart';

List<Point> myPoints = [
  Point(0, 0),
  Point(1, 2),
  // ...
];

final stroke = getStroke(myPoints);

您可以提供诸如 size、thinning 和 smoothing 等选项参数以调整效果：

```dart` final stroke = getStroke( myPoints, size: 16, thinning: 0.7, smoothing: 0.5, // ... );

对于真实的压力量，可以在每个点上添加第三个参数表示压力值：

```dart
List<Point> myPoints = [
  Point(0, 0, 0.2),
  Point(1, 2, 0.3),
  Point(2, 4, 0.4),
  // ...
];

final stroke = getStroke(myPoints, simulatePressure: false);

选项参数

该库提供了多种自定义笔画外观的方式，如控制笔刷大小、边缘柔和度和输入点的波动程度等。详细的选项说明可在项目文档中找到。

渲染

getStroke 返回的是一系列描边点，您需要自行决定如何在画布上呈现它们。参考示例项目，了解如何在 Flutter 中使用 CustomPainter 绘制这些点。

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

class StrokePainter extends CustomPainter {
  final List<Point> points;

  StrokePainter({ required this.points });

  @override
  void paint(Canvas canvas, Size size) {
    // ...
  }

  @override
  bool shouldRepaint(StrokePainter oldDelegate) {
    return true;
  }
}

进阶使用

除了 getStroke，Perfect Freehand 还提供了 getStrokePoints 和 getOutlinePoints 函数，用于更精细的控制线条生成过程。

社区支持与作者

如果您需要帮助或有任何想法，请在项目仓库中开启新问题，或者参与讨论。此库遵循 MIT 许可，但商业用途请考虑成为赞助者以支持开发。

总结

Perfect Freehand for Dart 提供了强大的工具，让在屏幕上手绘更加真实且富有表现力。无论是游戏开发中的手势识别，还是专业绘图应用的笔刷模拟，这个库都能轻松应对。其高度可定制性，使其能够满足各种应用场景。现在就试一试，释放你的创作灵感吧！