Move a sprite around a circular path, only when pointer is on path

[GaryS]

Hi all,

I'm having difficulty achieving what I'm sure should be a pretty simple input technique.

I want to drag a sprite around a circular path, with the mouse or touch (and eventually, keyboard & gamepad, but we'll get to that later) but only when the pointer is over the path itself.
So, I found an earlier forum post asking how to force the sprite to move around the circular path using sin and cos:

The various techniques listed in the post are working well, but I'm struggling with detecting that a pointer is within the path when pressed.
I've seen some examples that use pointerOver, and indeed I've had this working on a sprite - however that only seems to work with the mouse, not a touch pointer.
In any case, I found another post where Rich said pointerOver was an internal function and shouldn't be used... Is there anything I can use in conjuction with a mouseMoveCallback, that will detect whether a pointer (mouse/touch) is over a graphics object?

Here's what I've got so far:
http://phaser.io/sandbox/edit/WQVEpEOG

Any help, much apprecaited.

 

[lumoludo]

I'm not sure about a collision detection function, but if you just want to know if a point (the mouse/finger position) is within a certain distance of the edge of a circle, you could use linear algebra to figure it out. If you're only dealing with circles, it will certainly be faster than using a less specific collision detection function. It would look something like this:
 

var dist = inputPosition.distance(circleCenterPosition);
var inputRange = 10; //ten pixels worth of distance from the nearest point on the circle
if (dist >= circleRadius - inputRange && dist <= circleRadius + inputRange)
{
    // inputPosition is within 10 pixels of the nearest point on the circle
    // Do the thing.
}

 

[GaryS]

Thanks lumoludo, I managed to get that working!

If anyone is interested, I've updated the code here:
http://phaser.io/sandbox/edit/qqVRPNYU