I've created an NSPopUpButtonCell subclass to customize its appearance.
When one of the menu items is selected from the popup it animates the selection with the standard popup appearance on OS X 10.10.
I'd like it to animate with my custom appearance.
Customized PopUp
Animating Selection
My Implementation
- (void)drawBezelWithFrame:(NSRect)frame inView:(NSView *)controlView {
[[NSGraphicsContext currentContext] saveGraphicsState];
NSBezierPath *rectanglePath = [NSBezierPath bezierPathWithRoundedRect:frame xRadius:5.0 yRadius:5.0];
[[NSColor colorWithWhite:0.7 alpha:1.0] setFill];
[rectanglePath fill];
float width = frame.size.width;
float height = frame.size.height;
NSBezierPath *path = [NSBezierPath bezierPath];
[path moveToPoint:CGPointMake(width - 5, height/2 - 2)];
[path lineToPoint:CGPointMake(width - 10, height/2 - 7)];
[path lineToPoint:CGPointMake(width - 15, height/2 - 2)];
[path moveToPoint:CGPointMake(width - 5, height/2 + 2)];
[path lineToPoint:CGPointMake(width - 10, height/2 + 7)];
[path lineToPoint:CGPointMake(width - 15, height/2 + 2)];
[path setLineWidth:2.0];
[[NSColor darkGrayColor] setStroke];
[path stroke];
[NSGraphicsContext restoreGraphicsState];
}
You have to turn off bordered property on Interface Builder.
If bordered is actualy off, you have to switch it on and next off.
Better way is use
- (void)drawBorderAndBackgroundWithFrame:(NSRect)cellFrame inView:(NSView *)controlView
Related
I want to have an NSTextField with rounded corners, for that I subclassed my NSTextFieldCell, and used drawInteriorWithFrame:(NSRect) inView:(NSView *)
My code looks like that :
-(void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
//Color Declarations
NSColor* fillColor = [NSColor colorWithCalibratedRed: 1 green: 1 blue: 1 alpha: 1];
NSColor* strokeColor = [NSColor colorWithCalibratedRed: 0.679 green: 0.679 blue: 0.679 alpha: 1];
//Shadow Declarations
NSShadow* shadow = [[NSShadow alloc] init];
[shadow setShadowColor: strokeColor];
[shadow setShadowOffset: NSMakeSize(0.1, 0.1)];
[shadow setShadowBlurRadius: 4];
//Rounded Rectangle Drawing
NSBezierPath* roundedRectanglePath = [NSBezierPath bezierPathWithRoundedRect:cellFrame xRadius: 10 yRadius: 10];
[fillColor setFill];
[roundedRectanglePath fill];
//Rounded Rectangle Inner Shadow
NSRect roundedRectangleBorderRect = NSInsetRect([roundedRectanglePath bounds], -shadow.shadowBlurRadius, -shadow.shadowBlurRadius);
roundedRectangleBorderRect = NSOffsetRect(roundedRectangleBorderRect, -shadow.shadowOffset.width, -shadow.shadowOffset.height);
roundedRectangleBorderRect = NSInsetRect(NSUnionRect(roundedRectangleBorderRect, [roundedRectanglePath bounds]), -1, -1);
NSBezierPath* roundedRectangleNegativePath = [NSBezierPath bezierPathWithRect: roundedRectangleBorderRect];
[roundedRectangleNegativePath appendBezierPath: roundedRectanglePath];
[roundedRectangleNegativePath setWindingRule: NSEvenOddWindingRule];
[NSGraphicsContext saveGraphicsState];
{
NSShadow* shadowWithOffset = [shadow copy];
CGFloat xOffset = shadowWithOffset.shadowOffset.width + round(roundedRectangleBorderRect.size.width);
CGFloat yOffset = shadowWithOffset.shadowOffset.height;
shadowWithOffset.shadowOffset = NSMakeSize(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset));
[shadowWithOffset set];
[[NSColor grayColor] setFill];
[roundedRectanglePath addClip];
NSAffineTransform* transform = [NSAffineTransform transform];
[transform translateXBy: -round(roundedRectangleBorderRect.size.width) yBy: 0];
[[transform transformBezierPath: roundedRectangleNegativePath] fill];
}
[NSGraphicsContext restoreGraphicsState];
[strokeColor setStroke];
[roundedRectanglePath setLineWidth: 2];
[roundedRectanglePath stroke];
[super drawInteriorWithFrame:cellFrame inView:controlView];
}
The result looks great apart from borders which are not rounded. Images are better than words : My NSTextField
All help is accepted ! :D Thank you in advance.
UPDATE
I did a copy paste with the code of the site you said, but I'm still having the same trouble...
NSTextField with on rounded corner
You may simply choose the Border of Text Field in its Attributes Inspector if you want a text field with its all corners rounded. Or to draw a text field with any one round corner, go through this
Also if you want draw a custom all round corner text field, just follow the steps in above link, but instead of drawing a bezier path with one round corner, simply draw a bezier path with all corners round using
[NSBezierPath bezierPathWithRoundedRect:textfieldrect xRadius:10 yRadius:10]
The title is fairly specific about what I want to do. I have a custom view and have drawn some elements inside that view. How do I change the autosizing properties programmtically? I have looked around and couldn't find anything that would help me in my case.
Objective C:
- (void)drawRect:(NSRect)HTMLContent {
NSGraphicsContext* gc = [NSGraphicsContext currentContext];
[gc saveGraphicsState];
int height = [[NSScreen mainScreen] frame].size.height;
int screenwidth = [[NSScreen mainScreen] frame].size.width;
int emailInnerContentWidth = screenwidth - 510;
// Horizontal Line
[[NSColor colorWithCalibratedRed:.8 green:.82 blue:.83 alpha:1] setFill];
NSBezierPath* drawingPath = [NSBezierPath bezierPathWithRect:NSMakeRect(337, 570, emailInnerContentWidth, 2)];
[drawingPath fill];
// Social Icon
NSRect outrect = NSMakeRect(355, 585, 58, 58);
[[NSColor lightGrayColor] setStroke];
[[NSColor colorWithPatternImage:[NSImage imageNamed:#"NoSocialIcon.png"]] setFill];
NSBezierPath* outcirclePath = [NSBezierPath bezierPath];
[outcirclePath appendBezierPathWithOvalInRect: outrect];
[[NSColor lightGrayColor] setStroke];[[NSImage imageNamed:#"NoSocialIcon.png"] drawInRect:outrect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1];
[outcirclePath stroke];
// Restore graphics state
[gc restoreGraphicsState];
}
I want to set these 2 shapes to not be affected by the bottom of the window changing. I want it to change when the top of the window changes height. I have looked on the Apple docs and nothing seemed to work. Thanks in advance
So, for each of the two shapes:
[shape setAutoresizingMask:NSViewNotSizable | NSViewMaxXMargin | NSViewMinYMargin];
How i can draw a line in a specific window after a button click?
i'm using this:
NSBezierPath * path = [NSBezierPath bezierPath];
[path setLineWidth: 4];
NSPoint startPoint = { 21, 21 };
NSPoint endPoint = { 128,128 };
[path moveToPoint: startPoint];
[path lineToPoint:endPoint];
[[NSColor redColor] set];
[path stroke];
but it work only if i put it in the:
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
how i can solve this?
my goal is to create an application that can draw lines , according to the details(coordinate) received
thank you.
You should not be drawing outside of a view or layer's drawing method (e.g. drawRect:). What you want to do, in broad strokes, is have a view there that draws the line when a flag is set, and when you click the button, set the flag and tell the view to redraw.
When you click the mouse event. This code will create line, curve and draw.
#import <Cocoa/Cocoa.h>
#interface BezierView : NSView {
NSPoint points[4];
NSUInteger pointCount;
}
#end
#import "BezierView.h"
#implementation BezierView
- (id)initWithFrame:(NSRect)frame {
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
}
return self;
}
- (void)drawRect:(NSRect)rect
{
NSBezierPath *control1 = [NSBezierPath bezierPath];
[control1 moveToPoint: points[0]];
[control1 lineToPoint: points[1]];
[[NSColor redColor] setStroke];
[control1 setLineWidth: 2];
[control1 stroke];
NSBezierPath *control2 = [NSBezierPath bezierPath];
[control2 moveToPoint: points[2]];
[control2 lineToPoint: points[3]];
[[NSColor greenColor] setStroke];
[control2 setLineWidth: 2];
[control2 stroke];
NSBezierPath *curve = [NSBezierPath bezierPath];
[curve moveToPoint: points[0]];
[curve curveToPoint: points[3]
controlPoint1: points[1]
controlPoint2: points[2]];
[[NSColor blackColor] setStroke];
CGFloat pattern[] = {4, 2, 1, 2};
[curve setLineDash: pattern
count: 4
phase: 1];
[[NSColor grayColor] setFill];
[curve fill];
[curve stroke];
}
- (void)mouseDown: (NSEvent*)theEvent
{
NSPoint click = [self convertPoint: [theEvent locationInWindow]
fromView: nil];
points[pointCount++ % 4] = click;
if (pointCount % 4 == 0)
{
[self setNeedsDisplay: YES];
}
}
#end
what I am trying to do is have an NSSlider and whenever I change the value I want it to update the color of my NSRect. Will I need to remove my NSRect and redraw it every time I want to change the color or how would I go about this? If I have to remove the Rect and redraw it how would I do that?
Thanks!
Heres the Method
arrowX is just an integer but what I want to change with the slider is the [[NSColor colorWithDeviceWhite:0 alpha:0.4] setFill]; specifically the alpha value between 0 and 1
- (void)drawRect:(NSRect)theRect
{
NSRect contentRect = NSInsetRect([self bounds], 0, 0);
NSBezierPath *path = [NSBezierPath bezierPath];
[path moveToPoint:NSMakePoint(_arrowX, NSMaxY(contentRect))];
[path lineToPoint:NSMakePoint(_arrowX / 2, NSMaxY(contentRect))];
[path lineToPoint:NSMakePoint(NSMaxX(contentRect), NSMaxY(contentRect))];
NSPoint topRightCorner = NSMakePoint(NSMaxX(contentRect), NSMaxY(contentRect));
[path curveToPoint:NSMakePoint(NSMaxX(contentRect), NSMaxY(contentRect))
controlPoint1:topRightCorner controlPoint2:topRightCorner];
[path lineToPoint:NSMakePoint(NSMaxX(contentRect), NSMinY(contentRect))];
NSPoint bottomRightCorner = NSMakePoint(NSMaxX(contentRect), NSMinY(contentRect));
[path curveToPoint:NSMakePoint(NSMaxX(contentRect), NSMinY(contentRect))
controlPoint1:bottomRightCorner controlPoint2:bottomRightCorner];
[path lineToPoint:NSMakePoint(NSMinX(contentRect), NSMinY(contentRect))];
[path curveToPoint:NSMakePoint(NSMinX(contentRect), NSMinY(contentRect))
controlPoint1:contentRect.origin controlPoint2:contentRect.origin];
[path lineToPoint:NSMakePoint(NSMinX(contentRect), NSMaxY(contentRect))];
NSPoint topLeftCorner = NSMakePoint(NSMinX(contentRect), NSMaxY(contentRect));
[path curveToPoint:NSMakePoint(NSMinX(contentRect), NSMaxY(contentRect))
controlPoint1:topLeftCorner controlPoint2:topLeftCorner];
[path lineToPoint:NSMakePoint(_arrowX / 2, NSMaxY(contentRect))];
[path closePath];
//SETTING THE VALUE OF 1 = WHITE AND 0 = BLACK.
[[NSColor colorWithDeviceWhite:0 alpha:0.4] setFill];
[path fill];
[NSGraphicsContext saveGraphicsState];
NSBezierPath *clip = [NSBezierPath bezierPathWithRect:[self bounds]];
[clip appendBezierPath:path];
[clip addClip];
[NSGraphicsContext restoreGraphicsState];
}
You need to add an instance variable that stores your NSColor. In your slider's action method, set the instance variable to the new color, and send setNeedsDisplay:YES to the view.
The following code renders a zombie with interchangeable coordinates. The only issue is that I have to duplicate the code and create new coordinate variables myself for each zombie. Is there any way I can create copies of the variables so I only have to have one method for multiple zombies verses three methods and three separate variables for three zombies?
int zombieyCord;
int zombiexCord;
-(void)renderZombie
{
NSBezierPath * path = [NSBezierPath bezierPath];
[path setLineWidth:4];
NSPoint center = {zombieyCord,zombiexCord};
[path moveToPoint: center];
[path appendBezierPathWithArcWithCenter:center
radius:5
startAngle:0
endAngle:360];
[[NSColor greenColor] set];
[path fill];
[[NSColor greenColor] set];
[path stroke];
}
Edit:
The spawning is great and works perfectly, but I want the zombies to move properly. Before, the code was that the method was called upon the player moving. This no longer works because I have to call an integer in the method.
+(void)entityZombie:(int)zombiexCord andY:(int)zombieyCord
{
/* Handle Zombie Movement*/
if (xcord != zombiexCord || ycord != zombieyCord)
{
if (xcord > zombiexCord){zombiexCord=zombiexCord+1;}
if (xcord < zombiexCord){zombiexCord=zombiexCord-1;}
if (ycord < zombieyCord){zombieyCord=zombieyCord-1;}
if (ycord > zombieyCord){zombieyCord=zombieyCord+1;}
/* Handle Zombie Render*/
NSBezierPath * path = [NSBezierPath bezierPath];
[path setLineWidth:4];
NSPoint center = {zombieyCord,zombiexCord};
[path moveToPoint: center];
[path appendBezierPathWithArcWithCenter:center
radius:5
startAngle:0
endAngle:360];
[[NSColor greenColor] set];
[path fill];
[[NSColor greenColor] set];
[path stroke];
}
}
Player movement handling just involves rendering the player then [Entity entityZombie];
But as said above, no longer works.
-(void)renderZombieWithX:(int)xCoord andY:(int)yCoord {
NSBezierPath * path = [NSBezierPath bezierPath];
[path setLineWidth:4];
NSPoint center = {xCoord,yCoord};
[path moveToPoint: center];
[path appendBezierPathWithArcWithCenter:center
radius:5
startAngle:0
endAngle:360];
[[NSColor greenColor] set];
[path fill];
[[NSColor greenColor] set];
[path stroke];
}
Call it like this:
[self renderZombieWithX:10 andY:20];
[self renderZombieWithX:13 andY:37];
//...
Further more there is a dedicated function for creating NSPoints:
NSPoint center = NSMakePoint(xCoord, yCoord);
which you might want to use in favor of:
NSPoint center = {xCoord,yCoord};
(see one of my answer's comments on why)
If performance is critical a cached approach like the following might bring performance gain:
static NSImage *sharedZombieStamp;
- (NSImage *)sharedZombie {
#synchronized(sharedZombieStamp) {
if (!sharedZombieStamp) {
CGFloat lineWidth = 4.0;
CGFloat radius = 5.0;
sharedZombieStamp = [[NSImage alloc] initWithSize:NSMakeSize((lineWidth + radius) * 2, (lineWidth + radius) * 2];
[zombieImage lockFocus];
NSBezierPath *path = [NSBezierPath bezierPath];
[path setLineWidth:4];
NSPoint center = NSMakePoint(lineWidth + radius, lineWidth + radius);
[path moveToPoint: center];
[path appendBezierPathWithArcWithCenter:center
radius:radius
startAngle:0
endAngle:360];
[[NSColor greenColor] set];
[path fill];
[[NSColor greenColor] set];
[path stroke];
[zombieImage unlockFocus];
}
}
return sharedZombieStamp;
}
-(void)renderZombieWithX:(int)xCoord andY:(int)yCoord {
NSImage *zombie = [self sharedZombie];
NSSize zombieSize = [zombie size];
[zombie drawAtPoint:NSMakePoint(xCoord - zombieSize.width / 2, yCoord - zombieSize.height / 2)
fromRect:NSMakeRect(0.0, 0.0, zombieSize.width, zombieSize.height)
operation:NSCompositeSourceOver
fraction:1.0];
}
This code is just out of my head though. Went thru no testing, whatsoever. Use with caution ;)