Flutter未知功能插件p5的使用（由于介绍为undefined，故以“未知功能”代替）

Flutter未知功能插件p5的使用（由于介绍为undefined，故以“未知功能”代替）

p5.dart 是一个用于 Flutter 的 Dart 实现的 Processing API。Processing 是一种用于学习如何在视觉艺术环境中编程的软件速记本和语言。

注意： 这是一个实验性库，仅实现了 Processing API 中的一小部分函数。类名和结构可能会在未来发生变化。您可以随意fork并玩转这段代码 :-)

开始使用

首先，在您的 Flutter 应用中添加 p5 包。有关如何使用包的帮助，请参阅 Flutter 的在线文档。

您需要实现包含 Processing 草图的部件，以及草图本身。

一个简单的部件树如下所示：

import 'package:flutter/material.dart';
import 'package:p5/p5.dart';  // 引入 p5 包
import 'sketch.dart';  // 引入草图文件

void main() => runApp(new MyApp());

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() {
    return new _MyHomePageState();
  }
}

class MyApp extends StatelessWidget {
  // 此部件是您的应用的根部件。
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'P5 Demo',
      theme: new ThemeData(
        // 这是您的应用的主题。
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'P5 Demo Home Page'),
    );
  }
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  MySketch sketch;
  PAnimator animator;

  @override
  void initState() {
    super.initState();
    sketch = new MySketch();  // 初始化草图
    // 需要一个动画器来持续调用草图中的 draw() 方法，
    // 否则它只会在触摸事件被检测到时才被调用。
    animator = new PAnimator(this);
    animator.addListener(() {
      setState(() {
        sketch.redraw();  // 重新绘制草图
      });
    });
    animator.run();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("P5 绘制！")),  // 设置应用栏标题
      backgroundColor: const Color.fromRGBO(200, 200, 200, 1.0),  // 设置背景颜色
      body: new Center(
        child: new PWidget(sketch),  // 显示草图部件
      ),
    );
  }
}

MySketch 类必须扩展 p5 包中的 PPainter 基类，并实现 setup() 和 draw() 函数，就像在 Processing 草图中一样：

class MySketch extends PPainter {
  void setup() {
    size(300, 300);  // 设置画布大小
  }

  void draw() {
    background(color(255, 255, 255));  // 设置背景颜色
  }
}

上述两段代码可以放在同一个 Dart 文件中，或者为了更好的可读性放在单独的文件中。

通过处理鼠标拖动，并将指针位置存储在一个包含 (x, y) 坐标的 PVector 对象列表中，可以实现一个简单的绘图草图。这些位置随后被用来绘制线条：

class MySketch extends PPainter {
  var strokes = new List<List<PVector>>();  // 存储绘制的线条

  void setup() {
    fullScreen();  // 全屏显示
  }

  void draw() {
    background(color(255, 255, 255));  // 设置背景颜色

    noFill();  // 不填充
    strokeWeight(10);  // 设置线条宽度
    stroke(color(10, 40, 200, 60));  // 设置线条颜色
    for (var stroke in strokes) {  // 遍历所有线条
      beginShape();  // 开始绘制形状
      for (var p in stroke) {  // 遍历每个点
        vertex(p.x, p.y);  // 绘制顶点
      }
      endShape();  // 结束绘制形状
    }
  }

  void mousePressed() {
    strokes.add([new PVector(mouseX, mouseY)]);  // 添加新线条起点
  }

  void mouseDragged() {
    var stroke = strokes.last;  // 获取最后一个线条
    stroke.add(new PVector(mouseX, mouseY));  // 添加线条上的新点
  }
}