Concave NSBezierPath - cocoa

I have the following drawing code:
[[NSColor redColor] set];
NSRect fillRect = NSMakeRect(bounds.size.width - 20.0f, 0.0f, 20.0f, 20.0f);
NSBezierPath *bezier1 = [NSBezierPath bezierPathWithRoundedRect:fillRect xRadius:10.0f yRadius:10.0f];
[bezier1 fill];
NSRect fill2 = fillRect;
fill2.origin.x += 5;
fill2.origin.y += 5;
fill2.size.width -= 10.0f;
fill2.size.height -= 10.0f;
NSBezierPath *bezier2 = [NSBezierPath bezierPathWithRoundedRect:fill2 xRadius:5.0f yRadius:5.0f];
[[NSColor greenColor] set];
[bezier2 fill];
Which result in this:
How do I reach that the inner green circle is transparent? Replacing the green NSColor with a transparent color doesn't work, logical ;-)
Is there a way to intersect instances of NSBezierPath or solve this with another approach?

I think what you're looking for is a bezier path for a ring, you can do that by creating a single NSBezierPath and setting the winding rule:
[[NSColor redColor] set];
NSRect fillRect = NSMakeRect(bounds.size.width - 20.0f, 0.0f, 20.0f, 20.0f);
NSBezierPath *bezier1 = [NSBezierPath new];
[bezier1 setWindingRule:NSEvenOddWindingRule]; // set the winding rule for filling
[bezier1 appendBezierPathWithRoundedRect:fillRect xRadius:10.0f yRadius:10.0f];
NSRect innerRect = NSInsetRect(fillRect, 5, 5); // the bounding rect for the hole
[bezier1 appendBezierPathWithRoundedRect:innerRect xRadius:5.0f yRadius:5.0f];
[bezier1 fill];
The NSEvenOddWindingRule rule determines whether to fill a particular point by considering a line from that point to outside the overall path bounds; if that line crosses an even number of paths it is not filled, otherwise it is. So any point in the inner circle will not be filled, while points between the two will be - result a ring.

Related

How to rotate a line to 90 degree using animation in Xcode?

I have a line drawn over the circle using UIBezierPath and CAShapeLayer which lies vertically. I want to rotate the line to 90 degree along with animation so that after animation the line lies horizontally.I have tried many animation solutions but the line does not rotates along the circle with same center point and it goes out of the circle. I need to rotate the line with animation without changing the center point.
UIBezierPath *CirclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(_width*4, _height*4) radius: (_width*3.5)
startAngle:0 endAngle: (2*3.14) clockwise:YES];
CAShapeLayer *Circlelayer = [CAShapeLayer layer];
Circlelayer.path = [CirclePath CGPath];
Circlelayer.strokeColor = [[UIColor orangeColor]CGColor];
Circlelayer.lineWidth = _width*0.6;
Circlelayer.fillColor = [[UIColor clearColor] CGColor];
[self.layer addSublayer:Circlelayer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(_width*4, _height*0.2)];
[path addLineToPoint:CGPointMake(_width*4, _height*7.8)];
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.path = [path CGPath];
pathLayer.strokeColor = [[UIColor whiteColor]CGColor];
pathLayer.lineWidth = _width*0.8;
pathLayer.fillColor = [[UIColor whiteColor]CGColor];
[self.layer addSublayer:pathLayer];
Thanks in advance.
You can add pathLayer as sublayer to circleLayer, so whenever transformation applied to the circleLayer will also aplied to pathLayer.

Need sample code to swing needle in Cocoa/Quartz 2d Speedometer for Mac App

I'm building this to run on the Mac, not iOS - which is quit different. I'm almost there with the speedo, but the math of making the needle move up and down the scale as data is input eludes me.
I'm measuring wind speed live, and want to display it as a gauge - speedometer, with the needle moving as the windspeed changes. I have the fundamentals ok. I can also - and will - load the images into holders, but later. For now I want to get it working ...
- (void)drawRect:(NSRect)rect
{
NSRect myRect = NSMakeRect ( 21, 21, 323, 325 ); // set the Graphics class square size to match the guage image
[[NSColor blueColor] set]; // colour it in in blue - just because you can...
NSRectFill ( myRect );
[[NSGraphicsContext currentContext] // set up the graphics context
setImageInterpolation: NSImageInterpolationHigh]; // highres image
//-------------------------------------------
NSSize viewSize = [self bounds].size;
NSSize imageSize = { 320, 322 }; // the actual image rectangle size. You can scale the image here if you like. x and y remember
NSPoint viewCenter;
viewCenter.x = viewSize.width * 0.50; // set the view center, both x & y
viewCenter.y = viewSize.height * 0.50;
NSPoint imageOrigin = viewCenter;
imageOrigin.x -= imageSize.width * 0.50; // set the origin of the first point
imageOrigin.y -= imageSize.height * 0.50;
NSRect destRect;
destRect.origin = imageOrigin; // set the image origin
destRect.size = imageSize; // and size
NSString * file = #"/Users/robert/Documents/XCode Projects/xWeather Graphics/Gauge_mph_320x322.png"; // stuff in the image
NSImage * image = [[NSImage alloc] initWithContentsOfFile:file];
//-------------------------------------------
NSSize view2Size = [self bounds].size;
NSSize image2Size = { 149, 17 }; // the orange needle
NSPoint view2Center;
view2Center.x = view2Size.width * 0.50; // set the view center, both x & y
view2Center.y = view2Size.height * 0.50;
NSPoint image2Origin = view2Center;
//image2Origin.x -= image2Size.width * 0.50; // set the origin of the first point
image2Origin.x = 47;
image2Origin.y -= image2Size.height * 0.50;
NSRect dest2Rect;
dest2Rect.origin = image2Origin; // set the image origin
dest2Rect.size = image2Size; // and size now is needle size
NSString * file2 = #"/Users/robert/Documents/XCode Projects/xWeather Graphics/orange-needle01.png";
NSImage * image2 = [[NSImage alloc] initWithContentsOfFile:file2];
// do image 1
[image setFlipped:YES]; // flip it because everything else is in this exerecise
// do image 2
[image2 setFlipped:YES]; // flip it because everything else is in this exerecise
[image drawInRect: destRect
fromRect: NSZeroRect
operation: NSCompositeSourceOver
fraction: 1.0];
[image2 drawInRect: dest2Rect
fromRect: NSZeroRect
operation: NSCompositeSourceOver
fraction: 1.0];
NSBezierPath * path = [NSBezierPath bezierPathWithRect:destRect]; // draw a red border around the whole thing
[path setLineWidth:3];
[[NSColor redColor] set];
[path stroke];
}
// flip the ocords
- (BOOL) isFlipped { return YES; }
#end
The result is here. The gauge part that is. Now all I have to do is make the needle move in response to input.
Apple has some sample code, called SpeedometerView, which does exactly what you're asking. It'll surely take some doing to adapt it for your use, but it's probably a decent starting point.

Change border corlor of NSTableView

Can I change the color of NSTableView's border. The gray line at the pointer.
Thanks.
You need to SubClass your NSScrollView . NSScrollView doesn't usually do any drawing, and probably has a weird interaction with its child views in that way. I'd suggest putting something like
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
// We're going to be modifying the state for this,
// so allow it to be restored later
[NSGraphicsContext saveGraphicsState];
// Choose the correct color; isFirstResponder is a custom
// ivar set in becomeFirstResponder and resignFirstResponder
[[NSColor redColor]set];
// Create two rects, one slightly outset from the bounds,
// one slightly inset
NSRect bounds = [self bounds];
NSRect innerRect = NSInsetRect(bounds, 2, 2);
NSRect outerRect = NSMakeRect(bounds.origin.x - 2,
bounds.origin.y - 2,
bounds.size.width + 4,
bounds.size.height + 4);
// Create a bezier path using those two rects; this will
// become the clipping path of the context
NSBezierPath * clipPath = [NSBezierPath bezierPathWithRect:outerRect];
[clipPath appendBezierPath:[NSBezierPath bezierPathWithRect:innerRect]];
// Change the current clipping path of the context to
// the enclosed area of clipPath; "enclosed" defined by
// winding rule. Drawing will be restricted to this area.
// N.B. that the winding rule makes the order that the
// rects were added to the path important.
[clipPath setWindingRule:NSEvenOddWindingRule];
[clipPath setClip];
// Fill the rect; drawing is clipped and the inner rect
// is not drawn in
[[NSBezierPath bezierPathWithRect:outerRect] fill];
[NSGraphicsContext restoreGraphicsState];
}
Easy way to set border to scrollview
let scrollView = NSScrollView()
scrollView.contentView.wantsLayer = true
scrollView.contentView.layer?.borderColor = NSColor.black
scrollView.contentView.layer?.cornerRadius = 6

How do I draw a top-right rounded corner on a NSButton?

There are several ways to four draw rounded corners in Cocoa, either using CALayer or NSBezierPath. But how can I draw a single rounded corner on a NSButton?
The current structure of the button is:
NSButton *button = [[NSButton alloc] initWithFrame:NSMakeRect(0, 0, 50, 20)];
[button setTitle:#"My button"];
[button.cell setBackgroundColor:[NSColor grayColor]];
What I want to do is have a rounded top-right corner with a radius of 10. How do I do that?
SOLUTION:
Override drawRect:
CGFloat cornerRadius = 10;
NSBezierPath *path = [NSBezierPath bezierPath];
// Start drawing from upper left corner
[path moveToPoint:NSMakePoint(NSMinX(self.bounds), NSMinY(self.bounds))];
// Draw top border and a top-right rounded corner
NSPoint topRightCorner = NSMakePoint(NSMaxX(self.bounds), NSMinY(self.bounds));
[path lineToPoint:NSMakePoint(NSMaxX(self.bounds) - cornerRadius, NSMinY(self.bounds))];
[path curveToPoint:NSMakePoint(NSMaxX(self.bounds), NSMinY(self.bounds) + cornerRadius)
controlPoint1:topRightCorner
controlPoint2:topRightCorner];
// Draw right border, bottom border and left border
[path lineToPoint:NSMakePoint(NSMaxX(self.bounds), NSMaxY(self.bounds))];
[path lineToPoint:NSMakePoint(NSMinX(self.bounds), NSMaxY(self.bounds))];
[path lineToPoint:NSMakePoint(NSMinX(self.bounds), NSMinY(self.bounds))];
// Fill path
[[NSColor whiteColor] setFill];
[path fill];
You need to use NSBezierPath and draw a custom button as per your requirement.
You need to work something like this :
NSBezierPath *path = [NSBezierPath bezierPath];
[path setLineWidth:1];
[path moveToPoint:NSMakePoint(0, 0)];
[path curveToPoint:NSMakePoint(width * 0.1, height)
controlPoint1:NSMakePoint(width * 0.05, height)
controlPoint2:NSMakePoint(width * 0.03, height * 0.05)];
And so on... Untill you make a closed button area and you get exact shape.
Based on Christoffer Christoffer's approach, I've created a more general solution where you can choose which corner you want to round. It's in Swift 3 and also works on both macOS & iOS/tvOS.
You can find the Swift Playground here: https://github.com/janheiermann/BezierPath-Corners

How to get the path Quartz is using to stroke a NSBezierPath

I'm using this code to stroke a NSBezierPath with a wide, dashed, black line.
(c and strForBezier are defined somewhere else)
NSGlyph glyph;
for(n = 0; n < len; n++) {
glyph = [font glyphWithName: [strForBezier substringWithRange:NSMakeRange(n, 1)]];
[path appendBezierPathWithGlyph: glyph inFont: font];
}
CGFloat pattern2[4]; pattern2[0]=5*c; pattern2[1]=2*c; pattern2[2]=2*c; pattern2[3]=2*c;
[path setLineDash:pattern2 count:4 phase:0];
[path setLineWidth:c];
[path stroke];
[[NSColor blueColor] set ];
[path fill];
How can I get the black NSBezierPath ? I'm making the assumption that a NSBezierPath is built and filled to stroke the initial curve.
You can create a path by dashing and stroking an existing path, but that requires to use CGPathRef instead of NSBezierPath.
CGMutablePathRef path0 = CGPathCreateMutable();
CGAffineTransform transform = CGAffineTransformMakeTranslation(20, 20);
// initial position is {20, 20}
CGGlyph glyph;
for(n = 0; n < len; n++)
{
glyph = [font glyphWithName: [strForBezier substringWithRange:NSMakeRange(n, 1)]];
CGPathRef glyphPath = CTFontCreatePathForGlyph((__bridge CTFontRef) font, glyph, NULL);
CGPathAddPath(path0, &transform, glyphPath);
CGPathRelease(glyphPath);
// append the glyph advance to the transform
CGSize advance;
CTFontGetAdvancesForGlyphs((__bridge CTFontRef) font, kCTFontDefaultOrientation, &glyph, &advance, 1);
transform.tx += advance.width;
transform.ty += advance.height;
}
CGFloat pattern2[4]; pattern2[0]=5*c; pattern2[1]=2*c; pattern2[2]=2*c; pattern2[3]=2*c;
CGPathRef path1 = CGPathCreateCopyByDashingPath(path0, NULL, 0, pattern2, 4);
CGPathRef path2 = CGPathCreateCopyByStrokingPath(path1, NULL, c, kCGLineCapButt, kCGLineJoinMiter, CGFLOAT_MAX);
CGContextRef context = [NSGraphicsContext currentContext].graphicsPort;
CGContextAddPath(context, path2);
CGContextDrawPath(context, kCGPathFill);
CGPathRelease(path0);
CGPathRelease(path1);
CGPathRelease(path2);
If you're not comfortable with CGPathRef, you may create a NSBezierPath then convert it to a CGPathRef using the method described in Apple documentation Building a CGPathRef From a NSBezierPath Object (the reverse is also possible).

Resources