基于每视觉度像素值PxPerDegree的屏幕刺激环形布局重定位问题

问题根因 #

1. 坐标基准错误：你使用Zone1的当前位置作为所有Zone的位移基准，而非整个容器的全局中心点，不同Zone的初始位置计算逻辑本身存在误差，导致Zone1/2的位移量刚好和初始位置抵消，看似无位移。
2. 极坐标计算错误：6等分环形的右下、左下区域Y轴偏移应为正值（CSS坐标系Y轴向下为正），你原本的逻辑将右上/右下、左上/左下的Y偏移设为相同值，本身就不符合环形布局要求。
3. 冗余代码导致误差：6个Zone的尺寸、位置计算重复编写6次，很容易出现变量引用错误，你之前计算初始top的逻辑(父容器高度 - 自身高度 - 初始top)/2是错误的，多减了一次初始top，进一步放大了坐标误差。
4. 可能遗漏定位属性：如果Zone元素未设置position: absolute/relative，top和left属性不会生效，若Zone1/2的父容器未设置定位、其余Zone父容器设置了定位，也会出现部分元素无法移动的问题。

系统化调整方案 #

直接采用全局中心点为基准，预定义每个Zone的极坐标偏移，批量设置所有元素的尺寸和位置，避免重复代码出错：

// 固定参数配置
const RING_RADIUS_DEG = 5.1; // 环形半径=10.2/2 视角度
const STIMULUS_SIZE_DEG = 2.3; // 刺激物尺寸 视角度
const COS_30 = Math.cos(Math.PI / 6); // 精确的cos30°值，替代硬编码的0.866
const SIN_30 = Math.sin(Math.PI / 6); // 精确的sin30°值

// 基础值计算
const PxPerDeg = gorilla.retrieve('pixels_per_degree', null, true);
const stimSizePx = STIMULUS_SIZE_DEG * PxPerDeg;
const ringRadiusPx = RING_RADIUS_DEG * PxPerDeg;

// 全局容器中心点计算
const $container = $(container);
const globalCenterX = $container.width() / 2;
const globalCenterY = $container.height() / 2;

// 各区域偏移配置（按需求对应位置）
const zoneList = [
  { className: '.Zone1', offsetX: 0, offsetY: -ringRadiusPx }, // 顶部
  { className: '.Zone2', offsetX: 0, offsetY: ringRadiusPx }, // 底部
  { className: '.Zone3', offsetX: ringRadiusPx * COS_30, offsetY: -ringRadiusPx * SIN_30 }, // 右上
  { className: '.Zone4', offsetX: ringRadiusPx * COS_30, offsetY: ringRadiusPx * SIN_30 }, // 右下
  { className: '.Zone5', offsetX: -ringRadiusPx * COS_30, offsetY: -ringRadiusPx * SIN_30 }, // 左上
  { className: '.Zone6', offsetX: -ringRadiusPx * COS_30, offsetY: ringRadiusPx * SIN_30 }, // 左下
];

// 批量处理所有区域
zoneList.forEach(zone => {
  const $target = $(`${container} ${zone.className}`);
  // 先设置尺寸和定位属性，确保top/left生效
  $target.css({
    width: `${stimSizePx}px`,
    height: `${stimSizePx}px`,
    position: 'absolute'
  });
  // 计算最终位置，减去自身一半尺寸保证元素中心对齐到环形坐标点
  const finalLeft = globalCenterX + zone.offsetX - stimSizePx / 2;
  const finalTop = globalCenterY + zone.offsetY - stimSizePx / 2;
  $target.css({
    left: `${finalLeft}px`,
    top: `${finalTop}px`
  });
});

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