Flutter图片缩放旋转插件resize_rotate_image的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter图片缩放旋转插件resize_rotate_image的使用

flutter example

resize_rotate_image

pub version

一个Flutter包，允许你通过直观的手势轻松调整图像大小、旋转图像并在画布上拖动图像。

特性

  • 调整图像大小：只需用两根手指进行捏合缩放即可轻松调整图像大小。
  • 旋转图像：通过两指旋转手势平滑地旋转图像。
  • 拖放：自由地在画布上拖动图像以完美定位它们。
  • 控制按钮：
    • 重置图像大小：将图像恢复到其原始尺寸。
    • 重置旋转：将图像对齐回其初始方向。
    • 删除图像：从画布中移除选定的图像。
  • 可定制：
    • 设置调整大小的最小和最大尺寸限制。
  • 开发者友好：
    • 显示全局和局部鼠标坐标，便于调试和精确控制。

入门指南

要使用此包，请在pubspec.yaml文件中添加resize_rotate_image作为依赖项。

安装

在pubspec.yaml文件中添加resize_rotate_image：

dependencies:
  resize_rotate_image: ^1.0.0

完整示例

以下是一个完整的示例代码，展示了如何使用resize_rotate_image插件来实现图片的缩放和旋转功能。

// main.dart
import 'package:flutter/material.dart';
import 'package:resize_rotate_image/resize_rotate_image.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Resize Rotatable Images Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Resize Rotatable Images Example'),
      ),
      body: Center(
        child: EditableImage(
          initialImagePath: 'assets/images/bonobono01.png', // 替换为你的图片路径
        ),
      ),
    );
  }
}

说明

  • EditableImage 是resize_rotate_image库中的一个组件，用于展示可以被用户缩放和旋转的图像。
  • initialImagePath 参数用于指定要加载的初始图像路径。请确保该路径正确指向项目中的资源文件。

以上就是如何使用resize_rotate_image插件来实现图片缩放和旋转的基本步骤。希望对你有所帮助！


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

1 回复

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


当然，以下是如何在Flutter项目中使用resize_rotate_image插件来对图片进行缩放和旋转的详细代码示例。

首先，你需要在你的pubspec.yaml文件中添加resize_rotate_image依赖项：

dependencies:
  flutter:
    sdk: flutter
  resize_rotate_image: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

以下是一个完整的Flutter应用示例，展示了如何使用resize_rotate_image插件：

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';  // 用于选择图片
import 'package:resize_rotate_image/resize_rotate_image.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageEditorScreen(),
    );
  }
}

class ImageEditorScreen extends StatefulWidget {
  @override
  _ImageEditorScreenState createState() => _ImageEditorScreenState();
}

class _ImageEditorScreenState extends State<ImageEditorScreen> {
  File? _imageFile;
  double _scale = 1.0;
  double _rotation = 0.0;

  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

    if (image != null && image.path != null) {
      setState(() {
        _imageFile = File(image.path!);
      });
    }
  }

  Future<void> _resizeRotateImage() async {
    if (_imageFile == null) return;

    final File? result = await ResizeRotateImage.resizeRotateImage(
      sourcePath: _imageFile!.path,
      scale: _scale,
      rotation: _rotation,
    );

    if (result != null) {
      // 处理处理后的图片，例如保存到文件或显示在UI上
      print("Processed image path: ${result.path}");
      // 例如，显示处理后的图片（需要添加相关UI逻辑）
      // setState(() {
      //   _processedImageFile = result;
      // });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Resize and Rotate'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            _imageFile == null
              ? Text('No image selected.')
              : Image.file(_imageFile!),
            SizedBox(height: 20),
            Slider(
              value: _scale,
              min: 0.5,
              max: 2.0,
              divisions: 10,
              label: 'Scale',
              onChanged: (newValue) {
                setState(() {
                  _scale = newValue;
                });
              },
            ),
            SizedBox(height: 20),
            Slider(
              value: _rotation,
              min: 0,
              max: 360,
              divisions: 36,
              label: 'Rotation',
              onChanged: (newValue) {
                setState(() {
                  _rotation = newValue;
                });
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _resizeRotateImage,
              child: Text('Resize and Rotate'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们使用ImagePicker插件从设备的图库中选择图片。
  2. 使用ResizeRotateImage插件对选择的图片进行缩放和旋转。
  3. 使用两个Slider组件分别控制缩放比例和旋转角度。
  4. 使用ElevatedButton触发图片的缩放和旋转操作。

请注意，此代码示例中并未包含显示处理后的图片的完整逻辑，因为那取决于你的具体需求。你可以根据需要将处理后的图片显示在UI上或保存到设备中。

回到顶部