Rough.js 库的 Flutter 实现

Rough

Rough 是一个允许您以草图、手绘风格绘制的库。它是 Rough.js 的直接移植。

安装

在 pubspec.yaml 的 dependencies: 部分，添加以下行

dependencies:
  rough: <latest_version>

基本用法

目前仅支持通过canvas进行绘制。如果您想玩转Rough，这是一份基础文档。我无法保证库接口的非破坏性更改。

要绘制一个图形，您需要

创建一个DrawConfig对象来确定您的绘制外观。
创建一个Filler用于绘制对象时使用（您需要为填充提供一个配置和用于填充路径的DrawConfig）。
使用创建的DrawConfig和Filler创建一个Generator对象。这将定义一种绘制/填充样式。
调用Generator的绘制方法来创建Drawable。
使用Canvas的drawRough方法扩展在canvas上绘制Drawable。

这是一个绘制圆形的示例

//Create a `DrawConfig` object.
DrawConfig myDrawConfig = DrawConfig.build(
  roughness: 3,
  curveStepCount: 14,
  maxRandomnessOffset: 3,
);

//Create a `Filler` with a configuration (we reuse the drawConfig in this case).
FillerConfig myFillerConfig = FillerConfig(
    hachureGap: 8,
    hachureAngle: -20,
    drawConfig: myDrawConfig,
);
Filler myFiller = ZigZagFiller(myFillerConfig);

//Create a `Generator` with the created `DrawConfig` and `Filler`
Generator generator = Generator(
  myDrawConfig,
  myFiller,
);

//4. Build a circle `Drawable`.
Drawable figure = generator.circle(200, 200, 320);

//5. Paint the `Drawable` in the canvas.
Canvas.drawRough(figure, pathPaint, fillPaint);

这是结果

circle