如何使顏色選擇器粘貼/捕捉到某些值

我將創建一個類似這樣的圓形顏色選擇器。將會有12種顏色可供選擇（30度，每種顏色），並且指針可以拖動。如何使顏色選擇器粘貼/捕捉到某些值

我不需要詳細的解決方案，只是指導如何使指針可拖動的方式，如果它被設置在第一和第二種顏色（比如32度）之間，它應該滑動到45度（中間第二種顏色）等等。

謝謝！

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）。 –

如何使顏色選擇器粘貼/捕捉到某些值

回答

相關問題