脑电地形图在网页端的常见实现方式是：绘制一个头部轮廓作为背景，然后根据国际10-20系统将Fp1、Fp2、C3、C4等电极点换算成像素坐标叠加在背景上。为了让用户在分析时能够微调电极位置，我们通常会引入jQuery UI的Resizable组件，让每个电极标记可以拖动或改变大小。但很快会发现一个尴尬的现象：当电极标记所在的容器被缩放后，所有电极点会集体向某个方向偏移，原本在头皮轮廓内部的电极跑到了外面。要解决这个问题，需要先弄清楚jQuery UI Resizable的坐标处理机制与EEG电极定位之间的错位关系。
一、偏移的根源：绝对像素与容器缩放不同步
jQuery UI Resizable在拖拽缩放手柄时，会根据鼠标移动的位移量计算新的宽度和高度，然后直接更新元素的style.width和style.height。这个过程本身并不关心元素内部的子节点位置。如果脑电地形图的头皮轮廓容器从800px宽缩放到640px宽，而每个电极点仍然使用最初的绝对像素坐标，比如Fp1电极的left为240px、top为160px，那么缩放后这些数值不会自动变化，电极自然就偏离了正确位置。
更隐蔽的问题是，如果在电极标记上直接使用Resizable，组件会改变电极元素自身的尺寸，但电极的定位坐标仍然基于原始容器计算。当容器缩放比例不是1:1时，鼠标位移量与实际坐标变化量之间并不是简单的线性关系，尤其是在同时改变宽高并且保持宽高比的情况下。很多开发者会尝试在resize回调里用原始坐标加上鼠标位移量来修正，但这种方式在高频触发和多次缩放后会累积误差，导致电极点越拖越偏。
另一个容易忽略的地方是CSS定位方式。如果电极点使用绝对定位，它们的参考系是最近的已定位祖先元素。当这个祖先元素被jQuery UI Resizable改变尺寸后，其内部坐标系的原点不变，但宽度和高度的映射关系变了。也就是说，left和top表示的是距离左上角的像素数，而不是相对于容器宽高的比例。一旦容器尺寸变化，原来占容器宽度30%的电极位置就不再是30%，这就是偏移产生的根本原因。
二、修正方案：用百分比坐标替换像素坐标
既然问题出在绝对像素坐标无法适应容器缩放，那么最直接的解决方案就是把所有电极位置改为相对容器的百分比坐标。具体做法是：在初始化脑电地形图时，根据10-20系统的标准比例先计算出每个电极在容器中的百分比位置，例如Fp1的横向位置为容器宽度的42%，纵向位置为容器高度的28%。当容器被jQuery UI Resizable缩放后，只需要用新的容器宽高乘以对应的百分比，就可以得到准确的像素坐标。
代码实现上，可以维护一个电极坐标数组，存储格式为{name: 'Fp1', xPercent: 0.42, yPercent: 0.28}。渲染函数根据当前容器的实际宽度和高度计算left和top，并更新每个电极元素的样式。当resize事件触发时，调用这个渲染函数即可。下面是核心的更新函数示例：
// 电极数组：xPercent和yPercent基于10-20系统在头皮轮廓内的相对位置
var electrodes = [
{ name: 'Fp1', xPercent: 0.42, yPercent: 0.28 },
{ name: 'Fp2', xPercent: 0.58, yPercent: 0.28 },
{ name: 'C3', xPercent: 0.30, yPercent: 0.50 },
{ name: 'C4', xPercent: 0.70, yPercent: 0.50 }
];
// 更新所有电极位置
function updateElectrodePositions() {
var container = $('#scalp-container');
var containerWidth = container.width();
var containerHeight = container.height();
$.each(electrodes, function(index, electrode) {
var $el = $('#electrode-' + electrode.name);
var left = containerWidth * electrode.xPercent;
var top = containerHeight * electrode.yPercent;
$el.css({
left: left + 'px',
top: top + 'px'
});
});
}
这段代码的核心思想是把坐标计算从固定的像素值改为动态的乘法运算。无论容器如何缩放，电极点始终保持在相同的相对位置上。需要特别注意的是，获取容器宽度时要使用width()方法而不是outerWidth()，因为width()返回的是内容区域宽度，而电极通常相对内容区域定位，避免边框和内边距造成额外的偏移。
如果电极点本身也需要用jQuery UI Resizable来调整大小，那么建议把Resizable应用在电极的容器元素上，而不是电极圆点本身。例如每个电极用一个透明的小方块作为操作区域，圆点作为视觉标记放在内部。这样既可以让用户方便地拖拽和缩放，又不会改变圆点的几何中心位置。初始化时可以这样写：
$('.electrode-handle').resizable({
handles: 'all',
minWidth: 8,
minHeight: 8,
resize: function(event, ui) {
// 缩放过程中不直接修改坐标，只调整视觉大小
// 坐标仍然由updateElectrodePositions统一管理
updateElectrodePositions();
}
});
三、事件监听优化与边界处理
resize事件在拖拽过程中会以非常高的频率触发，如果每次触发都执行完整的DOM查询和样式更新，性能会明显下降，尤其是在电极数量较多的情况下。一个有效的优化手段是使用requestAnimationFrame来合并多次resize回调，确保每一帧只更新一次电极位置。可以创建一个标志变量，在resize回调中只设置标志，然后在动画帧中执行实际的位置更新。
下面是一个整合了节流和更新的完整示例：
var resizeScheduled = false;
$('#scalp-container').resizable({
handles: 'all',
resize: function(event, ui) {
if (!resizeScheduled) {
resizeScheduled = true;
requestAnimationFrame(function() {
updateElectrodePositions();
resizeScheduled = false;
});
}
}
});
function updateElectrodePositions() {
var container = $('#scalp-container');
var containerWidth = container.width();
var containerHeight = container.height();
if (containerWidth < 200 || containerHeight < 200) {
return; // 避免容器过小时坐标计算出现负数或溢出
}
$.each(electrodes, function(index, electrode) {
var $el = $('#electrode-' + electrode.name);
var left = containerWidth * electrode.xPercent;
var top = containerHeight * electrode.yPercent;
// 边界限制：确保电极不会超出容器可视范围
left = Math.max(0, Math.min(left, containerWidth - 12));
top = Math.max(0, Math.min(top, containerHeight - 12));
$el.css({
left: left + 'px',
top: top + 'px'
});
});
}
除了性能问题，边界条件同样需要处理。当容器被缩放到很小时，百分比计算出的left和top可能会让电极点部分或全部超出容器边界。上面的代码中加入了最小尺寸判断和边界限制，保证电极始终可见。如果头皮轮廓不是矩形而是椭圆形，那么还需要根据椭圆的参数方程进一步判断电极是否落在轮廓内部，但那是另一个话题。
另外，在移动端或触屏设备上，jQuery UI Resizable的鼠标事件可能失效，需要引入jQuery UI Touch Punch之类的补丁。不过这与电极定位偏移本身无关，只是在完整方案中应当考虑。项目的关键是保持坐标系统的统一：所有电极位置以百分比形式存储，任何尺寸变化只触发一次重新计算，避免在resize过程中对单个电极做累加式的位置修改。
总结来说，解决jQuery UI Resizable在脑电地形图分析中电极定位偏移的核心，不是去修改jQuery UI的源码，而是改变电极坐标的存储和更新方式。将绝对像素转换为相对百分比，配合事件节流和边界保护，可以保证在任意缩放场景下电极点与头皮轮廓的准确对齐。
jQuery UI Resizable脑电地形图电极定位修改时间：2026-09-19 07:17:47