使用jQuery与CSS实现6个固定视觉角度刺激元素的正环形布局

问题根源 #

你现有代码的问题主要集中在定位逻辑部分：

• 偏移基准错误：用刺激自身尺寸2.3°作为环形偏移基准，和你要求的10.1°直径环形参数不匹配
• 坐标计算错误：6个刺激均匀分布在正环上相邻夹角为60°，你没有按极坐标规则正确计算每个点的偏移，还出现了Zone3/4、Zone5/6坐标完全重复的问题，导致刺激重叠
• 缺少中心对齐逻辑：绝对定位的元素默认以容器左上角为基准偏移，你没有以容器中心点为基准做坐标修正，导致整体环形位置偏移

修复方案 #

你可以直接替换原有定位部分的代码，修复后代码如下：

var mainStimuliWidth = 2.3;
var mainStimuliHeight = 2.3;
// 新增环形参数：直径10.1°对应半径为5.05°
var ringRadiusDeg = 10.1 / 2;

gorillaTaskBuilder.onScreenStart((spreadsheet: any, rowIndex: number, screenIndex: number, row: any, container: string) => {
    $('body').css('background-color', BACKGROUND_COLOUR);
    $('h1, h2, h3, h4, h5, p, span').css('color', TEXT_COLOUR);
    if(row.display == _requiredRTDisplay){
        if(screenIndex == _requiredRTScreen){
            $(window).resize();
            // 获取像素/度换算值
            var PxPerDeg = gorilla.retrieve('pixels_per_degree', null, true);
            // 计算环形半径像素值、刺激半宽/半高（用于中心对齐）
            var ringRadiusPx = ringRadiusDeg * PxPerDeg;
            var stimHalfWidth = (mainStimuliWidth * PxPerDeg) / 2;
            var stimHalfHeight = (mainStimuliHeight * PxPerDeg) / 2;
            // 获取容器中心点坐标（相对于容器左上角）
            var containerEle = $(container);
            var containerCenterX = containerEle.width() / 2;
            var containerCenterY = containerEle.height() / 2;

            // 获取所有Zone
            var zones = [
                $(container + ' .Zone1'),
                $(container + ' .Zone2'),
                $(container + ' .Zone3'),
                $(container + ' .Zone4'),
                $(container + ' .Zone5'),
                $(container + ' .Zone6')
            ];

            // 批量设置刺激尺寸
            zones.forEach(zone => {
                zone.css({
                    'height': (mainStimuliHeight * PxPerDeg) + 'px',
                    'width': (mainStimuliWidth * PxPerDeg) + 'px',
                    'position': 'absolute' // 确保绝对定位生效
                });
            });

            setTimeout(() => {
                // 6个刺激对应的极角（单位：弧度，对应0°、60°、120°、180°、240°、300°，可根据你的Zone顺序调整角度匹配）
                const angles = [0, Math.PI/3, 2*Math.PI/3, Math.PI, 4*Math.PI/3, 5*Math.PI/3];
                zones.forEach((zone, idx) => {
                    // 极坐标转笛卡尔坐标（相对于容器中心）
                    const offsetX = ringRadiusPx * Math.cos(angles[idx]);
                    const offsetY = ringRadiusPx * Math.sin(angles[idx]);
                    // 计算最终top/left：中心坐标 + 偏移 - 刺激半宽高，保证刺激中心落在环形轨道上
                    const finalLeft = containerCenterX + offsetX - stimHalfWidth;
                    const finalTop = containerCenterY + offsetY - stimHalfHeight;
                    zone.css({
                        'left': finalLeft + 'px',
                        'top': finalTop + 'px'
                    });
                });
            }, 200);
        }
    }
});

注意事项 #

• 代码中angles数组的角度顺序可以根据你Zone1~Zone6对应的实际位置调整，只要保证6个角度间隔为60°即可保持正环形
• 所有尺寸和偏移都绑定了PxPerDeg参数，无论屏幕像素密度如何变化，刺激尺寸、环形大小都会同步缩放，保持固定视觉角度

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