如何给NSSlider上旋钮的左边部分上色

Question

在我的项目中，NSSlider控制AVPlayer的音量。我想给旋钮左边的NSSlider部分涂上颜色。如何才能做到这一点？

Answer 1

为此，您应该使用NSProgressIndicator。

或者，您可以使用自定义NSSliderCell并覆盖- (BOOL)_usesCustomTrackImage以返回YES，并覆盖- (void)drawBarInside:(NSRect)cellFrame flipped:(BOOL)flipped以绘制您的自定义条形图。在这里，您可以使用NSCell doubleValue来获取滑块的当前位置。

Answer 2

您应该将NSSliderCell子类化，并编写类似下面的代码：

@interface CustomSliderCell : NSSliderCell {
    NSRect _barRect;
    NSRect _currentKnobRect;
}
//    You should set image for the barFill
//    (or not if you want to use the default background)
//    And image for the bar before the knob image
    @property (strong, nonatomic) NSImage *barFillImage;
    @property (strong, nonatomic) NSImage *barFillBeforeKnobImage;


//    Slider also has the ages so you should set
//    the different images for the left and the right one:
    @property (strong, nonatomic) NSImage *barLeftAgeImage;
    @property (strong, nonatomic) NSImage *barRightAgeImage;
@end

和实现：

- (void)drawKnob:(NSRect)knobRect {
    [super drawKnob:knobRect];
    _currentKnobRect = knobRect;
}

-(void)drawBarInside:(NSRect)cellFrame flipped:(BOOL)flipped {
    _barRect = cellFrame; 
    NSRect beforeKnobRect = [self createBeforeKnobRect];
    NSRect afterKnobRect = [self createAfterKnobRect];

//    Draw bar before the knob
    NSDrawThreePartImage(beforeKnobRect, _barLeftAgeImage, _barFillBeforeKnobImage, _barFillBeforeKnobImage,
            NO, NSCompositeSourceOver, 1.0, flipped);

//    If you want to draw the default background 
//    add the following line at the at the beginning of the method:
//    [super drawBarInside:cellFrame flipped:flipped];
//    And comment the next line:
    NSDrawThreePartImage(afterKnobRect, _barFillImage, _barFillImage, _barRightAgeImage,
            NO, NSCompositeSourceOver, 1.0, flipped);
}

- (NSRect)createBeforeKnobRect {
    NSRect beforeKnobRect = _barRect;

    beforeKnobRect.size.width = _currentKnobRect.origin.x + _knobImage.size.width / 2;
    beforeKnobRect.size.height = _barFillBeforeKnobImage.size.height;
    beforeKnobRect.origin.y = beforeKnobRect.size.height / 2;

    return beforeKnobRect;
}

- (NSRect)createAfterKnobRect {
    NSRect afterKnobRect = _currentKnobRect;

    afterKnobRect.origin.x += _knobImage.size.width / 2;
    afterKnobRect.size.width = _barRect.size.width - afterKnobRect.origin.x;
    afterKnobRect.size.height = _barFillImage.size.height;
    afterKnobRect.origin.y = afterKnobRect.size.height / 2;

    return afterKnobRect;
}

我已经创建了LADSLider，它将帮助你简单而快速地创建你想要的东西。