interactive_canvas

Description:

interactive canvas

Interactive Canvas #

Turns any child into an interactive canvas. Interactive Canvas supports zoom, pan and rotation and you can optionally control the canvas with a controller. Using controller you can get/set the scale, offset, and rotation values. Interactive Canvas also provides callbacks on the start, update, and end Zoom events. Originally forked from the Zoomer package.
Preview: #

Canvas functions: #

Zoom
Rotate
Translate (Pan)

Installation: #
Follow installation guide of Pub.dev
Syntax: #


ICanvas Class
ICanvas(
{this.child, // Child can be any Widget you want to be a canvas
this.controller, // Use an ICanvasControoller to control the ICanvas
this.height, // Height
this.width, // Width
this.background, // Set the canvas background color
this.maxScale = 2.0, // maximum scale
this.minScale = 0.5, // mininum scale
this.enableTranslation = false, // Allow canvas to be panned
this.enableRotation = false, // Allow canvas to be rotated
this.clipRotation = true}); // Clips the rotation to 90-degrees
copied to clipboard


ICanvasController Class
ICanvasController({initialScale = 1.0}) // Set initial Scale
copied to clipboard


APIs


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
Note: Rotation is in radians


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


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


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






Example: #
ICanvasController _iCanvasController = ICanvasController(initialScale: 1.0);
String _zoomDetails = "Zoom";

@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(),)),
),
])),
);
}
}
copied to clipboard