0

I am using a CAShapeLayer to display a path that is updated as the user traces his/her finger on the screen. I'd like to transform this path to a rectangle that just encloses the path. I can compute the rectangle just fine; the tricky part is animating the transformation.

The docs say this about animating the path property of CAShapeLayer:

If the two paths have a different number of control points or segments the results are undefined.

So how do I go about adding more control points to the rectangular CGPath? Or is there a better way to achieve this animation? Thanks. =)

fumoboy007
  • 5,345
  • 4
  • 32
  • 49

1 Answers1

1

I think you have to manually construct a series of lines in the form of a rectangle. Iterate over the elements in the path, compute where on the bounding rectangle you want that point to transform to, and add that segment to the new rectangular path. You may have to use the same kind of element (e.g. cubic or quadratic Bézier curve that happens to form a straight line) so that the number of control points matches.

After the animation completes, you can reset the path to a pure rectangle if you want.

Ken Thomases
  • 88,520
  • 7
  • 116
  • 154
  • Thanks! How do I "compute where on the bounding rectangle you want that point to transform to"? – fumoboy007 Mar 24 '13 at 18:37
  • 1
    That's a design choice. You could translate any given point either horizontally or vertically to the nearest edge. You could translate each point away from the center along a radial until it intersects an edge. You could simply count the elements of the path and divide a hypothetical rectangle into the same number of sections roughly equally and map each element to a section. Etc. Your choice will affect precisely how the path will animate. To put it another way, there's no one right way to gradually transform an arbitrary path to a rectangle. – Ken Thomases Mar 25 '13 at 02:33