Flutter library to bring your CustomPainter
🎨
to Life
✨
⚡️
touchable library gives you the ability to add various gestures and animations to each Shape you draw on your canvas in the CustomPainter
Index :
Why Use Touchable ?
-
The CustomPainter lets you only draw shapes on the canvas. But most would want to let user interact with the drawings.
-
Add all kinds of gesture callbacks to each drawing to give interaction capability to the shapes you draw on the canvas.
-
Animating individual shapes has never been this easy.
-
Auto Handles the painting style (
filled ▮,stroke ▯) and detects touch accordingly. -
Handles Painting stroke width. So if your shapes are painted thick , we still got it covered ✓
-
Supports clipping and different clipping modes for the drawings.
-
Supports HitTestBehavior for each shape.
-
Simple and Easy API. Just wrap your
CustomPaintwithCanvasTouchDetectorand use theTouchyCanvasin your painter.
With touchable , you get what the normal canvas always missed : touchability
😉
Installation
Add the touchable package as dependency in your pubspec.yaml
dependencies:
touchable:
Usage
- Just Wrap your
CustomPaintwidget withCanvasTouchDetector. It takes abuilderfunction as argument that expects yourCustomPaintwidget as shown below.
CanvasTouchDetector(
builder: (context) =>
CustomPaint(
painter: MyPainter(context)
)
)
- Inside your
CustomPainterclass'spaintmethod , create and use theTouchyCanvasobject (using thecontextobtained from the CanvasTouchDetector andcanvas) to draw any shape with different gesture callbacks.
var myCanvas = TouchyCanvas(context,canvas);
myCanvas.drawRect( rect , Paint() , onTapDown: (tapDetail){
//Do stuff here. Probably change your state and animate
});
MyPainter example :
class MyPainter extends CustomPainter {
final BuildContext context ;
MyPainter(this.context); // context from CanvasTouchDetector
@override
void paint(Canvas canvas, Size size) {
var myCanvas = TouchyCanvas(context,canvas);
myCanvas.drawCircle(Offset(10, 10), 60, Paint()..color=Colors.orange ,
onTapDown: (tapdetail) {
print("orange Circle touched");
},
onPanDown:(tapdetail){
print("orange circle swiped");
}
);
myCanvas.drawLine(
Offset(0, 0),
Offset(size.width - 100, size.height - 100),
Paint()
..color = Colors.black
..strokeWidth = 50,
onPanUpdate: (detail) {
print('Black line Swiped'); //do cooler things here. Probably change app state or animate
});
}
}
Read the article on Medium : Bring Your CustomPainter to Life using Touchable
How Touchable Works
When you draw shapes on the canvas (TouchyCanvas) , it keeps track of the dimensions of each shape you draw and their painting style , stroke , order , clippings etc.
When user performs any gesture on the screen , based on the location of the gesture , the appropriate shape is selected from the lot taking clipping regions , paint , hitTest behaviour etc into account in an optimized way. Callbacks of the corresponding shapes (one or more depending on the hitTest behavior) are executed.
Road Map
- Basic Shape Detection
- Line
- Rectangle (Rect)
- Circle
- Oval or Ellipse
- Arc
- segment
- sector
- Rounded Rectangle (RRect)
- Custom Path [only supports opaque hittest]
- Points (PointMode.points , PointMode.lines , PointMode.polygon)
- Vertices
- Traingle
- Traingle Strip
- Traingle Fan
- Support for proper edge detection based on the Paint object properties :
- Paint style
- Stroke Width
- Stroke Cap
- StrokeCap to draw Points
-
StrokeCap.roundfor lines with huge width.
- Support Clipping and clipping modes
- ClipRect
- intersect mode [Touch detection enabled only inside the clipped region]
- difference mode [Touch detection enabled only outside the clipped region]
- ClipRRect
- ClipPath
- ClipRect
- Support for HitTestBehavior
- Make the touch detection handling to run in a seperate isolate.
- Support for translation , rotation , scaling and skewing transformations that needs some vector math
1.7k Dec 28, 2022
12 Jan 31, 2022
146 Nov 3, 2022
184 Dec 8, 2022
73 Jan 7, 2023
13 Dec 6, 2022
21 Oct 6, 2022
16 Apr 8, 2022
425 Dec 13, 2022
20 Jun 7, 2022
2 Oct 8, 2021
2 Oct 17, 2022
0 Nov 7, 2022
0 Oct 30, 2021
3.5k Jan 4, 2023
73 Dec 16, 2022
17 Dec 26, 2022
18 Dec 19, 2022