javascript - jQuery: 円形スライダーの作成

Question

以前に JavaScript スライダーを見たことがあるかもしれません:

私が思い描いているのは、円形のスライダーです。これは、円上の 1 点にあるドラッグ可能なボタンで構成され、そのボタンはリングに沿ってどこにでもドラッグできます。値は、ボタンの位置によって異なります (時計を考えてください)。

score 3 · Accepted Answer

中心点 c を定義する現在のマウスポイント m

マウスドラッグイベントハンドラーでは、

var dx = m.x-c.x;
var dy = m.y-c.y;

var scale = radius/Math.sqrt(dx*dx+dy*dy);

slider.x = dx*scale + c.x;
slider.y = dy*scale + c.y;

半径は、スライダーのプリセット値になります。

score 1 · Accepted Answer

いくつかの説明とデモ。

score 0 · Accepted Answer

ここから jQuery roundSlider プラグインを確認してくださいhttp://roundsliderui.com/ . これはまさにあなたが望むものです。

この roundslider には、jQuery ui スライダーと同様のオプションがあります。デフォルト、最小範囲、および範囲スライダータイプをサポートします。丸いスライダーだけでなく、四分円、半円、パイ円など、さまざまな円の形状に対応しています。

詳細については、デモとドキュメントのページを確認してください。

からデモを確認してくださいjsFiddle。

関連する回答: https://stackoverflow.com/a/31367164/1845801およびhttps://stackoverflow.com/a/31369265/1845801

スクリーンショット:

jquery円形スライダー - 異なる円の形

4 に答える 4