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.
Related
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
This is the way I'm painting a like-popover window with a bezier path. The BOOLEAN bAbajo makes the drawing window point upwards. If not bAbajo, it points upwards:
- (void)drawRect:(NSRect)dirtyRect
{
NSRect contentRect = NSInsetRect([self bounds], LINE_THICKNESS, LINE_THICKNESS);
NSBezierPath *path = [NSBezierPath bezierPath];
if (_bAbajo)
{
[path removeAllPoints];
[path moveToPoint:NSMakePoint(_arrowX, NSMinY(contentRect))];
[path lineToPoint:NSMakePoint(_arrowX + ARROW_WIDTH / 2, NSMinY(contentRect) + ARROW_HEIGHT)];
[path lineToPoint:NSMakePoint(NSMaxX(contentRect) - CORNER_RADIUS, NSMinY(contentRect) + ARROW_HEIGHT)];
NSPoint bottomRightCorner = NSMakePoint(NSMaxX(contentRect), NSMinY(contentRect) + ARROW_HEIGHT);
[path curveToPoint:NSMakePoint(NSMaxX(contentRect), NSMinY(contentRect) + ARROW_HEIGHT + CORNER_RADIUS)
controlPoint1:bottomRightCorner controlPoint2:bottomRightCorner];
[path lineToPoint:NSMakePoint(NSMaxX(contentRect), NSMaxY(contentRect) - CORNER_RADIUS)];
NSPoint topRightCorner = NSMakePoint(NSMaxX(contentRect), NSMaxY(contentRect));
[path curveToPoint:NSMakePoint(NSMaxX(contentRect) - CORNER_RADIUS, NSMaxY(contentRect) + CORNER_RADIUS) controlPoint1:topRightCorner controlPoint2:topRightCorner];
[path lineToPoint:NSMakePoint(NSMinX(contentRect) + CORNER_RADIUS, NSMaxY(contentRect) + CORNER_RADIUS)];
NSPoint topLeftCorner = NSMakePoint(NSMinX(contentRect), NSMaxY(contentRect));
[path curveToPoint:NSMakePoint(NSMinX(contentRect), NSMaxY(contentRect) - CORNER_RADIUS) controlPoint1:topLeftCorner controlPoint2:topLeftCorner];
[path lineToPoint:NSMakePoint(NSMinX(contentRect), NSMinY(contentRect) + CORNER_RADIUS + ARROW_HEIGHT)];
NSPoint bottomLeftCorner = NSMakePoint(NSMinX(contentRect), NSMinY(contentRect) + ARROW_HEIGHT);
[path curveToPoint:NSMakePoint(NSMinX(contentRect) + CORNER_RADIUS, NSMinY(contentRect) + ARROW_HEIGHT) controlPoint1:bottomLeftCorner controlPoint2:bottomLeftCorner];
[path lineToPoint:NSMakePoint(_arrowX - ARROW_WIDTH/2, NSMinY(contentRect) + ARROW_HEIGHT)];
}
else
{
[path removeAllPoints];
[path moveToPoint:NSMakePoint(_arrowX, NSMaxY(contentRect))];
[path lineToPoint:NSMakePoint(_arrowX + ARROW_WIDTH / 2, NSMaxY(contentRect) - ARROW_HEIGHT)];
[path lineToPoint:NSMakePoint(NSMaxX(contentRect) - CORNER_RADIUS, NSMaxY(contentRect) - ARROW_HEIGHT)];
NSPoint topRightCorner = NSMakePoint(NSMaxX(contentRect), NSMaxY(contentRect) - ARROW_HEIGHT);
[path curveToPoint:NSMakePoint(NSMaxX(contentRect), NSMaxY(contentRect) - ARROW_HEIGHT - CORNER_RADIUS)
controlPoint1:topRightCorner controlPoint2:topRightCorner];
[path lineToPoint:NSMakePoint(NSMaxX(contentRect), NSMinY(contentRect) + CORNER_RADIUS)];
NSPoint bottomRightCorner = NSMakePoint(NSMaxX(contentRect), NSMinY(contentRect));
[path curveToPoint:NSMakePoint(NSMaxX(contentRect) - CORNER_RADIUS, NSMinY(contentRect))
controlPoint1:bottomRightCorner controlPoint2:bottomRightCorner];
[path lineToPoint:NSMakePoint(NSMinX(contentRect) + CORNER_RADIUS, NSMinY(contentRect))];
[path curveToPoint:NSMakePoint(NSMinX(contentRect), NSMinY(contentRect) + CORNER_RADIUS)
controlPoint1:contentRect.origin controlPoint2:contentRect.origin];
[path lineToPoint:NSMakePoint(NSMinX(contentRect), NSMaxY(contentRect) - ARROW_HEIGHT - CORNER_RADIUS)];
NSPoint topLeftCorner = NSMakePoint(NSMinX(contentRect), NSMaxY(contentRect) - ARROW_HEIGHT);
[path curveToPoint:NSMakePoint(NSMinX(contentRect) + CORNER_RADIUS, NSMaxY(contentRect) - ARROW_HEIGHT)
controlPoint1:topLeftCorner controlPoint2:topLeftCorner];
[path lineToPoint:NSMakePoint(_arrowX - ARROW_WIDTH / 2, NSMaxY(contentRect) - ARROW_HEIGHT)];
}
[path closePath];
[[NSColor colorWithDeviceWhite:1 alpha:FILL_OPACITY] setFill];
[path fill];
//[NSGraphicsContext saveGraphicsState];
NSBezierPath *clip = [NSBezierPath bezierPathWithRect:[self bounds]];
[clip appendBezierPath:path];
[clip addClip];
[path setLineWidth:LINE_THICKNESS * 2];
[[NSColor whiteColor] setStroke];
[path stroke];
[NSGraphicsContext restoreGraphicsState];
}
On the first time drawRect is called, everything works fine, the drawing goes the way it should depending on the bAbajo boolean. After that, if I call the drawRect again with the opposite value of bAbajo, the right code is executed (bAbajo has the expected value and by debugging with breakpoints I can see that it is executing the right code inside drawRect), but the window is not updated with the new NSBezierPath *path. Any help?
In fact, Rob indirectly gave me the answer, I was not calling the setNeedsDisplay after setting bAbajo.
I'm drawing a lot of trapezoids filled with a NSGradient. I expect them to join seamlessly, which is not the case. In this case, I would prefer to use clipping instead of explicitly filling a NSBezierPath with a gradient.
Here is the incriminated code:
-(void)drawRect:(NSRect)dirtyRect {
[[NSColor blackColor]set];
NSRectFill(self.bounds);
NSPoint v0 = NSMakePoint(100,100);
NSPoint v1 = NSMakePoint(200,100);
NSPoint v2 = NSMakePoint(100,200);
NSPoint v3 = NSMakePoint(200,200);
NSPoint v4 = NSMakePoint(150, 150);
NSBezierPath * triangle0 = [NSBezierPath bezierPath];
[triangle0 moveToPoint:v0];
[triangle0 lineToPoint:v1];
[triangle0 lineToPoint:v2];
[triangle0 closePath];
NSBezierPath * triangle1 = [NSBezierPath bezierPath];
[triangle1 moveToPoint:v1];
[triangle1 lineToPoint:v2];
[triangle1 lineToPoint:v3];
[triangle1 closePath];
NSGradient * gradient = [[NSGradient alloc] initWithColorsAndLocations:[NSColor whiteColor],0.0,[NSColor orangeColor],1.0,nil];
[NSGraphicsContext saveGraphicsState];
[triangle0 addClip];
[gradient drawFromPoint:v0 toPoint:v4 options:NSGradientDrawsAfterEndingLocation|NSGradientDrawsBeforeStartingLocation];
// [gradient drawFromPoint:v0 toPoint:v4 options:0];
[NSGraphicsContext restoreGraphicsState];
[NSGraphicsContext saveGraphicsState];
[triangle1 addClip];
[gradient drawFromPoint:v3 toPoint:v4 options:NSGradientDrawsAfterEndingLocation|NSGradientDrawsBeforeStartingLocation];
//[gradient drawFromPoint:v3 toPoint:v4 options:0];
[NSGraphicsContext restoreGraphicsState];
What should I do to avoid the gap between the two triangles ?
Edit:
Here is an attempt to go around this problem by explicitely filling NSBezierPath.
-(void)drawRect:(NSRect)dirtyRect {
[[NSColor blackColor]set];
NSRectFill([self bounds]);
CGContextRef c = [[NSGraphicsContext currentContext] graphicsPort];
CGContextTranslateCTM(c, 0.5, 0.5);
NSPoint v0 = NSMakePoint(100,100);
NSPoint v1 = NSMakePoint(200,100);
NSPoint v2 = NSMakePoint(100,200);
NSPoint v3 = NSMakePoint(200,200);
NSBezierPath * triangle0 = [NSBezierPath bezierPath];
[triangle0 moveToPoint:v0];
[triangle0 lineToPoint:v1];
[triangle0 lineToPoint:v2];
[triangle0 closePath];
NSBezierPath * triangle1 = [NSBezierPath bezierPath];
[triangle1 moveToPoint:v1];
[triangle1 lineToPoint:v2];
[triangle1 lineToPoint:v3];
[triangle1 closePath];
[[NSColor whiteColor]set];
NSGradient * gradient = [[NSGradient alloc] initWithColorsAndLocations:[NSColor whiteColor],0.0,[NSColor orangeColor],1.0,nil];
[gradient drawInBezierPath:triangle0 angle:45];
[gradient drawInBezierPath:triangle1 angle:45+180];
NSBezierPath * seam = [ NSBezierPath bezierPath]; [seam moveToPoint:v1]; [seam lineToPoint:v2];
[[NSColor orangeColor]set]; [seam stroke];
NSGradient * gradient2 = [[NSGradient alloc] initWithColorsAndLocations:[NSColor whiteColor],0.0,[NSColor orangeColor],0.5,[NSColor whiteColor],1.0,nil];
NSBezierPath * squarePath = [NSBezierPath bezierPath];
[squarePath moveToPoint:v0];
[squarePath lineToPoint:v1];
[squarePath lineToPoint:v3];
[squarePath lineToPoint:v2];
[squarePath closePath];
CGContextTranslateCTM(c, 200, 0);
[gradient2 drawInBezierPath:squarePath angle:45];
}
On the left, two triangles filled with the same NSGradient.
On the right, a square filled with an NSGradient, the goal I'm trying to reach.
The seam is an attempt to hide the black line between the two NSBezierPath, but it doesn't really work. In this case, it is barely visible, but it will be visible if I draw a large amount of such triangles.
Edit for Rengers answer:
Here is how it looks without antialiasing:
Technically, this is the good answer, but now the problem is that, unsurprisingly, the edge of the polygon are not longer antialiased. Any idea how I could remove the gap between the clipping regions, without losing the antialiasing on the edges ?
This is probably because of anti-aliasing which is enabled by default. You can disable it using:
[[NSGraphicsContext currentContext] setShouldAntialias:NO];
I have store all the points in the array and pass to the NSBeizerPath so that it can draw through that path.The code i have implemented is as follows:
- (void)drawPath:(NSPoint)inStartPoint toLastPoint:(NSPoint)inEndPoint
{
NSBezierPath* path = [NSBezierPath bezierPath];
NSLog(#"Drawing path....");
[path moveToPoint:inStartPoint];
[path lineToPoint:inEndPoint];
[mColor set];
[path fill];
[path stroke];
}
This is drawing to only the startpoint and end point now how to draw where the cursor moves.
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 ;)