Flutter绘图插件magic_draw的使用

Flutter绘图插件magic_draw的使用

Magic Draw 是一个用于自定义画布并带有动画魔法效果的小部件。您可以自由地将其用于您的项目中。

使用方法

void initState() {
  super.initState();
  magic = MagicDraw();
  // 初始化代码，详见 example/lib/main.dart
}

late final MagicDraw magic;

Widget build(BuildContext context) => MaterialApp(
  home: Scaffold(
    body: SafeArea(child: magic),
  ),
);

示例代码

以下是一个完整的示例代码，展示了如何在项目中使用 Magic Draw。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:magic_draw/magic_draw.dart';

void main() => runApp(const App());

class App extends StatefulWidget {
  const App({super.key});

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  [@override](/user/override)
  void initState() {
    super.initState();

    magic = MagicDraw();

    magic.background.add(
      SetContentBackgroundEvent(
        child: Image.asset(
          key: UniqueKey(),
          'assets/images/fairy_tale.webp',
          fit: BoxFit.cover,
        ),
      ),
    );

    const n = 33;
    magic.mana
      ..add(const SetLayoutManaEvent(layout: WrapManaLayout()))
      ..add(const SetPoolSizeManaEvent(size: n))
      ..add(const FillManaEvent(count: n));
    timer = Timer.periodic(
      2100.ms,
      (timer) {
        if (!magic.mana.state.pool.isFilled) {
          magic.mana.add(const FillManaEvent());
        }
      },
    );

    magic.aim.add(
      SetTapEffectAimEvent(effectBuilder: ({
        required BuildContext context,
      }) {
        final (width, height) = sphereSize(context);
        return Sphere(
          data: SphereData(),
          width: width,
          height: height,
        ).animate().fadeOut(duration: 1200.ms, curve: Curves.easeInSine);
      }),
    );
  }

  late final MagicDraw magic;
  late final Timer timer;

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Colors.black,
          body: SafeArea(
            maintainBottomViewPadding: true,
            child: magic,
          ),
        ),
        debugShowCheckedModeBanner: false,
      );

  [@override](/user/override)
  void dispose() {
    timer.cancel();

    super.dispose();
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter应用中使用magic_draw插件进行绘图的示例代码。这个插件允许用户在屏幕上自由绘制图形。首先，确保你已经在pubspec.yaml文件中添加了magic_draw依赖：

dependencies:
  flutter:
    sdk: flutter
  magic_draw: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来，让我们创建一个简单的Flutter应用，展示如何使用magic_draw插件。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Magic Draw Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DrawingScreen(),
    );
  }
}

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

class _DrawingScreenState extends State<DrawingScreen> {
  MagicDrawController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = MagicDrawController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Magic Draw Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: GestureDetector(
          onTap: () {
            // Clear the canvas when tapped
            _controller?.clear();
          },
          child: MagicDraw(
            controller: _controller!,
            strokeWidth: 5.0,
            strokeColor: Colors.black,
            backgroundColor: Colors.white,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Save the drawing as an image
          _controller?.saveImage((path) {
            print('Image saved at: $path');
          });
        },
        tooltip: 'Save Drawing',
        child: Icon(Icons.save),
      ),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
}

代码解释

  1. 依赖引入：在pubspec.yaml文件中添加magic_draw依赖。
  2. 应用入口：在main.dart文件中定义MyApp作为应用入口，它包含一个DrawingScreen作为主页。
  3. 状态管理：DrawingScreen是一个有状态组件，它包含一个MagicDrawController实例来控制绘图操作。
  4. 初始化：在initState方法中初始化MagicDrawController。
  5. UI布局：使用Scaffold布局包含一个应用栏、一个GestureDetector包裹的MagicDraw组件，以及一个浮动操作按钮（FAB）用于保存绘图。
  6. 清空画布：点击画布时会调用_controller?.clear()方法清空画布。
  7. 保存图像：点击FAB时会调用_controller?.saveImage()方法保存绘图为图像文件，并打印保存路径。
  8. 资源释放：在dispose方法中释放MagicDrawController资源。

这个示例展示了如何使用magic_draw插件进行基本的绘图操作，包括清空画布和保存绘图为图像文件。你可以根据需要进一步扩展和自定义这个示例。

回到顶部