Find angle of a point from center of circle using flutter

Viewed 434

image

iam trying to find the angle of the point clicked from the centre. the issue is after crossing 180 it just goes to zero this is the formula im using getting the value of offset from onPanUpdate: onDragUpdate,

double rads = atan2(offset.dy - (60 / 2), offset.dx - (60 / 2));
double deg = (rads * 180) / pi;

here is aworking example:

import 'package:flutter/material.dart';
// import 'package:joy_stick/controller.dart';
import 'dart:math';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Column(
        children: [
          Spacer(),
          Row(
            children: [
              SizedBox(width: 48),
              Joypad(onChange: (Offset delta) => print(delta)),
              Spacer(),
            ],
          ),
          SizedBox(height: 24),
        ],
      ),
    );
  }
}

class Joypad extends StatefulWidget {
  final void Function(Offset) onChange;

  const Joypad({
    // required Key key,
    required this.onChange,
  });
  //  : super(key: key);

  JoypadState createState() => JoypadState();
}

class JoypadState extends State {
  Offset delta = Offset.zero;

  void updateDelta(Offset newDelta) {
    // widget.onChange(newDelta);
    setState(() {
      delta = newDelta;
    });
  }

  void init() {}
  void calculateDelta(Offset offset) {
    double rads = atan2(offset.dy - (60 / 2), offset.dx - (60 / 2));
    double deg = (rads * 180) / pi;
    print(deg);

    Offset newDelta = offset - Offset(60, 60);
    updateDelta(
      Offset.fromDirection(
        newDelta.direction,
        min(30, newDelta.distance),
      ),
    );
  }

  Widget build(BuildContext context) {
    return SizedBox(
      height: 120,
      width: 120,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(60),
        ),
        child: GestureDetector(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.amber,
              borderRadius: BorderRadius.circular(60),
            ),
            child: Center(
              child: Transform.translate(
                offset: delta,
                child: SizedBox(
                  height: 30,
                  width: 30,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(30),
                    ),
                  ),
                ),
              ),
            ),
          ),
          onPanDown: onDragDown,
          onPanUpdate: onDragUpdate,
          onPanEnd: onDragEnd,
        ),
      ),
    );
  }

  void onDragDown(DragDownDetails d) {
    print(d);
    calculateDelta(d.localPosition);
  }

  void onDragUpdate(DragUpdateDetails d) {
    calculateDelta(d.localPosition);
  }

  void onDragEnd(DragEndDetails d) {
    updateDelta(Offset.zero);
  }
}

0 Answers
Related