Flutter图像处理插件flutter_processing的使用
Flutter图像处理插件flutter_processing的使用
flutter_processing 是一个将 Processing 移植到 Flutter 的项目。本项目与 Processing 项目或相关组织没有任何关联。
flutter_processing 的目标是提供一个类似于 Processing 的简单学习环境，但同时具备生产就绪的用户界面工具包，称为 Flutter。传统的 Processing 在底层语言方面几乎没有专业价值，而 flutter_processing 则使得底层工具 Flutter 足以胜任应用界面开发的工作。flutter_processing 既是一个教育工具，也是一个就业机会。
如果你想了解如何实现这个项目，几乎每一个更改都被记录并发布在了 SuperDeclarative! 的 YouTube 频道上。
若想查看已移植到 Flutter 的 Processing API，请参阅 API Checklist。
获取开始
要玩一些演示，可以克隆此仓库并运行示例应用程序！
要在 Flutter 中绘制画布并用草图进行绘画，就像在 Processing 中一样，只需显示 Processing 小部件并实现一个 Sketch。
void main() {
runApp(
MaterialApp(
home: Processing(
sketch: Sketch.simple(
setup: (sketch) async {
// 在此处执行典型的 Sketch 设置操作。
// 可以在此处调用提供的 sketch 对象上的方法。
},
draw: (sketch) async {
// 在此处执行典型的 Sketch 绘制操作。
// 可以在此处调用提供的 sketch 对象上的方法。
},
),
),
),
);
}
为了在 Sketch 中保留和访问变量，或者以更传统的方式实现 Sketch，可以继承 Sketch 类：
void main() {
runApp(
MaterialApp(
home: Processing(
sketch: MySketch(),
),
),
);
}
class MySketch extends Sketch {
[@override](/user/override)
Future<void> setup() async {
// 在此处执行设置操作。
}
[@override](/user/override)
Future<void> draw() async {
// 在此处执行绘制操作。
}
}
示例代码
以下是一个完整的示例代码，展示了如何使用 flutter_processing 插件来创建一个简单的绘图应用程序。
import 'package:flutter/material.dart' hide Image;
import 'package:flutter_processing/flutter_processing.dart';
void main() {
runApp(FlutterProcessingExampleApp());
}
class FlutterProcessingExampleApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Processing Example',
theme: ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.dark(
primary: Colors.purple,
onPrimary: Colors.white,
),
),
home: ProcessingDemosScreen(
demos: [
DemoMenuGroup(title: 'Example', items: [
DemoMenuItem(
title: 'Empty Sketch',
builder: (context, sketchController) {
return EmptySketchDemo(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: 'PImage Filters',
builder: (context, sketchController) {
return PImageFiltersSketchDemo(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: 'PImage Blend Modes',
builder: (context, sketchController) {
return PImageBlendModesSketchDemo(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: 'Hacking Demo',
builder: (context, sketchController) {
return HackingDemo(
sketchDemoController: sketchController,
);
},
),
]),
DemoMenuGroup(
title: 'SuperDeclarative',
items: [
DemoMenuItem(
title: 'Circle Art',
builder: (_, sketchController) {
return ProcessingDemo(
createSketch: () => ColoredCirclesSketch(
width: 1600,
height: 600,
),
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: 'Perlin Noise',
builder: (_, sketchController) {
return ProcessingDemo(
createSketch: () => PerlinNoiseDemoSketch(
width: 200,
height: 200,
animateZIndex: true,
),
sketchDemoController: sketchController,
);
},
),
],
),
DemoMenuGroup(
title: 'The Coding Train',
items: [
DemoMenuItem(
title: '001: Starfield',
builder: (_, sketchController) {
return CodingTrainStarfieldScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '003: Snake Game',
builder: (_, sketchController) {
return CodingTrainSnakeGameScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '004: Purple Rain',
builder: (_, sketchController) {
return CodingTrainPurpleRainScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '006: Mitosis Simulation',
builder: (_, sketchController) {
return CodingTrainMitosisScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '028: Metaballs',
builder: (_, sketchController) {
return ProcessingDemo(
createSketch: () => MetaBallsSketch(),
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '030: Phyllotaxis',
builder: (_, sketchController) {
return ProcessingDemo(
createSketch: () => PhyllotaxisSketch(),
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '031: Flappy Bird',
builder: (_, sketchController) {
return CodingTrainFlappyBirdScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '036: Blobby',
builder: (_, sketchController) {
return CodingTrainBlobbyScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '050: Circle Packing',
builder: (_, sketchController) {
return ProcessingDemo(
createSketch: () => CirclePackingSketch(),
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '050: Circle Packing with Text',
builder: (_, sketchController) {
return ProcessingDemo(
createSketch: () => CirclePackingWithTextSketch(),
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '052: Random Walker',
builder: (_, sketchController) {
return CodingTrainRandomWalkerScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '085: Game of Life',
builder: (_, sketchController) {
return CodingTrainGameOfLifeScreen(
sketchDemoController: sketchController,
);
},
),
DemoMenuItem(
title: '124: Boids',
builder: (_, sketchController) {
return CodingTrainBoidsScreen(
sketchDemoController: sketchController,
);
},
),
],
),
DemoMenuGroup(
title: 'Verifications',
items: [
DemoMenuItem(
title: 'Mouse and Gestures',
builder: (_, sketchController) {
return ProcessingDemo(
createSketch: () => MouseAndTouchSketch(
width: 500,
height: 500,
),
sketchDemoController: sketchController,
);
},
),
],
),
],
),
debugShowCheckedModeBanner: false,
);
}
}
更多关于Flutter图像处理插件flutter_processing的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter图像处理插件flutter_processing的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用Flutter图像处理插件flutter_processing的代码示例。flutter_processing 是一个受到 Processing 启发的 Flutter 包，用于在 Flutter 应用中进行创意编程和图像处理。
首先，你需要在你的 pubspec.yaml 文件中添加对 flutter_processing 的依赖：
dependencies:
flutter:
sdk: flutter
flutter_processing: ^0.x.x # 请检查最新版本号
然后，运行 flutter pub get 来获取依赖。
接下来，在你的 Dart 文件中，你可以使用 FlutterProcessing 小部件来创建和处理图像。以下是一个简单的示例，展示如何使用 flutter_processing 绘制一些基本的图形：
import 'package:flutter/material.dart';
import 'package:flutter_processing/flutter_processing.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Processing Demo'),
),
body: Center(
child: FlutterProcessing(
builder: (context, canvas) {
// 设置背景颜色
canvas.background(255); // 白色背景
// 绘制一个红色的矩形
canvas.fill(255, 0, 0); // 红色
canvas.rect(50, 50, 200, 100); // 矩形的位置和大小
// 绘制一个蓝色的椭圆
canvas.fill(0, 0, 255); // 蓝色
canvas.ellipse(300, 100, 100, 50); // 椭圆的位置和大小
// 绘制一些文字
canvas.fill(0); // 黑色文字
canvas.textSize(24);
canvas.text('Hello Flutter Processing!', 50, 250);
},
),
),
),
);
}
}
在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个 FlutterProcessing 小部件。在这个小部件的 builder 函数中，我们使用 canvas 对象来绘制图形。这里展示了如何设置背景颜色、绘制矩形、椭圆和文本。
canvas.background(255)设置背景颜色为白色（RGB值为255, 255, 255）。canvas.fill(255, 0, 0)设置填充颜色为红色。canvas.rect(50, 50, 200, 100)在位置(50, 50)绘制一个宽200、高100的矩形。canvas.fill(0, 0, 255)设置填充颜色为蓝色。canvas.ellipse(300, 100, 100, 50)在位置(300, 100)绘制一个宽100、高50的椭圆。canvas.fill(0)设置填充颜色为黑色。canvas.textSize(24)设置文本大小为24。canvas.text('Hello Flutter Processing!', 50, 250)在位置(50, 250)绘制文本。
这个示例只是 flutter_processing 的冰山一角，你可以利用它进行更多复杂的图像处理和创意编程。建议查阅 flutter_processing 的官方文档 以获取更多信息和高级用法。
