Блог

Я уже некоторое время пытаюсь это понять, я хочу провести эксперимент, в котором изображения на экране будут поддерживаться под заданным углом зрения, независимо от того, сколько пикселей на экране их компьютера.

Код, который регулирует размер стимулов, кажется, работает нормально, но у меня возникают трудности с перестановкой стимулов в идеальный круг. Зоны абсолютно расположены в пределах основной зоны (см. Первое изображение ниже зон, расположенных в кольце — сюда будут помещены мои изображения), и я использую .css «сверху» и «слева», чтобы попытаться собрать изображения в идеальное кольцо в зависимости от угла обзора.

 var mainStimuliWidth = 2.3;
var mainStimuliHeight = 2.3;

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();
        // create variable for pixels per degree
        var PxPerDeg = gorilla.retrieve('pixels_per_degree', null, true)
        //find each zone
        var Zone1 = $(container   ' .Zone1');
        var Zone2 = $(container   ' .Zone2');
        var Zone3 = $(container   ' .Zone3');
        var Zone4 = $(container   ' .Zone4');
        var Zone5 = $(container   ' .Zone5');
        var Zone6 = $(container   ' .Zone6');
        //resize each zone based on pixels per degree
        Zone1.css('height', (mainStimuliHeight * PxPerDeg).toString()   'px');
        Zone1.css('width', (mainStimuliWidth * PxPerDeg).toString()   'px');
        Zone2.css('height', (mainStimuliHeight * PxPerDeg).toString()   'px');
        Zone2.css('width', (mainStimuliWidth * PxPerDeg).toString()   'px');
        Zone3.css('height', (mainStimuliHeight * PxPerDeg).toString()   'px');
        Zone3.css('width', (mainStimuliWidth * PxPerDeg).toString()   'px');
        Zone4.css('height', (mainStimuliHeight * PxPerDeg).toString()   'px');
        Zone4.css('width', (mainStimuliWidth * PxPerDeg).toString()   'px');
        Zone5.css('height', (mainStimuliHeight * PxPerDeg).toString()   'px');
        Zone5.css('width', (mainStimuliWidth * PxPerDeg).toString()   'px');
        Zone6.css('height', (mainStimuliHeight * PxPerDeg).toString()   'px');
        Zone6.css('width', (mainStimuliWidth * PxPerDeg).toString()   'px');
        
        // create positioning variables  
        
        var Position1 = (2.3*PxPerDeg).toString();
        var Position2 = (-2.3*PxPerDeg).toString();
        // reposition stimuli
        
        // timeout 
                setTimeout(function(){ 
          
          Zone1.css('top', Position1   'px');
          Zone2.css('top', Position2   'px');      
          Zone3.css('top', (Position1/2)   'px');
          Zone3.css('left', (Position1*.866)   'px');
          Zone4.css('top', (Position1/2)   'px');
          Zone4.css('left', (Position1*.866)   'px');
          Zone5.css('top', (-Position2/2)   'px');
          Zone5.css('left', (-Position2*.866)   'px');
          Zone6.css('top', (-Position2/2)   'px');
          Zone6.css('left', (-Position2*.866)   'px');
                
            }, 200);
        }
    }
 

С помощью этого кода текущие стимулы выглядят так (см. Фотографии на черном фоне с кругами и ромбами — на первом изображении я устанавливаю большое количество пикселей на градус, на втором изображении я устанавливаю небольшое количество пикселей на градус ). Идея состоит в том, что по мере увеличения пикселей на градус зрения стимулы должны увеличиваться и удаляться друг от друга, чтобы поддерживать один и тот же угол зрения. На экране меньшего размера, когда пиксели на градус уменьшаются, стимулы должны уменьшаться и сближаться, чтобы поддерживать идеальное кольцо. Я знаю, что математика не верна, но я просто пытаюсь заставить вещи двигаться систематически. В идеале я хочу, чтобы диаметр кольца составлял 10,1 визуальных градуса, а каждый стимул вокруг кольца составлял 2,3×2,3 градуса.

Если кто-нибудь знает, как я могу позиционировать эти стимулы, я был бы очень благодарен!

Весь этот макет должно быть намного проще выполнить, просто используя CSS для размещения всех элементов DOM без необходимости пытаться вычислить всю математику, чтобы разместить пункты меню по кругу. Вы можете просто создать элементы меню в своем контейнере и позволить этому ящику управлять размером и положением ваших элементов.

Каждый пункт меню может быть помещен в коробку, которая растягивается по длине контейнера вашего меню. Это радиус вашего меню. Внутри этих контейнеров radius вы можете иметь свои фактические пункты меню. Абсолютно расположите их стопкой в середине вашего меню, затем просто равномерно поверните каждый из контейнеров radius в зависимости от их количества, а затем измените вращение пунктов меню на противоположное.

Контейнеры radius не позволят нажимать на пункты меню, но вы можете отключить события указателя на них и повторно включить события указателя на пункты меню.

Я собрал кодовое поле, показывающее, как это будет работать. Примечание: Песочница использует React только для быстрого объединения разметки, и в качестве препроцессора есть SCSS, но эта разметка и CSS могут использоваться где угодно.