I am attempting to draw and arc using "appendBezierPathWithArcFromPoint" but when run, it doesn't draw the arc. The "lineToPont" works and other "NSBezierPath" commands work. Can anyone please help by telling me what I am doing wrong. I have done quite a bit of serching with no clear answer. I am using MAC OS 10.9.2 and XCode 5.1. Below is the snipet of code. Thank You.
#import "MyView.h"
#implementation MyView
- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
}
return self;
}
- (void)drawRect:(NSRect)dirtyRect
{
[super drawRect:dirtyRect];
NSRect bounds = [self bounds];
NSBezierPath *thePath = [NSBezierPath bezierPath]; // all drawing instruction goes to thePath.
[NSBezierPath setDefaultLineWidth:2.0];
[[NSColor blackColor] set];
[thePath moveToPoint:NSMakePoint(0, 0)];
[thePath lineToPoint:NSMakePoint(100, 30)];
[thePath appendBezierPathWithArcFromPoint:NSMakePoint(100,30) toPoint:NSMakePoint(130,0) radius:30];
[thePath stroke];
}
#end
Looking at the docs, it seems like the problem is that your fromPoint is equal to the current point. The docs say:
The created arc is defined by a circle inscribed inside the angle specified by three points: the current point, the fromPoint parameter, and the toPoint parameter (in that order).
So I think that means that the fromPoint must be different from the current point.
Related
I couldn't found any line drawing primitive in Cocoa at NSView level. The only thing I've been found is NSBezierPath. Is this a preferred way? Or is there another way which I couldn't discovered?
NSBezierPath is exactly what you should be using. If you just want to draw a straight line from one point to another, use the class method:
+strokeLineFromPoint:(NSPoint)point1 toPoint:(NSPoint)point2
Cocoa uses an implicit drawing stack, and an invalidation model. In your NSView, when state changes that would cause the view to draw differently, you invoke -[self setNeedsDisplay:] to tell the drawing system that you need to be redrawn. At some point in very near future, actually the end of the current event loop, your view's drawRect: method will be called. That's your opportunity to draw anything you'd like.
There's an implicit focus stack, meaning that when your view's drawRect: is called, drawing is focused on and clipped to the bounds of your view in the window it is in. You can then call functions like [[NSColor redColor] set]; and NSRectFill([self bounds]);
Here's an example:
#interface MyView : NSView {
#private
NSColor *lineColor;
NSInteger clickCount;
}
#end
#implementation MyView
- (void)setLineColor:(NSColor *)color {
if (color != lineColor) {
[lineColor release];
lineColor = [color copy];
[self setNeedsDisplay:YES]; /// We changed what we'd draw, invalidate our drawing.
}
}
- (void)mouseDown:(NSEvent *)mouseDown {
clickCount = (clickCount == 6) ? 0 : (clickCount + 1);
CGFloat hue = clickCount / 6.0;
[self setLineColor:[NSColor colorWithCalibratedHue:hue saturation:1.0 brightness:1.0 alpha:1.0]];
}
- (void)drawRect:(NSRect)dirtyRect {
NSBezierPath *line = [NSBezierPath bezierPath];
[line moveToPoint:NSMakePoint(NSMinX([self bounds]), NSMinY([self bounds]))];
[line lineToPoint:NSMakePoint(NSMaxX([self bounds]), NSMaxY([self bounds]))];
[line setLineWidth:5.0]; /// Make it easy to see
[[self lineColor] set]; /// Make future drawing the color of lineColor.
[line stroke];
}
#end
The view should draw a diagonal line, and each time it is clicked the line should change color.
I tried the example given by Jon and found that i needed to add 2 minor fixes to the code sample above.
insert an allocator of the NSColor into the init block
change the second moveToPoint so that it becomes a lineToPoint
Once i fixed this, i found the code snippit very useful.
NOTE: you probably need to dealloc the NSColor as well.
#interface PropertyPropagateView : NSView {
#private
NSColor *lineColor;
NSInteger clickCount;
}
#end
#implementation PropertyPropagateView
- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
lineColor=[NSColor blueColor];
}
return self;
}
- (void)dealloc
{
[super dealloc];
}
- (void)setLineColor:(NSColor *)color {
if (color != lineColor) {
[lineColor release];
lineColor = [color copy];
[self setNeedsDisplay:YES]; /// We changed what we'd draw, invalidate our drawing.
}
}
- (void)mouseDown:(NSEvent *)mouseDown {
clickCount = (clickCount == 6) ? 0 : (clickCount + 1);
CGFloat hue = clickCount / 6.0;
[self setLineColor:[NSColor colorWithCalibratedHue:hue saturation:1.0 brightness:1.0 alpha:1.0]];
}
- (void)drawRect:(NSRect)dirtyRect
{
NSBezierPath *line = [NSBezierPath bezierPath];
[line moveToPoint:NSMakePoint(NSMinX([self bounds]), NSMinY([self bounds]))];
[line lineToPoint:NSMakePoint(NSMaxX([self bounds]), NSMaxY([self bounds]))];
[line setLineWidth:5.0]; /// Make it easy to see
[lineColor set]; /// Make future drawing the color of lineColor.
[line stroke];
}
#end
Just to add some info, I make a habit of making sure the graphics state is saved and restored before and after drawing, to keep things zippy.
- (void)drawRect:(NSRect)dirtyRect {
[[NSGraphicsContext currentContext] saveGraphicsState]
NSBezierPath *line = [NSBezierPath bezierPath];
[line moveToPoint:NSMakePoint(NSMinX([self bounds]), NSMinY([self bounds]))];
[line lineToPoint:NSMakePoint(NSMaxX([self bounds]), NSMaxY([self bounds]))];
[line setLineWidth:5.0]; /// Make it easy to see
[[self lineColor] set]; /// Make future drawing the color of lineColor.
[line stroke];
[[NSGraphicsContext currentContext] restoreGraphicsState]
}
I have asked (and answered) a very similar question before. That question was able to be solved because I knew the dirtyRect, and thus, knew where I should draw the image. Now, I am seeing the same behavior with an subclassed NSButtonCell:
In my subclass, I am simply overriding the drawImage:withFrame:inView method to add a shadow.
- (void)drawImage:(NSImage *)image withFrame:(NSRect)frame inView:(NSView *)controlView {
NSGraphicsContext *ctx = [NSGraphicsContext currentContext];
[ctx saveGraphicsState];
// Rounded Rect
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:frame cornerRadius:kDefaultCornerRadius];
NSBezierPath *shadowPath = [NSBezierPath bezierPathWithRoundedRect:NSInsetRect(frame, 0.5, 0.5) cornerRadius:kDefaultCornerRadius]; // prevents the baground showing through the image corner
// Shadow
NSColor *shadowColor = [UAColor colorWithCalibratedWhite:0 alpha:0.8];
[NSShadow setShadowWithColor:shadowColor
blurRadius:3.0
offset:NSMakeSize(0, -1)];
[[NSColor colorWithCalibratedWhite:0.635 alpha:1.0] set];
[shadowPath fill];
[NSShadow clearShadow];
// Background Gradient in case image is nil
NSGradient *gradient = [[NSGradient alloc] initWithStartingColor:[UAColor grayColor] endingColor:[UAColor lightGrayColor]];
[gradient drawInBezierPath:shadowPath angle:90.0];
[gradient release];
// Image
if (image) {
[path setClip];
[image drawInRect:frame fromRect:CGRectZero operation:NSCompositeSourceAtop fraction:1.0];
}
[ctx restoreGraphicsState];
}
It seems all pretty standard, but the image is still drawing outside of the containing scrollview bounds. How can I avoid this?
You shouldn't call -setClip on an NSBezierPath unless you really mean it. Generally you want ‑addClip, which adds your clipping path to the set of current clipping regions.
NSScrollView works by using its own clipping path and you're blowing that path away before drawing your image.
This tripped me up for a long time too.
I am creating a NSView subclass that has rounded corners. This view is meant to be a container and other subviews will be added to it. I am trying to get the rounded corners of the NSView to clip all of the subview's corners as well, but am not able to get it.
- (void)drawRect:(NSRect)dirtyRect {
NSRect rect = [self bounds];
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:self.radius yRadius:self.radius];
[path addClip];
[[NSColor redColor] set];
NSRectFill(dirtyRect);
[super drawRect:dirtyRect];
}
The red is just for example. If I add a subview to the rect, The corners are not clipped:
How can I achieve this?
Using Core Animation layers will clip sublayers correctly.
In your container NSView subclass:
- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.layer = _layer; // strangely necessary
self.wantsLayer = YES;
self.layer.masksToBounds = YES;
self.layer.cornerRadius = 10.0;
}
return self;
}
You can do it in the interface builder without subclassing adding User Defined Runtime Attributes"
Have you tried clipping with layers?
self.layer.cornerRadius = self.radius;
self.layer.masksToBounds = YES;
Ah, sorry, somehow I've missed that you were talking about NSView, not UIView. It would be hard to clip NSView subviews in all cases because it seems that most of Cocoa standard views set their own clipping path. It might be easier to layout subviews with some paddings and avoid need for clipping.
the outer edges of my circle at each point of the compass are getting cropped (presumably by the rect frame). How do I get the circle to display within the frame? (This is getting created from a button click):
In my AppController.m
#import "AppController.h"
#import "MakeCircle.h"
#implementation AppController
- (IBAction)makeCircle:(id)sender {
MakeCircle* newCircle = [[MakeCircle alloc] initWithFrame:NSMakeRect(100.0, 100.0, 30.0, 30.0)];
[[[[NSApplication sharedApplication] mainWindow] contentView] addSubview:newCircle];
[newCircle release];
}
#end
In my MakeCircle.m
- (void)drawRect:(NSRect)rect {
[self setNeedsDisplay:YES];
[[NSColor blackColor] setStroke];
// Create our circle path
NSBezierPath* circlePath = [NSBezierPath bezierPath];
[circlePath appendBezierPathWithOvalInRect: rect];
//give the line some thickness
[circlePath setLineWidth:4];
// Outline and fill the path
[circlePath stroke];
}
Thanks.
I think you see only half of the edge, right? You can calculate the half of the thickness of the edge and subtract that from the rectangle:
#define STROKE_COLOR ([NSColor blackColor])
#define STROKE_WIDTH (4.0)
- (void)drawRect:(NSRect)dirtyRect {
NSBezierPath *path;
NSRect rectangle;
/* Calculate rectangle */
rectangle = [self bounds];
rectangle.origin.x += STROKE_WIDTH / 2.0;
rectangle.origin.y += STROKE_WIDTH / 2.0;
rectangle.size.width -= STROKE_WIDTH / 2.0;
rectangle.size.height -= STROKE_WIDTH / 2.0;
path = [NSBezierPath path];
[path appendBezierPathWithOvalInRect:rectangle];
[path setLineWidth:STROKE_WIDTH];
[STROKE_COLOR setStroke];
[path stroke];
}
I have no Mac at the moment, so I can't test it, but I think it should solve your problem.
Als don't call [self setNeedsDisplay:YES]. The method is used when you want to redraw your whole NSView, and calling it from the drawing method is a little bit recursive. That's why I'm surprised your code actually draws something.
And I have another tip: [[NSApplication sharedApplication] mainWindow] is actually the same as [NSApp mainWindow]. NSApp is a global variable containing the main application.
Hope it helps,
ief2
I'm having some very basic problems changing line color/width when drawing different lines (intended for a chart) with NSBezierPath. The following code should make it clear what I'm trying to do:
#import "DrawTest.h"
#implementation DrawTest
- (id)initWithFrame:(NSRect)frameRect
{
NSLog(#"in 'initWithFrame'...");
if ((self = [super initWithFrame:frameRect]) != nil)
{
[self drawBaseline];
[self display]; // ...NO!
[self drawPlotline];
}
return self;
}
- (void)drawBaseline
{
NSRect windowRect;
int width, height;
windowRect = [self bounds];
width = round(windowRect.size.width);
height = round(windowRect.size.height);
theLineWidth=1.0;
[[NSColor grayColor] set];
// allocate an instance of 'NSBezierPath'...
path = [[NSBezierPath alloc]init];
// draw a HORIZONTAL line...
[path moveToPoint:NSMakePoint(0,height/2)];
[path lineToPoint:NSMakePoint(width,height/2)];
}
- (void)drawPlotline
{
theLineWidth=10.0;
[[NSColor redColor] set];
// draw a VERTICAL line...
[path moveToPoint:NSMakePoint(100,125)]; // x,y
[path lineToPoint:NSMakePoint(100,500)];
}
- (void)drawRect:(NSRect)rect
{
NSLog(#"in 'drawRect'...");
// draw the path line(s)
// [[NSColor redColor] set];
[path setLineWidth:theLineWidth];
[path stroke];
}
- (void)dealloc
{
[path release];
[super dealloc];
}
#end
The problem obviously lies in the fact that 'drawRect' only gets called ONCE (after both methods have run), with the result that all lines appear in the last color and line width set. I've tried calling [self display] etc. in the hope of forcing 'drawRect' to redraw the NSView contents between the two method calls, but to no avail.
Can anyone suggest a basic strategy to achieve what I'm trying to do here, please? Any help would be much appreciated.
Quick answer is: move [self drawBaseline] and [self drawPlotline] inside drawRect.
Also, you need to call [path stroke] once per color, before changing the color. So, the pseudo-code is something like
-(void)drawRect:(NSRect)rect
{
NSBezierPath*path1=...
construct the path for color red...
[[NSColor redColor] set];
[path1 stroke];
NSBezierPath*path2=...
construct the path for color blue...
[[NSColor blueColor] set];
[path2 stroke];
}
Remember:
[path moveToPoint:] etc. does not draw the path. It just constructs the path inside the object. Once it's constructed, you stroke the path using [path stroke].
Also, the color is not the property of the path constructed inside the NSBezierPath instance. So, [color set] is not recorded inside your NSBezierPath instance! It's the property of the graphic context. Conceptually, 1. you construct the path. 2. you set the color to the context. 3. you stroke the path.
In Cocoa, it's not that you tell the system when to draw, when to refresh, etc. Cocoa tells you when to draw, by calling your drawRect:. The graphic context on which you draw is not available outside of drawRect:, unless you create off-screen context yourself. So, don't bother drawing beforehand. Just draw everything inside drawRect .