flutter - Flutter 使用触摸手势创建具有多个部分的圆圈

Question

我想使用自定义画家创建小部件，例如使用触摸手势跟随；

Answer 1

1. 绘制此图像的 svg。然后使用https://fluttershapemaker.com/转换为颤振绘制代码
2. 在您的 pubspec.yaml https://github.com/nateshmbhat/touchable中添加可触摸包作为依赖项

例子 ：

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


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
    });
  }
}