Skip to content

Instantly share code, notes, and snippets.

@IsmailAlamKhan
Forked from roipeker/dial.dart
Last active February 12, 2021 17:21
Show Gist options
  • Save IsmailAlamKhan/6551b72921c197b4d902576eb195fa61 to your computer and use it in GitHub Desktop.
Save IsmailAlamKhan/6551b72921c197b4d902576eb195fa61 to your computer and use it in GitHub Desktop.
graphx dial rotation
/// roipeker 2021
/// sample video:
/// https://media.giphy.com/media/xC8rB3jR9nXDJDMwQM/source.mp4
/// add graphx to your pubspec.
/// Add in ur code:
/// SceneBuilderWidget(builder: () => SceneController(front: SceneDialer()),),
import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';
const pinkColor = Color(0xffDD3D5C);
class SceneDialer extends GSprite {
Dialer dialer;
@override
void addedToStage() {
dialer = Dialer(this);
dialer.y = dialer.radius - kToolbarHeight;
dialer.x = 240 + dialer.radius;
}
}
class Dialer extends GSprite {
double radius = 700 / 2;
Dialer([GSprite doc]) {
_draw();
doc?.addChild(this);
bg.mouseUseShape = true;
bg.onMouseDown.add((event) {
isPressed = true;
pressed.setTo(mouseX, mouseY);
prevRot = bg.rotation;
pressRot = Math.atan2(mouseY, mouseX); //bg.rotation;
stage.onMouseUp.add((event) {
isPressed = false;
});
});
}
bool isPressed = false;
GPoint pressed = GPoint();
double prevRot = 0.0;
double pressRot = 0.0;
@override
void update(double delta) {
super.update(delta);
if (isPressed) {
var angle = Math.atan2(mouseY, mouseX);
bg.rotation = prevRot + (angle - pressRot);
}
}
GShape bg;
void _draw() {
bg = GShape();
addChild(bg);
final g = bg.graphics;
g
.beginFill(
Colors.black.withOpacity(.8),
)
.lineStyle(4, pinkColor)
.drawCircle(0, 0, radius)
.endFill();
final smallRadius = radius * .96;
// g.lineStyle(0, 0xffffff, .2);
// g.drawCircle(0, 0, smallRadius).endFill();
g.lineStyle(
1,
Color(0x574549).withOpacity(.8),
);
double shortLine = 24;
double longLine = 36;
for (var i = 0.0; i < 360; ++i) {
var angle = deg2rad(i);
var lineSize = i % 5 == 0 ? longLine : shortLine;
var innerRadius = smallRadius - lineSize;
var cos1 = Math.cos(angle), sin1 = Math.sin(angle);
g.moveTo(cos1 * smallRadius, sin1 * smallRadius);
g.lineTo(cos1 * innerRadius, sin1 * innerRadius);
/// debug circle.
if (i == 180) {
g.drawCircle(cos1 * innerRadius, sin1 * innerRadius, 20);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment