Flutter绘图与创作插件easel的使用

CustomPaint 在声明式方式中的应用

Easel(
    width: 400,
    height: 400,
    components: [
        ...coordLines(400, 400),
        Circle(Point(100, 100), 100),
        Circle.xyr(-100, -100, 50, color: Colors.lightBlue)
    ],
),

如何使用？

参见示例

待办事项

❌ 文本
❌ 三维场景
❌ 手势检测
❌ 动画

如何添加新的可绘制对象？

对于贡献者和维护者

在 /src/drawable 目录 创建一个新的可绘制类。
在 [Easel] 类中创建绘制方法。
更新 [Easel] 类中的 [drawAll] 方法。
在 example/artworks 目录中制作一个示例。

对于维护者（任务1-4完成后）

更新 [index.dart] 中的 pageOrder 和路由。

示例代码

import 'package:easel/easel.dart';
import 'package:easel_example/artworks/artworks.dart';
import 'package:easel_example/artworks/routes.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const TestApp());
}

class TestApp extends StatelessWidget {
  const TestApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      theme: ThemeData(
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      routeInformationParser: gorouter.routeInformationParser,
      routerDelegate: gorouter.routerDelegate,
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Easel by Example'),
      ),
      drawer: Drawer(
        child: Column(
          children: [
            DrawerHeader(
              child: CircleAvatar(
                backgroundColor: Colors.transparent,
                radius: 200,
                child: Image.asset(
                  'assets/easel.png',
                  width: 200,
                  height: 200,
                ),
              ),
            ),
            const Text('Easel Examples'),
            Expanded(child: ListView(children: const [])),
          ],
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: SizedBox(
            width: 400,
            child: ListView(
              children: [
                Center(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all()),
                    child: Easel(
                      height: 400,
                      width: 400,
                      components: [
                        Line.xyxy(-100, -100, 100, 100,
                            color: Colors.yellow, thickness: 5),
                        Pixel(-1, 1, Colors.red),
                        Pixel(-1, -1, Colors.red),
                        Pixel(1, 1, Colors.red),
                        Pixel(1, -1, Colors.red),
                        // 组件的顺序决定了绘制的顺序
                        // Line.xyxy(-100, -100, 100, 100, Colors.yellow),
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text("""
                        components: [
                          Line.xyxy(-100, -100, 100, 100,
                              color: Colors.yellow, thickness: 5),
                          Pixel(-1, 1, Colors.red),
                          Pixel(-1, -1, Colors.red),
                          Pixel(1, 1, Colors.red),
                          Pixel(1, -1, Colors.red),
                        ],
                  """
                      .trim()),
                ),
                const LineArtwork(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter绘图与创作插件easel的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼

更多关于Flutter绘图与创作插件easel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，关于Flutter中的绘图与创作插件easel的使用，以下是一个简单的代码案例来展示如何在Flutter应用中集成并使用easel插件进行基本的绘图操作。需要注意的是，由于easel并非一个广泛认知的标准Flutter插件（在Flutter的官方插件库中并未直接找到名为easel的插件），我将基于假设这个插件提供类似的绘图功能来编写示例代码。如果easel是一个特定的第三方库，你可能需要根据其实际文档进行调整。

假设easel插件提供了一个EaselCanvas组件和相关的绘图API，以下是一个基本的示例：

添加依赖：首先，确保在pubspec.yaml文件中添加了easel插件的依赖（如果它是一个可用的pub包）。由于easel不是标准库的一部分，这里是一个假设的依赖项添加方式：
```
dependencies:
  flutter:
    sdk: flutter
  easel: ^x.y.z  # 假设的版本号
```
然后运行flutter pub get来安装依赖。

使用Easel进行绘图：

import 'package:flutter/material.dart';
import 'package:easel/easel.dart'; // 假设的导入路径

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Easel Drawing Example'),
        ),
        body: DrawingScreen(),
      ),
    );
  }
}

class DrawingScreen extends StatefulWidget {
  @override
  _DrawingScreenState createState() => _DrawingScreenState();
}

class _DrawingScreenState extends State<DrawingScreen> {
  final List<Offset> _points = [];

  void _addPoint(Offset point) {
    setState(() {
      _points.add(point);
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        _addPoint(details.localPosition);
      },
      child: EaselCanvas( // 假设的EaselCanvas组件
        onDraw: (Canvas canvas) {
          Paint paint = Paint()
            ..color = Colors.black
            ..strokeCap = StrokeCap.round
            ..strokeWidth = 5.0;

          if (_points.isNotEmpty) {
            for (int i = 0; i < _points.length - 1; i++) {
              Offset previous = _points[i];
              Offset current = _points[i + 1];
              canvas.drawLine(previous, current, paint);
            }
          }
        },
      ),
    );
  }
}

// 假设的EaselCanvas组件定义（实际使用时需根据easel插件的API文档实现）
class EaselCanvas extends StatelessWidget {
  final void Function(Canvas canvas) onDraw;

  EaselCanvas({required this.onDraw});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _EaselPainter(onDraw: onDraw),
    );
  }
}

class _EaselPainter extends CustomPainter {
  final void Function(Canvas canvas) onDraw;

  _EaselPainter({required this.onDraw});

  @override
  void paint(Canvas canvas, Size size) {
    onDraw(canvas);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true; // 根据需要调整重绘逻辑
  }
}

在这个示例中，我们创建了一个简单的绘图屏幕，用户可以通过手势在屏幕上绘制线条。EaselCanvas是一个假设的组件，用于封装绘图逻辑。在实际应用中，你需要根据easel插件的实际API来实现相应的组件和绘图逻辑。

请注意，由于easel并非一个官方或广泛认知的Flutter插件，上述代码是一个基于假设的示例。如果easel确实存在且功能有所不同，请参考其官方文档进行调整。如果你正在寻找一个具体的绘图插件，可以考虑使用flutter_canvas或flutter_drawing_board等类似的插件，并根据其文档进行实现。