カラーピッカースティック/特定の値にスナップする方法

このような円形ピッカーを作成します。（の場合は30度）から選択する12の色があり、ポインタがドラッグ可能になります。カラーピッカースティック/特定の値にスナップする方法

ポインタをドラッグ可能にする方法の詳細な解説は必要ありません。第1色と第2色（32度など）の間に設定すると、45度にスライドする必要があります2番目の色の）など。

ありがとうございます！ここで

2017-07-08 Afron Orana

あなたのスライダーをドロップすると、あなたが0から値を取得する必要がありますあなたは単純にそれを30（色ごとの度数）で除算し、次に結果にMath.round（）を行い、30にそれを掛けます。0,30,60,90などの値が最も近いものになりますあなたの入力値。そして、あなたがそれが中間にあることを望むなら（15,45,75などのように）、懇願して15を引いた後、最終結果に15を加えます。 –

は、私がコメントで言及した例関数です：

function roundAngle(angle) 
{ 
    return Math.round((angle-15)/30) * 30 + 15; 
}

そして、ここでは実際の例です： https://jsfiddle.net/JacobDesight/k58z44kb/3/

出典

2017-07-08 17:03:54

ありがとうJacob、それは私がそれを必要とした方法で動作します。タッチイベントを手伝ってもらえますか？私はそれを機能させるのが難しいと感じています。 –

ここで触れたいのであれば、マウスイベントをそれぞれ 'touchstart'' touchmove'と 'touchend'で置き換える必要があります。 'e.clientX'を使う代わりに' e.targetTouches [0] .clientX'を使う必要があります。https://jsfiddle.net/JacobDesight/k58z44kb/24/ しかし、私は専門家ではありませんタッチのイベントの条件ので、私は[ここ]（https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events）について学ぶことをお勧めします。 –

カラーピッカースティック/特定の値にスナップする方法

答えて

関連する問題