Question

我有一个NSWindow和一个横向NSSlider。

我希望在窗口背景颜色发生变化时更改滑块右侧部分的颜色。

enter image description here

目前，当窗户背景较暗时，酒吧的右侧部分不再可见。

注意：窗口背景实际上是一个渐变，我通过覆盖窗口视图的子类中的drawRect进行绘制。

我以为我可以通过继承NSSliderCell来改变滑块条填充颜色并覆盖某些方法，例如drawBarInside，但我不明白它是如何工作的：我应该制作一个小方形图像和旋钮后在rect中反复绘制？或者只是画一条彩色线条？我以前从未这样做过。

我看过this question这很有意思，但它是关于画旋钮而我现在不需要它。

我也看了this one这看起来很有希望，但是当我试图模仿这段代码时，我的滑块就消失了......

在this question他们使用drawWithFrame，它看起来很有趣，但我又不知道它是如何运作的。

我想用我自己的代码而不是使用库来做这件事。有人可以给我一个关于如何做到这一点的提示吗？：）

我在Swift中这样做，但如有必要，我可以阅读/使用Objective-C.

Answer 1

首先，我创建了一个滑动条的图像并将其复制到我的项目中。

然后我在drawBarInside方法中使用此图片在正常之前绘制条形rect ，因此我们只会看到其余部分（我想保持蓝色部分完整无缺。）

这必须在NSSliderCell：
的子类中完成
class CustomSliderCell: NSSliderCell { let bar: NSImage required init(coder aDecoder: NSCoder) { self.bar = NSImage(named: "bar")! super.init(coder: aDecoder) } override func drawBarInside(aRect: NSRect, flipped: Bool) { var rect = aRect rect.size = NSSize(width: rect.width, height: 3) self.bar.drawInRect(rect) super.drawBarInside(rect, flipped: flipped) } }

亲：它有效。：）

Con：它删除了条形的圆角边缘，但我还没有找到重绘它的方法。

<强>更新

我做了一个接受答案的Swift版本，它运作得很好：

class CustomSliderCell: NSSliderCell { required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) } override func drawBarInside(aRect: NSRect, flipped: Bool) { var rect = aRect rect.size.height = CGFloat(5) let barRadius = CGFloat(2.5) let value = CGFloat((self.doubleValue - self.minValue) / (self.maxValue - self.minValue)) let finalWidth = CGFloat(value * (self.controlView!.frame.size.width - 8)) var leftRect = rect leftRect.size.width = finalWidth let bg = NSBezierPath(roundedRect: rect, xRadius: barRadius, yRadius: barRadius) NSColor.orangeColor().setFill() bg.fill() let active = NSBezierPath(roundedRect: leftRect, xRadius: barRadius, yRadius: barRadius) NSColor.purpleColor().setFill() active.fill() } }

Answer 2

这是正确的，您必须将NSSliderCell类子类化为重绘条或旋钮。

NSRect只是一个矩形容器，你必须在这个容器内绘制。我根据我的一个程序中的自定义NSLevelIndicator做了一个示例。

首先，您需要计算旋钮的位置。您必须注意控制的最小值和最大值。接下来，为背景绘制NSBezierPath，为左边部分绘制另一个。{/ p>

Custom NSSlider control bar

#import "MyCustomSlider.h"

@implementation MyCustomSlider

- (void)drawBarInside:(NSRect)rect flipped:(BOOL)flipped {

//  [super drawBarInside:rect flipped:flipped];

    rect.size.height = 5.0;

    // Bar radius
    CGFloat barRadius = 2.5;

    // Knob position depending on control min/max value and current control value.
    CGFloat value = ([self doubleValue]  - [self minValue]) / ([self maxValue] - [self minValue]);

    // Final Left Part Width
    CGFloat finalWidth = value * ([[self controlView] frame].size.width - 8);

    // Left Part Rect
    NSRect leftRect = rect;
    leftRect.size.width = finalWidth;

    NSLog(@"- Current Rect:%@ \n- Value:%f \n- Final Width:%f", NSStringFromRect(rect), value, finalWidth);

    // Draw Left Part
    NSBezierPath* bg = [NSBezierPath bezierPathWithRoundedRect: rect xRadius: barRadius yRadius: barRadius];
    [NSColor.orangeColor setFill];
    [bg fill];

    // Draw Right Part
    NSBezierPath* active = [NSBezierPath bezierPathWithRoundedRect: leftRect xRadius: barRadius yRadius: barRadius];
    [NSColor.purpleColor setFill];
    [active fill];


}

@end

Answer 3

雨燕5

class CustomSliderCell: NSSliderCell {
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func drawBar(inside aRect: NSRect, flipped: Bool) {
        var rect = aRect
        rect.size.height = CGFloat(5)
        let barRadius = CGFloat(2.5)
        let value = CGFloat((self.doubleValue - self.minValue) / (self.maxValue - self.minValue))
        let finalWidth = CGFloat(value * (self.controlView!.frame.size.width - 8))
        var leftRect = rect
        leftRect.size.width = finalWidth
        let bg = NSBezierPath(roundedRect: rect, xRadius: barRadius, yRadius: barRadius)
        NSColor.orange.setFill()
        bg.fill()
        let active = NSBezierPath(roundedRect: leftRect, xRadius: barRadius, yRadius: barRadius)
        NSColor.purple.setFill()
        active.fill()
    }
}

Answer 4

我已经实现了这一点，而根本没有重绘或覆盖单元格。使用“假色”滤镜似乎效果很好，而且只有几个代码！

class RLSlider: NSSlider {
init() {
    super.init(frame: NSZeroRect)
    addFilter()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    addFilter()
}

func addFilter() {
    let colorFilter = CIFilter(name: "CIFalseColor")!
    colorFilter.setDefaults()
    colorFilter.setValue(CIColor(cgColor: NSColor.white.cgColor), forKey: "inputColor0")
    colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor1")

//        colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor0")
//        colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor1")

    self.contentFilters = [colorFilter]
}
}

更改NSSlider栏颜色

4 个答案: