如何使颜色选择器粘贴/捕捉到某些值

我将创建一个类似这样的圆形颜色选择器。将会有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）。 –

如何使颜色选择器粘贴/捕捉到某些值

回答

相关问题