QMLスライダをカスタムシェイプで作成する方法は？

Question

私は（青スライダーハンドルで）次のようなカスタム形状のスライダを作成する必要があり：

赤色一方が溝とハンドルである青色です。

Answer 1

CanvasまたはQt C++（example with a circular slider）を使用してQMLで直接実行し、要素をQMLに公開することができます。直接のコピー＆ペーストソリューションではありませんが、thisをチェックして、arc()を使用して要素を描画するカスタム円形進行状況バーを確認してください。直線が必要な場合はline()を使用できます。スライダの動作も、あなた自身で行う必要があります。

Sliderから継承して、要素に必要な機能の一部（またはほとんど）を試すことができます。

Answer 2

溝の場合、Itemを使用してこの図形を描画できます。 a Image
ハンドルの場合はRectangleを使用し、Slider.positionに従って置きます。そうですね：

見知らぬ形をしている場合は、yの関数を変更してください。
値position（範囲[0、1]）をy値にマップする関数を使用できます。スライダのすべてのプロパティを使用して、適切な位置を計算することができます。 ランダム機能：それの楽しみのためにここに

Slider { 
    width: 400 
    height: 150 
    id: slider1 
    y: 200 
    handle: Rectangle { 
     x: slider1.leftPadding + slider1.visualPosition * (slider1.availableWidth - width) 
     y: slider1.topPadding + (slider1.availableHeight - height)/2 + (slider1.availableHeight - height)/2 * Math.sin(slider1.position * 10) 
     width: 15 
     height: 30 
     radius: 5 
     color: 'blue' 
    } 
} 

そして：スライダーは正弦関数を描くここで別の例

、。しかし、私はあなたがそれにふさわしい溝を描くことができるとは思わない。

Slider { 
    id: slider 
    width: 400 
    height: 150 
    y: 200 
    onPositionChanged: { 
     var a = Math.round(Math.random() * 5) - Math.round(Math.random() * 5) 
     console.log(a) 
     handle.handleY = handle.y + (a) 
     console.log(handle.handleY) 
    } 
    handle: Rectangle { 
     property int handleY: slider.topPadding + slider.availableHeight/2 - height/2 
     x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width) 
     y: Math.max(slider.topPadding, Math.min(handleY, slider.availableHeight - height + slider.topPadding)) 
     width: 15 
     height: 30 
     radius: 5 
     color: 'blue' 
    } 
}