I'm wondering, is there an alternative to CGPathAddElipseInRect for drawing an ellipse? It works well and all, but I need a custom ellipse that has less steeper curves. Any thing else that can be done? I am using this path with CTFramesetterCreateFrame in CoreText so I can draw text within different shapes.
No...
...But it can be done with Core Graphics
You would have to use something like CGPathAddQuadCurveToPoint, CGPathAddCurveToPoint or CGPathAddArcToPoint to create a custom path for you ellipse. If your not familiar with how control points for bezier paths work you can starts by reading the Wikipedia article. You don't need to read the math part about it, just look at this image (from Wikipedia).
For the ...AddCurveTo... method:
Your current point is p0 and the end point is p3. The two control points are p1 and p2.
For the ...AddQuadCurveTo.. method:
Same as above but with only one control point.
For the ...AddArcTo.. method:
Doen't use control points. Instead uses a fixed radius.
...You can also create the path with UIBezierPath if you prefer
There is also similar methods on UIBezier path like addCurveToPoint:controlPoint1:controlPoint2: or addCurveToPoint:controlPoint1:controlPoint2:. The bezier path can then be converted to a CGPath but that shouldn't be necessary if your familiar with Core Graphics.
You can create a UIBezierPath and then get its CGPath property.
How you create this path will depend on your needs. The method +(UIBezierPath *) bezierPathWithOvalInRect: looks like it most closely resembles CGPathAddElipseInRect.
You can also use its fill and stroke methods to draw into the current context.
Related
I am able to draw shapes using the UIBezierPath object. Now I want to identify different shapes drawn using this eg. Rectangle , Square , Triangle , Circle etc. Then next thing I want to do is that user should be able to select a particular shape and should be able to move the whole shape to different location on the screen. The actual requirement is even more complex , but If I could make this much then I can work out on the rest.
Any suggestion or links or points on how do I start with this is welcome . I am thinking of writing a separate view to handle every shape but not getting how do I do that..
Thank You all in advance !!
I recommend David Gelphman’s Programming with Quartz.
In his chapter “Drawing with Paths” he has a section on “Path Construction Primitives” which provides a crossroads:
If you use CGContextAddLineToPoint your user could make straight lines defined by known Cartesian points. You would use basic math to deduce the geometric shapes defined by those points.
If you use CGContextAddCurveToPoint your user could make curved lines defined by known points, and I’m pretty sure that those lines would run through the points, so you could still use basic math to determine at least an approximation of the types of shapes formed.
But if you use CGContextAddQuadCurveToPoint, the points define a framework outside of the drawn curve. You’d need more advanced math to determine the shapes formed by curves along tangents.
Gelphman also discusses “Path Utility Functions,” like getting a bounding box and checking whether a given point is inside the path.
As for moving the completed paths, I think you would use CGContextTranslateCTM.
How would I efficiently draw a CGPath on a CATiledLayer? I'm currently checking if the bounding box of the tile intersects the bounding box of the path like this:
-(void)drawLayer:(CALayer*)layer inContext:(CGContextRef)context {
CGRect boundingBox = CGPathGetPathBoundingBox(drawPath);
CGRect rect = CGContextGetClipBoundingBox(context);
if( !CGRectIntersectsRect(boundingBox, rect) )
return;
// Draw path...
}
This is not very efficient as the drawLayer:inContext: is called multiple times from multiple threads and results in drawing the path many times.
Is there a better, more efficient way to do this?
The simplest option is to draw your curve into a large image and then tile the image. But if you're tiling, it probably means the image would be too large, or you would have just drawn the path in the first place, right?
So you probably need to split your path up. The simplest approach is to split it up element by element using CGPathApply. For each element, you can check its bounding box and determine if that element falls in your bounds. If not, just keep track of the last end point. If so, then move to the last end point you saw and add the element to a new path for this tile. When you're done, each tile will draw its own path.
Technically you will "draw" things that go outside your bounds here (such as a line that extends beyond the tile), but this is much cheaper than it sounds. Core Graphics is going to clip single elements very easily. The goal is to avoid calculating elements that are not in your bounding box at all.
Be sure to cache the resulting path. You don't need to calculate the path for every tile; just the ones you're drawing. But avoid recalculating it every time the tile draws. Whenever the data changes, dump your cache. If there are a very large number of tiles, you can also use NSCache to optimize this even better.
You don't show where the path gets created. If possible, you might try building the path up in the -drawLayer:inContext: method, only creating the portion of it needed for the tile being drawn.
As with all performance problems, you should use Instruments to profile your code and find out exactly where the bottlenecks are. Have you tried that already, and if so, what did you find?
As a side note, is there a reason you're using CGPath instead of UIBezierPath? From Apple's documentation:
For creating paths in iOS, it is recommended that you use UIBezierPath
instead of CGPath functions unless you need some of the capabilities
that only Core Graphics provides, such as adding ellipses to paths.
For more on creating and rendering paths in UIKit, see “Drawing Shapes
Using Bezier Paths.”
When I'm using a UIBezierPath to draw where the user is touching if the user moves to fast sometimes I get really hard points like the tip of a triangle. Any clue what might be causing this? Or how I can fix it?
I am capturing the points using touchesBegan/Moved/Ended and placing them into an NSArray of UIBezierPaths.
Despite the name, UIBezierPath doesn't just draw curves. In fact, by default it won't - presumably you're simply passing the coordinates returned by touchesBegan etc, into the addLineToPoint method.
Instead of simply passing all the touch coordinates directly into a UIBezierPath you should first interpolate them to avoid these sharp lines that occur when you rapidly move your finger across the screen. This is not too difficult, although does require some knowledge of how bezier curves work and spline interpolation.
If you are looking for a slightly easier way out, there are a couple of open source libraries that will do this for you, like this one: http://cocoacontrols.com/platforms/ios/controls/smooth-line-view
My Question is something similar to this.
I have 2 CGPathRef and 1 will be moved by finger touch. I want to find that whether the 2 CGPathRef are intersected? That question was asked almost 2 years ago and I want to know whether something has been found in the mean time.
This is fairly old, but I found it looking for a similar solution, in my problem I wanted to find when a circle overlapped with a path (a special case of your question).
I solved this by using CGPathCreateCopyByStrokingPath to create a stroked version of the original path using the radius of the circle as the stroke width. If the center point of the circle overlaps the stroked path then the original path overlaps the circle.
BOOL CGPathIntersectsCircle(CGPathRef path, CGPoint center, CGFloat radius)
{
CGPathRef fuzzyPath;
fuzzyPath = CGPathCreateCopyByStrokingPath(path, NULL, radius,
kCGLineCapRound,
kCGLineJoinRound, 0.0);
if (CGPathContainsPoint(fuzzyPath, NULL, center, NO))
{
CGPathRelease(fuzzyPath);
return YES;
}
CGPathRelease(fuzzyPath);
return NO;
}
Edit: A minor bug where the fuzzyPath was not released.
I have written a small pixel based path collision detection API for CGPathRefs. It requires that you add a few source directories to your project, and it only works with ARC, but it should at least show you how one might do something like this. It basically draws the two paths on two separate contexts, and then does pixel-by-pixel checks to see if any pixels are on both paths. Obviously this would be slow to run every time the user drags their finger, but it certainly could be done once every half second or so, maybe not even on the main thread.
This is the easiest way I've found of doing something like this, and it may easily be that there's no better way, besides using lots of math.
The source on Github
A quick Youtube demo.
Generally speaking, finding the intersection of two arbitrary CGPaths is going to be very complex.
There are ways to do approximations. Checking the intersections of the bounding boxes is a good first step. You can also subdivide the curve and repeat the process to get better approximations. Another option is to flatten the paths and see if any of the line segments of the flattened paths intersect.
For the general case, however, things get very nasty very fast. Consider, for example, the fact that two cubic bezier segments (never mind an entire path... just one segment) can intersect with another segment at up to 6 points. The more segments in your path, the more potential intersections. There is also the problem of degenerate bezier curves where a segment has a cusp that just touches one point of another segment. Does that count as an intersection? (sometimes yes, sometimes no)
It's not clear from your question, but you might also want to consider the intersections of the strokes that are applied to the curves, and correctly account for line joins and miters. That that gets even harder. Macromedia FreeHand (a drawing program similar to Adobe Illustrator) had a very large, complex, intensely mathematical library for discovering arbitrary bezier curve intersections. The problem is not easily solved.
To find the intersection of two CAShapeLayers, we can use below method, CAShapeLayer won't return frame. But we can get the refPath frame using CGPathGetBoundingBox. But this one will give the frame in rectangle.I thing you may understand.
if (CGRectIntersectsRect(CGPathGetBoundingBox(layer.path), CGPathGetBoundingBox(layer.path)))
I have a rectangular CGMutablePathRef and I want to subtract a circle which lays exactly on centered on one edge of that rectangle, so the edge does not cross the circle anymore.
There seem to be no functions to intersect or subtract paths from another. How can I do it?
You need to look at the CGContext you are drawing into and use the clipping on the context rather than the path.
Apple's documentation is here.
If I understand your question, you can draw your rectangle into the context and then "clip out" the circle path. If you are filling the paths, you'll need to pay attention to the winding rules.
Alternatively, you can make your path with a series of commands such as CGPathAddLineToPoint, CGPathAddArcToPoint, etc and then stoke the path in your context. If you use this approach, you can then apply transforms to the final path for scaling and rotating as needed. Depending on what you are trying to accomplish, this may be the better approach.