Вопрос пользовательского интерфейса: проектирование для широкоэкранного и 4: 3 форматов одновременно?

Question

Я работаю над пользовательским интерфейсом, который должен работать в различных пропорциях, 16: 9, 16:10, 4: 3

Идея концептуально проста: все сосредоточено на экране в шероховатой области 4: 3, и все, что находится за пределами этой части экрана, имеет простую графику, поэтому что-то вроде этого:

(не в масштабе)

Где розовая область представляет место расположения всех объектов пользовательского интерфейса, а синяя область - только фон и эффекты.

Хитрость в удобстве использования, если я передам координаты (0,0) в среде с соотношением сторон 4: 3 (0,0) будет слева вверху экрана. Однако, если я нахожусь в среде 16: 9 (0,0) нужно перенормировать на основе нового соотношения сторон, чтобы оно находилось в соответствующем месте. Поэтому мой вопрос: как мне этого добиться?

edit: для пояснения это в основном для системы пользовательского интерфейса, и хотя я перечислил вышеупомянутые соотношения как 4: 3, 16: 9, 16:10, он должен иметь возможность динамически корректировать значения для любого соотношения сторон, для которого он установлен.

edit 2: Просто чтобы добавить больше подробностей к ситуации: когда переданы позиции для установки, они передаются в виде% от текущей высоты экрана, поэтому в основном установка позиции x будет: [pos x как часть экрана] * SCREEN_WIDTH где ширина экрана - это ширина самого текущего экрана.

Answer 1

Очевидный ответ, кажется, смещение. Так как 4x3 - 16x9, кажется, вы хотите, чтобы экран 16x9 имел полосы 2x9 слева и справа. Следовательно, смещение Х должно быть (2/16) * ширина.

Для экранов 16x10 коэффициент немного сложнее: 4x3 равен 13,33x10, поэтому у вас есть ребра шириной 1,67, а смещение X должно быть (1,67 / 16) * width = (5/48) * width.

Answer 2

Итак ... Разве вы не можете просто придумать слой абстракции, который скрывает различия? Одна идея может состоять в том, чтобы смоделировать «границу» вокруг активной области, которая будет добавлена. Для дисплеев 4: 3 установите размер рамки на 0, чтобы активная область покрывала весь экран.