javascript范围滑块，带有HTML5Canvas

Question

您可以尝试设置一个沿滑块的“ snap to” x值的数组。 您还需要一个接受X值的函数，并返回最接近的“ snap to”值。 这样的东西：

const left = 100;
const width = 200;
const numStops = 11;

const lerp = (from, to, pct) => (to - from) * pct + from;

const sliderPositions = Array.from(
  {length: numStops}, 
  (_, i) => lerp(left, left + width, i / (numStops - 1))
);

const getClosestSliderPosition = xPos => 
  sliderPositions.reduce((acc, el) => {
    if (Math.abs(xPos - el) < Math.abs(xPos - acc))
      acc = el;
    return acc;
  });

console.log(getClosestSliderPosition(150));
console.log(getClosestSliderPosition(115));
console.log(sliderPositions);

Answer 1

在您的活动处理程序中，您可以使用GetClosestSliderPosition函数这样：

function moveSlider(e) {
    Slider.x = getClosestSliderPosition(e.clientX);
}