NSSliderのThumb(持つところ)の画像を変更したい

Question

前提・実現したいこと

現在macOS版で音楽再生アプリケーションを作っています．そこでSliderを用いて音楽再生のシークバーを作成しているのですが，Sliderの持つところが初期状態の丸しかありません．
このスライダーの外観を

下の画像のように変更したいと考えています．

(自分でイラストを使って作りました．)

試したこと

iOSだと画像変更用のメソッドslider.setThumbImage(:for)があるので簡単に変更することができると思いますが，macOSのSliderにはそのようなメソッドが存在していません．
そこで色々調べた結果
参考文献1 から

NSSliderCellの
(void)drawKnob:(NSRect)knobRect メソッドをオーバーライドすると変更できそうだと思い自分でプログラムを書いてみました．しかし，圧倒的にObjctive-Cを読むことができないため別の記事を参考にしようと考え色々検索すると，

Sliderの色を変えるプログラムを見つけることができました．
参考文献2:Sliderの色を変えるプログラム
このプログラムはSwiftで書かれていたためなんとか解読することができそれを参考にThumbを変更できないかと模索した結果それっぽいものが完成しましたが，問題を抱えています．

###抱えている問題

• スライダの位置がThumbの位置とあっていない
• Thumbの下の形が角丸になっていない．
• できればThumbを参考文献1 を参考にしてImageを使って表したい
• 圧倒的にObjctive-Cを読めない．

###自分なりに書いたソースコード

SliderのSliderCellのカスタムクラスをCustomSliderCellに適応してます．

CustomSliderCell:NSSliderCell{

    override func drawKnob(_ knobRect: NSRect) {
        var knob = knobRect
        knob.size.height = CGFloat(20)
        knob.size.width = CGFloat(5)
        let knobRadius = CGFloat(2.5)
        let bg = NSBezierPath(roundedRect: knob, xRadius: knobRadius, yRadius: knobRadius)
      //let bg = NSBezierPath(rect: knob)にすれば角丸ではなく長方形になる．上下
        NSColor.orange.setFill()
        bg.fill()
        
//        image = NSImage(named: "bar.png")
        
    }

    //参考文献2からbarのデザインも変更可能,今回の質問には直接的には関係がないと思われる?ため実際はコメントアウト

    override func drawBar(inside aRect: NSRect, flipped: Bool) {
        var rect = aRect
        rect.size.height = CGFloat(7)
        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 - 5))
        var leftRect = rect
        leftRect.size.width = finalWidth
        //長方形の幅の半分より大きい値は、幅の半分に固定される
        let bg = NSBezierPath(roundedRect: rect, xRadius: barRadius, yRadius: barRadius)
        NSColor.orange.setFill()
        bg.fill()

    }
}

---

Sliderの描写方法でもっと良い方法があったり，何か些細なことでも構わないのでアドバイスやヒントを教えてください！
よろしければSwiftで解決方法を教えていただきたいです！

（あまり高度なのは理解できないかもしれませんが）Objective-Cのアドバイスでも良いのでよろしくお願いします！！

補足情報

Xcode ver 11.3.1
Swift 5.x
StoryBoard使用
SliderのSliderCellのカスタムクラスをCustomSliderCellに適応

###参考文献1のソースコード

#import "customSliderCell.h"
@implementation customSliderCell
//SliderのThumbの話

- (void)drawKnob:(NSRect)knobRect {

    NSImage * knob = knobImage;
 [[self controlView] lockFocus];
 [knob
 compositeToPoint:NSMakePoint(knobRect.origin.x,knobRect.origin.y+knobRect.size.height)
 operation:NSCompositeSourceOver];
//この一文compositeToPointがよくわからない．

[[self controlView] unlockFocus];//Swiftでは使えなくなってる
}

//SliderBarのはなし
- (void)drawBarInside:(NSRect)rect flipped:(BOOL)flipped {
rect.size.height = 8;

    NSRect leftRect = rect;
    leftRect.origin.x=0;
    leftRect.origin.y=2;
    leftRect.size.width = knobrect.origin.x + (knobrect.size.width);
    [leftBarImage setSize:leftRect.size];
    [leftBarImage drawInRect:leftRect fromRect: NSZeroRect operation: NSCompositeSourceOver fraction:1];

    NSRect rightRect = rect;
    rightRect.origin.x=0;
    rightRect.origin.y=2;
    rightRect.origin.x = knobrect.origin.x;
    [rightBarImage setSize:rightRect.size];
    [rightBarImage drawInRect:rightRect fromRect: NSZeroRect operation: NSCompositeSourceOver fraction:1];
}

Answer 1

CGRectのoriginは「左上の頂点の座標」で表現されます。次の図は、同じ頂点座標に幅が違うViewを描画しようとしたらどうなるか、を示したものです。
OS標準の丸のノブが3マスの ( ) で、あなたが作った細いノブが1マスの $ だと思ってください。
同じ座標に描画したとしても、右端に来たときには背景のバーが見えてしまう原因がわかるかと思います。

( )----------------
$------------------

--------( )--------
--------$----------

----------------( )
----------------$--

私はあなたと正反対で、Objective-Cしかわからないし、iOSのアプリしか作ったことがないです。なので、Swiftの流儀がよくわからず、あまりきれいなコードではないかもしれません。
が、下記のコードでバーとノブの位置のズレは解消できました。

class CustomSliderCell: NSSliderCell {
    /// Sliderの現在値が、全体の何%にあたるのかを示す
    var currentValuePercentage: CGFloat {
        get {
            return CGFloat((self.doubleValue - self.minValue) / (self.maxValue - self.minValue))
        }
    }

    override func drawKnob(_ knobRect: NSRect) {
        let knobSize: NSSize = NSMakeSize(5, 20)
        let knobRadius: CGFloat = knobSize.width / 2.0

        // ノブが左端にいるときは、オリジナルのknobRect.xの位置に描画してよい
        // ノブが右端にいるときは、オリジナルのknobRect.width - knobSize.width ぶん右にずらす
        let adjustedRect: NSRect = NSRect(
            origin: NSMakePoint(knobRect.origin.x + (knobRect.size.width - knobSize.width) * self.currentValuePercentage, knobRect.origin.y),
            size: knobSize
        )

        let bg: NSBezierPath = NSBezierPath(roundedRect: adjustedRect, xRadius: knobRadius, yRadius: knobRadius)
        NSColor.orange.setFill()
        bg.fill()
        bg.close()
    }

    override func drawBar(inside rect: NSRect, flipped: Bool) {
        let barRadius: CGFloat = 2.5

        // Sliderのバー全体をグレーで塗る
        let bg: NSBezierPath = NSBezierPath(roundedRect: rect, xRadius: barRadius, yRadius: barRadius)
        NSColor.lightGray.setFill()
        bg.fill()
        bg.close()

        // Sliderの左端から、現在の値に相当する箇所までオレンジで塗る
        let leftRect: NSRect = NSRect(
            origin: rect.origin,
            size: NSMakeSize(rect.size.width * self.currentValuePercentage, rect.size.height)
        )
        let active: NSBezierPath = NSBezierPath(roundedRect: leftRect, xRadius: barRadius, yRadius: barRadius)
        NSColor.orange.setFill()
        active.fill()
        active.close()
    }
}

Comments

[techiro]

回答ありがとうございました！
わかりやすいCGRectの座標の説明をしてくださったおかげでずっと悩んでいたことが解決することができました！
また，プログラムもComputed Propertyを使ってうまく纏まっていて,私には到底真似できないなと感じました．このコードを読むことでいろいろな学びを得ることができてとても感謝しています！
本当にありがとうございました！