Flutter图片缩放插件rashail_image_zoom的使用

通过这个小部件，您可以在Flutter中创建一个可自定义的画布，并实现图片缩放功能。

可以几乎完全自定义画布的所有属性，例如颜色、背景色、启用或禁用滚动条、更改滚动条的颜色、修改缩放灵敏度、设置初始缩放值以及其他在RashailImageZoom类构造函数中找到的方面。

安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  rashail_image_zoom: ^1.0.0+1

然后运行flutter pub get以安装该插件。

如何使用

只需在Scaffold的子级或您选择的任何小部件中创建RashailImageZoom类的实例。在child属性中放置您想要缩放的小部件，并指定画布的宽度和高度。

导入

import 'package:rashail_image_zoom/rashail_image_zoom.dart';

简单示例

示例 1：使用所有视口空间居中Flutter Logo

RashailImageZoom(
  initTotalZoomOut: true, // 初始化时完全缩小
  child: Center(
    child: FlutterLogo(
      size: 1000, // 设置Logo大小
    ),
  ),
);

示例 2：居中文本并限制最大宽度和高度

RashailImageZoom(
  maxZoomWidth: 1800, // 最大缩放宽度
  maxZoomHeight: 1800, // 最大缩放高度
  child: Center(
    child: Text("Zooming image"), // 要缩放的文本
  ),
);

回调

可以通过两个简单的回调获取画布相对于滚动条的x和y位置以及画布的缩放和比例。

RashailImageZoom(
  maxZoomWidth: 1800,
  maxZoomHeight: 1800,
  onTap: () {
    print("!!Clicked!!"); // 点击回调
  },
  onPositionUpdate: (Offset position) {
    print(position); // 位置更新回调
  },
  onScaleUpdate: (double scale, double zoom) {
    print("$scale  $zoom"); // 缩放更新回调
  },
  child: Center(
    child: Text("Zooming image"),
  ),
);

自定义属性

通过自定义属性，可以获得令人惊叹的效果。

• width（已弃用）: double
• height（已弃用）: double
• maxZoomWidth: double
• maxZoomHeight: double
• backgroundColor: Color
• canvasColor: Color
• onPositionUpdate(): Callback
• onScaleUpdate(): Callback
• onTap(): Callback
• scrollWeight: double
• opacityScrollBars: double (0.0-1.0)
• colorScrollBars: Color
• centerOnScale: bool
• initZoom（已弃用）: double
• initPosition: Offset
• initScale: double
• enableScroll: bool
• zoomSensibility: double
• doubleTapZoom: bool
• transformationController: TransformationController
• radiusScrollBars: double
• doubleTapScaleChange: double
• doubleTapAnimDuration: Duration
• initTotalZoomOut: bool

自定义属性示例

RashailImageZoom(
  maxZoomWidth: 1800,
  maxZoomHeight: 1800,
  canvasColor: Colors.grey, // 设置画布颜色为灰色
  backgroundColor: Colors.orange, // 设置背景颜色为橙色
  colorScrollBars: Colors.purple, // 设置滚动条颜色为紫色
  opacityScrollBars: 0.9, // 设置滚动条透明度
  scrollWeight: 10.0, // 设置滚动条宽度
  centerOnScale: true, // 缩放时居中
  enableScroll: true, // 启用滚动
  doubleTapZoom: true, // 双击缩放
  zoomSensibility: 0.05, // 设置缩放灵敏度
  onTap: () { 
    print("!!Clicked!!"); // 点击回调
  },
  onPositionUpdate: (position) {
    setState(() {
      x = position.dx; // 更新x坐标
      y = position.dy; // 更新y坐标
    });
  },
  onScaleUpdate: (scale, zoom) {
    setState(() {
      _zoom = zoom; // 更新缩放比例
    });
  },
  child: Center(
    child: Text(
      "x:${x.toStringAsFixed(2)} y:${y.toStringAsFixed(2)} zoom:${_zoom.toStringAsFixed(2)}",
      style: TextStyle(color: Colors.deepPurple, fontSize: 50), // 设置文本样式
    ),
  ),
);

示例代码

以下是一个完整的示例代码，展示了如何使用rashail_image_zoom插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: HomePage(),
    );
  }
}

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

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double x = 0.0;
  double y = 0.0;
  double _zoom = 1.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('RashailImageZoom Example'),
      ),
      body: Center(
        child: RashailImageZoom(
          maxZoomWidth: 1800,
          maxZoomHeight: 1800,
          canvasColor: Colors.grey,
          backgroundColor: Colors.orange,
          colorScrollBars: Colors.purple,
          opacityScrollBars: 0.9,
          scrollWeight: 10.0,
          centerOnScale: true,
          enableScroll: true,
          doubleTapZoom: true,
          zoomSensibility: 0.05,
          onTap: () {
            print("!!Clicked!!");
          },
          onPositionUpdate: (Offset position) {
            setState(() {
              x = position.dx;
              y = position.dy;
            });
          },
          onScaleUpdate: (double scale, double zoom) {
            setState(() {
              _zoom = zoom;
            });
          },
          child: Center(
            child: Text(
              "x:${x.toStringAsFixed(2)} y:${y.toStringAsFixed(2)} zoom:${_zoom.toStringAsFixed(2)}",
              style: TextStyle(color: Colors.deepPurple, fontSize: 50),
            ),
          ),
        ),
      ),
    );
  }
}