2

I'm working on an iOS educational where kids are drawing letters. The game mechanism is pretty simple and works OK. What I want to do is to show a drawing progress by turning the elapsed part into green thick line. See the image:

enter image description here

There are couple of solution I have in mind.

  1. Mask over hidden path which transforms according to users touch position
  2. Creating a new path on touchesMoved: by taking the original and adding a point to the user touch position, then stripping the rest

What would you choose or is there some better solution?

Note: I want to draw the green path precisely as the dashed one. By just drawing a path following the user movement would result in ugly line.

Thanks.

adam
  • 807
  • 3
  • 11
  • 17

1 Answers1

0

I would say your choice depends on whether the dashed line is also drawn (or drawable in all of its parts) with bezier curves.

If the dashed line is an image you show, probably solution 1 with an also drawn thick line and an adapted mask is easiest to do.

If the dashed line is already drawn as a bezier curve (or drawn by drawing several connected bezier curves), then solution 2 seems best to me. The tricky part would be to ensure you exactly follow the dashed line in this case (but I suppose you figured that already :-).

TheEye
  • 9,280
  • 2
  • 42
  • 58
  • Thanks for response. Dashed line is created from UIBezierPath so no images there. The second solution sounds like something that can work. But I can't figure out how to manipulate the path. Is there even a way to loop through it's parts? – adam Jan 13 '14 at 08:36
  • By "parts" I meant if you already built the line with several parts - then you should know the parts already. You could have a look here for drawing arbitrary parts of a given Bezier curve: http://stackoverflow.com/questions/878862/drawing-part-of-a-bezier-curve-by-reusing-a-basic-bezier-curve-function – TheEye Jan 13 '14 at 08:55