Repository files navigation

• Why Use Touchable ?
• Installation
• Usage
• How it works
• Road Map 🗺
• Links

• The CustomPainter lets youonly draw shapes on the canvas. But most would want to let user interact with the drawings.

• Add all kinds ofgesture 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 Paintingstroke width. So if your shapes are painted thick , we still got it covered ✓

• Supportsclipping and differentclipping modes for the drawings.

• Supports HitTestBehavior for each shape.

• Simple and Easy API. Just wrap yourCustomPaint withCanvasTouchDetector and use theTouchyCanvas in your painter.

With touchable , you get what the normal canvas always missed :touchability 😉

Add thetouchable package as dependency in yourpubspec.yaml

dependencies:  touchable:

• Just Wrap yourCustomPaint widget withCanvasTouchDetector. It takes abuilder function as argument that expects yourCustomPaint widget as shown below.

CanvasTouchDetector(    builder: (context)=>CustomPaint(            painter:MyPainter(context)        ))

• Inside yourCustomPainter class'spaint method , create and use theTouchyCanvas object (using thecontext obtained 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});

classMyPainterextendsCustomPainter {finalBuildContext context ;MyPainter(this.context);// context from CanvasTouchDetector@overridevoidpaint(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    });  }}

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.

• 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.round for 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
• 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

• Touchable Docs
• Pub Dev
• Other Dart/Flutter Packages
• HomePage
• My Github Page