Flutter交互式画布插件interactive_canvas的使用

interactive_canvas 插件可以将任何子部件变成一个可交互的画布。它支持缩放、旋转和平移功能，并且可以通过控制器来控制这些功能。你可以通过控制器获取和设置缩放比例、偏移量和旋转角度。此外，该插件还提供了在开始、更新和结束缩放事件时的回调。

预览:

画布功能:

• 缩放
• 旋转
• 平移（拖动）

安装:

请参考 Pub.dev 的安装指南。

语法:

ICanvas 类

ICanvas(
    {this.child,                    // 子部件可以是任何你希望作为画布的部件
    this.controller,                // 使用 ICanvasController 来控制 ICanvas
    this.height,                    // 高度
    this.width,                     // 宽度
    this.background,                // 设置画布背景颜色
    this.maxScale = 2.0,            // 最大缩放比例
    this.minScale = 0.5,            // 最小缩放比例
    this.enableTranslation = false, // 允许画布平移
    this.enableRotation = false,    // 允许画布旋转
    this.clipRotation = true});     // 限制旋转到 90 度

ICanvasController 类

ICanvasController({initialScale = 1.0})  // 设置初始缩放比例

API 方法

• 获取缩放比例

  double get scale
  scale = _controller.scale
  

• 设置缩放比例

  set setScale(double value)
  _controller.setScale = 1.5
  

• 获取偏移量

  Offset get offset
  offset = _controller.offset
  

• 设置偏移量

  set setOffset(Offset value)
  _controller.setOffset = Offset(0,10)
  

• 获取旋转角度

  double get rotation
  rotation = _controller.rotation
  

• 设置旋转角度

  set setRotation(double value)
  _controller.setRotation = pi/4
  

  注意: 旋转角度以弧度为单位

• 开始缩放事件

  onZoomStart()
  _controller.onZoomStart( (){ print( _controller.scale ); } )
  

• 更新缩放事件

  onZoomUpdate()
  _controller.onZoomUpdate( (){ print( _controller.scale ); } )
  

• 结束缩放事件

  onZoomEnd()
  _controller.onZoomEnd( (){ print( _controller.scale ); } )
  

示例

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ICanvasController _iCanvasController = ICanvasController(initialScale: 1.0);
  String _zoomDetails = "Zoom";

  [@override](/user/override)
  Widget build(BuildContext context) {
    _iCanvasController.onZoomUpdate(() {
      setState(() {
        _zoomDetails = "Scale = " + _iCanvasController.scale.toStringAsFixed(2);
        _zoomDetails += "\nRotation = " + _iCanvasController.rotation.toStringAsFixed(2);
        _zoomDetails += "\nOffset = (" + _iCanvasController.offset.dx.toStringAsFixed(2) + "," + _iCanvasController.offset.dy.toStringAsFixed(2) + ")";
      });
    });

    return Scaffold(
      appBar: AppBar(title: Text("Zommer Example")),
      body: Center(
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: SizedBox(
                height: 150,
                child: Text(
                  _zoomDetails,
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
            Center(
              child: ICanvas(
                enableTranslation: true,
                enableRotation: true,
                clipRotation: true,
                maxScale: 2,
                minScale: 0.5,
                background: BoxDecoration(color: Colors.white),
                height: 300,
                width: 300,
                controller: _iCanvasController,
                child: Container(
                  decoration: BoxDecoration(color: Colors.green),
                  height: 200,
                  width: 200,
                  child: FlutterLogo(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}