如何将像素距离转换为步长

Question

我想根据容器宽度和线相对于容器的距离来计算步数。我能够计算步数，但只有最小步长为 0。但是，在我的场景中，最小步长可以大于 0，到目前为止我还无法弄清楚如何在计算中烘焙它.检查此codepen中的完整示例。// Small example:// In this code, line distance 0 corresponds to step 0, but I want it to // correspond to step 100, since that is supposed to be the minimum step. var lineDistance = 0; // pxvar maxDistance = 704; // pxvar minSteps = 100; //stepvar maxSteps = 500; //stepvar step = Math.floor( (lineDistance/maxDistance) * maxSteps );步骤计算应返回的静态值的一些示例：最终目标是能够用动态值计算步长......如果线距离为0，则step返回100如果线距离为10，则step返回105如果线距离为352，则step返回300352是最大距离的一半300 最小步数和最大步数之间的中间点如果线距离为704，则step返回500

Answer 1

如果我理解正确，您只需要插入到步骤的距离，那么您需要先找到两个间隔的长度：

const distanceLength = maxLength - minLength; // probably maxLength - 0 in your case

const stepLength = maxSteps - minSteps;

然后标准化您的值（查找距离差异）：

const distanceDiff = lineDistance - minDistance; // probably just lineDistance in your case

然后将其转换为绝对单位：

const distanceRate = distanceDiff / distanceLength;

然后转换成步骤：

const stepsDiff = distanceRate * stepsLength;

并以步长最小值移动：

const steps = minSteps + stepsDiff;