NSSlider NSSliderCell clipping custom knob

Question

I am creating a custom NSSlider with a custom NSSliderCell. All is working beautifully, other than the knob. When I drag it to the max value the knob is being clipped, I can only see 50% of the knob image.

When assigning my custom NSSliderCell I am setting the knobThickness to the width of the image I am using as the knob. I assumed (I guess wrongly) that it would take that into account and stop it from clipping?

Any ideas what I am doing wrong? The slider is hitting the maxValue only when the knob is clipped at 50%, so its not travelling without adding any value.

- (void)drawKnob:(NSRect)knobRect {
 NSImage * knob = _knobOff;
 knobRectVar = knobRect;

 [[self controlView] lockFocus];
 [knob
  compositeToPoint:
  NSMakePoint(knobRect.origin.x+4,knobRect.origin.y+knobRect.size.height+20)
  operation:NSCompositeSourceOver];
 [[self controlView] unlockFocus];
}

- (void)drawBarInside:(NSRect)rect flipped:(BOOL)flipped {
 rect.size.height = 8;

 [[self controlView] lockFocus];
 NSImage *leftCurve = [NSImage imageNamed:@"customSliderLeft"];
 [leftCurve drawInRect:NSMakeRect(5, 25, 8, 8) fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1];

    NSRect leftRect = rect;
    leftRect.origin.x=13;
    leftRect.origin.y=25;
    leftRect.size.width = knobRectVar.origin.x + (knobRectVar.size.width/2);
    [leftBarImage setSize:leftRect.size];
    [leftBarImage drawInRect:leftRect fromRect: NSZeroRect operation: NSCompositeSourceOver fraction:1];
 [[self controlView] unlockFocus];

}

Doshipak · Answer 1 · 2013-10-05T10:45:34.313

The NSSLider expects a special sizes off the knob images for each control size:

NSRegularControlSize:   21x21
NSSmallControlSize:     15x15
NSMiniControlSize:      12x12

Unfortunately the height of your knob image mustn't exceed one of this parameters. But it's width may be longer. If it is you may count an x position for the knob like this:

CGFloat newOriginX = knobRect.origin.x *
        (_barRect.size.width - (_knobImage.size.width - knobRect.size.width)) / _barRect.size.width;

Where _barRect is a cellFrame of your bar background from:

- (void)drawBarInside:(NSRect)cellFrame flipped:(BOOL)flipped;

I've created a simple solution for the custom NSSlider. Follow this link https://github.com/Doshipak/LADSlider

score 4 · Answer 2 · answered Jun 05 '14 at 18:45

You can override [NSSliderCell knobRectFlipped:] in addition to [NSSliderCell drawKnob:]. Here is my solution:

- (void)drawKnob:(NSRect)rect
{
  NSImage *drawImage = [self knobImage];

  NSRect drawRect = [self knobRectFlipped:[self.controlView isFlipped]];

  CGFloat fraction = 1.0;

  [drawImage drawInRect:drawRect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:fraction respectFlipped:YES hints:nil];
}

- (NSRect)knobRectFlipped:(BOOL)flipped
{
  NSImage *drawImage = [self knobImage];

  NSRect drawRect = [super knobRectFlipped:flipped];

  drawRect.size = drawImage.size;

  NSRect bounds = self.controlView.bounds;
  bounds = NSInsetRect(bounds, ceil(drawRect.size.width / 2), 0);
  CGFloat val = MIN(self.maxValue, MAX(self.minValue, self.doubleValue));
  val = (val - self.minValue) / (self.maxValue - self.minValue);
  CGFloat x = val * NSWidth(bounds) + NSMinX(bounds);

  drawRect = NSOffsetRect(drawRect, x - NSMidX(drawRect) + 1, 0);
  return drawRect;
}

score 0 · Answer 3 · answered Oct 04 '12 at 20:53

Know it's been awhile but I ran into this issue myself and found a quick-and-dirty workaround.

I couldn't get around the initial reason for this but it seems that NSSlider is expecting a quadratic handle image. The easiest way I found was to set the range of your slider to be from 0.0f - 110.0f for example.

Then you check in the valueChanged target method assigned if the value is > 100.0f and set it back to that value if it is. I created a background image with some pixels of alpha-only pixels on the right side so your background isn't wider than the actual fader range.

Quick-and-dirty but doesn't require a lot code and works pretty well. Hope this helps other guys stumbling upon the same issue.

score -2 · Answer 4 · answered Jan 26 '11 at 18:58

-2

You don’t need to lock and unlock focus on the controlView from inside cell drawing methods. These methods are only called by your controlView’s -drawRect: method, which is called with the view’s focus locked.

Why are you adding 20 points to the Y coordinate the knob image is composited to in -drawKnob?

answered Jan 26 '11 at 18:58

Seth Kingsley

452
4
5

it draws the knob with 50% clipped and not centered on the bar without the +20.0 – mootymoots Jan 26 '11 at 19:34
btw - was this an answer to the problem? I removed the code you mentioned and it made no difference. – mootymoots Jan 26 '11 at 19:49
1

I suggest you try overriding -knobRectFlipped: and calculate the knob rect based on the current value of the slider, and then don’t do any other adjustments in -drawKnob:. My reason for suggesting this is that possibly the drawing context is being clipped to the knobRect right before -drawKnob: is called. Can I see some screenshots of the slider at the median and maximum values? – Seth Kingsley Jan 26 '11 at 22:49

NSSlider NSSliderCell clipping custom knob

4 Answers4