4

I have an image. I want to drag that image along a path. Path can be of circular or rectangular shape. If the image is being touched and dragged, it should only travel along the path and should not leave the path. I have tried using Core Graphics and Core animations but can't find the right way of doing it. I have searched on the net but it always shows how to move an object along a path. Can't find anything about dragging an object along a path. Also I have found that their is NO method, provided by Apple, to extract points from a UIBezierPath.

Is their anyway of doing this?

  • Why is this question tagged Android? Neither Core-Grapics or Core-Animation is available for Android. You probably won't be able to get a single answer that matched both platforms due to their different APIs. – David Rönnqvist Oct 01 '12 at 13:49
  • Sorry for that. I have edited it. Just got too curious. – Amrendra Pratap Singh Oct 01 '12 at 13:59
  • Is the user dragging along the same path or just dragging on the screen? – David Rönnqvist Oct 01 '12 at 14:02
  • Just dragging along the circular path. – Amrendra Pratap Singh Oct 01 '12 at 14:04
  • You are going to need some custom math here, to detect which point from the path is the closest from the point the user is currently touching, and update your image's position accordingly. As long as you restrict the problem to circular or rectangular pathes, this should be easily manageable. For the most part, CoreAnimation will not be helpful, as you should update and refresh the image position yourself continually as the user's finger touch moves around. The exception will be when the user touch movement causes the closest path point to "jump" to another position on the path. – amadour Oct 01 '12 at 19:43
  • Can you help me with more clear explanation? Is their any sample code on this that I can refer to? – Amrendra Pratap Singh Oct 02 '12 at 04:37
  • [This question and answer](http://stackoverflow.com/questions/4854035/how-do-i-detect-a-touch-on-a-uibezierpath-and-move-a-ball-along-that) seems applicable. – Jesper Oct 02 '12 at 07:38
  • Sir i have the same problem like you have plz help me if you resolve that. – Manjit Singh Jun 19 '14 at 09:58

1 Answers1

0

The UIBezierPath class has an instance method called - (BOOL)containsPoint:. With this method and 2 UIBezierPaths, you can check if your object is moving along the path.

+---------+
|xxxxxxxxx|
|x+-----+x|
|x|     |x|
|x|     |x|
|x|     |x|
|x+-----+x|
|xxxxxxxxx|
+---------+

The trick here is to make 1 path slightly smaller than the first (maybe 2 pixels), while ensuring that both paths have a common center. The path/route that your object must now travel will be the difference of the areas of the bezier paths, which you get from calling - (BOOL)containsPoint:.

If your object is contained within the big UIBezierPath, but not in the small one, then you know that you are on the correct path.

haroldcampbell
  • 1,512
  • 1
  • 14
  • 22