JavaScript实现：过滤树莓派拖拽设备跳变输入值并平滑控制图像滚动

我将一个可拖拽物理设备连接到树莓派，设备移动时会以键盘输入形式输出当前位置值（范围91-955像素），用于控制屏幕图像平滑上下滚动。向下拖拽时数值连续正常，但向上拖拽时设备会输出随机跳变的数值，且硬件问题无法修复，需要用JavaScript的数学方法归一化数值、忽略大幅差异，实现平滑滚动。

试过两种方法但效果不佳：

• 对比当前值与前一位置的差值，超过20像素则跳过：仅向下拖拽时有效，向上拖拽时因跳变过大导致图像卡顿，无法定位手柄真实位置
• 取最近3-5个数值的平均值：连续错误值会导致结果失真，同时不知道如何处理初始阶段无历史值的情况

以下是设备输出的真实键盘输入示例：

const values = [
  92,
  94,
  96,
  100,
  102,
  105,
  107,
  112,
  123,
  134,
  116,
  114, // Last acceptable position
  847, // Huge diff compared to previous value
  299,
  628, // Huge diff again
  559, // Not as big of a diff compared to the previous value, but too big compared to 114 which was the last acceptable value
  395,
  788,
  189,
  948,
  135, // ≈ 20 px difference to 114 would be OK
  907,
  190,
  853,
  134,
  981,
  34,
  940,
  64,
  899,
  214,
  168,
  174,
  182,
  187,
  189,
  191,
  193,
  195,
  198,
  200,
  204,
  209,
  211,
  214,
  217,
  220,
  222,
  225,
  231,
  229,
  232,
  225,
  233,
  230,
  245,
  241,
  237,
  241,
  239,
  242,
  57,
  275,
  125,
  242,
  238,
  245,
  240,
  243,
  230,
  244,
  233,
  360,
  241,
  248,
  240,
  249,
  251,
  260,
  32,
  1007,
  68,
  1018,
  243,
  711,
  498,
  440,
  765,
  199,
  951,
  121,
  932,
  148,
  274,
  271,
  214,
  271,
  285,
  267,
  351,
  246,
  376,
  102,
  412,
  61,
  580,
  0,
  336,
  270,
  391,
  269,
  279,
  282,
  284,
  288,
  291,
  293,
  298,
  305,
  309,
  311,
  313,
  318,
  322,
  324,
  330,
  332,
  337,
  332,
  339,
  980,
  120,
  835,
  370,
  557,
  667,
  273,
  909,
  77,
  761,
  324,
  873,
  104,
  1005,
  156,
  799,
  418,
  509,
  715,
  229,
  366,
  369,
  410,
  369,
  365,
  374,
  376,
  381,
  383,
  387,
  392,
  394,
  398,
  405,
  408,
  410,
  418,
  427,
  433,
  437,
  439,
  441,
  228,
  660,
  562,
  362,
  849,
  120,
  999,
  25,
  993,
  60,
  916,
  70,
  900,
  81,
  884,
  191,
  879,
  196,
  873,
  101,
  1007,
  168,
  781,
  444,
  479,
  749,
  198,
  961,
  101,
  959,
  103,
  956,
  40,
  946,
  48,
  934,
  56,
  808,
  268,
  918,
  68,
  904,
  78,
  886,
  460,
  472,
  480,
  489,
  497,
  499,
  501,
  509,
  520,
  526,
  528,
  530,
  536,
  544,
  551,
  565,
  558,
  556,
  558,
  532,
  558,
  556,
  584,
  500,
  558,
  551,
  540,
  612,
  559,
  579,
  581,
  583,
  581,
  590,
  596,
  598,
  600,
  606,
  615,
  622,
  626,
  628,
  632,
  646,
  659,
  962,
  687,
  699,
  705,
  710,
  714,
  720,
  729,
  740,
  757,
  753,
  775,
  748,
  757,
  204,
  775,
  789,
  802,
  811,
  813,
  815,
  818,
  827,
  830,
  832,
  836,
  841,
  845,
  847,
  850,
  852,
  842,
  852,
  828,
  851,
  849,
  852,
  849,
  852,
  850,
  852,
  850,
  853,
  851,
  864,
  829,
  852,
  850,
  852,
  850,
  852,
  854,
  852,
  861,
  326,
  871,
  129,
  880,
  887,
  894,
  899,
  903,
  905,
  908,
  910,
  912,
  915,
  919,
  921,
  927,
  932,
  934,
  939,
  944,
  947,
  949,
  954,
  978,
  923,
  1002,
  872,
  965,
  877,
  964,
  912,
  987,
  957,
  966,
  973,
  962,
  978,
  939,
  1021,
  723,
  989,
  899,
  1023,
  961,
  963,
  959,
  1020,
  957,
  962,
  960,
  968,
  944,
  980,
  961,
  963,
  961]

方案1：有效历史队列+滑动窗口平均 #

核心是维护一个仅保留合理数值的历史队列，用滑动窗口平均实现平滑，同时过滤跳变异常值。

// 可调整参数
const MAX_ALLOWED_DIFF = 20; // 单次位置变化的合理阈值
const WINDOW_SIZE = 3; // 滑动窗口大小，值越大越平滑
let validHistory = []; // 存储有效历史位置
let lastValidValue = null; // 记录最后一个确认的有效值

function processRawPosition(rawVal) {
  // 第一步：过滤超出硬件范围的异常值（原范围91-955）
  if (rawVal < 91 || rawVal > 955) {
    return lastValidValue ?? rawVal;
  }

  // 初始化：第一个有效值直接存入
  if (!lastValidValue) {
    lastValidValue = rawVal;
    validHistory.push(rawVal);
    return rawVal;
  }

  // 计算与最后有效值的差值
  const diff = Math.abs(rawVal - lastValidValue);
  
  // 差值在合理范围内，加入历史队列
  if (diff <= MAX_ALLOWED_DIFF) {
    validHistory.push(rawVal);
    // 保持队列长度不超过窗口大小
    if (validHistory.length > WINDOW_SIZE) {
      validHistory.shift();
    }
    lastValidValue = rawVal;
  }

  // 返回窗口平均值，实现平滑
  return Math.round(validHistory.reduce((sum, val) => sum + val, 0) / validHistory.length);
}

// 测试示例数据
const processedPositions = values.map(val => processRawPosition(val));
console.log(processedPositions);

方案优势 #

• 只保留符合合理变化的数值，避免连续错误值干扰
• 滑动窗口平均天然实现平滑效果
• 初始化阶段自动处理无历史值的情况

方案2：速度过滤+指数平滑 #

结合人工拖拽的速度上限判断异常值，同时用指数平滑让结果更流畅，适合对实时性要求较高的场景。

// 可调整参数
const MAX_ALLOWED_SPEED = 20; // 单次输入的最大合理变化速度（像素/次）
const SMOOTHING_FACTOR = 0.3; // 指数平滑系数，0-1之间，越小越平滑
let lastValidValue = null;
let smoothedValue = null;

function processRawPosition(rawVal) {
  // 范围过滤
  if (rawVal < 91 || rawVal > 955) {
    return smoothedValue ?? lastValidValue ?? rawVal;
  }

  // 初始化
  if (!lastValidValue) {
    lastValidValue = rawVal;
    smoothedValue = rawVal;
    return rawVal;
  }

  // 计算变化速度
  const speed = Math.abs(rawVal - lastValidValue);
  if (speed <= MAX_ALLOWED_SPEED) {
    // 有效数值，更新平滑值
    smoothedValue = SMOOTHING_FACTOR * rawVal + (1 - SMOOTHING_FACTOR) * smoothedValue;
    lastValidValue = rawVal;
  }

  // 返回平滑后的值，异常值不更新有效值
  return Math.round(smoothedValue);
}

方案优势 #

• 指数平滑的实时性更好，不会因窗口延迟导致卡顿
• 基于速度判断更符合人工操作的实际逻辑

额外优化建议 #

1. 容错次数设置：连续出现3-5次异常值后，允许强制更新一次有效值，避免手柄快速大幅移动被误判
2. 动态阈值：根据历史平均变化速度自动调整MAX_ALLOWED_DIFF，适配不同用户的拖拽习惯
3. 边缘值处理：初始化时收集前2-3个连续合理值作为初始历史，进一步提升初始阶段的稳定性

内容的提问来源于stack exchange，提问作者Jenni