Можно ли установить размеры поверхности на основе процентов в Famo.us?

У Famo.us Surfaces есть единственный способ установить размер поверхности. У них есть свойство «размер», которое принимает массив из двух чисел, которые непосредственно соответствуют значениям пикселей. Это не слишком полезно при работе с мобильными устройствами, учитывая большое количество различных размеров экрана. Это потребует от пользователя математических расчетов размера родительского контейнера, а не от Famo.us, выполняющего расчеты за кулисами.

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

var firstSurface = new Surface({
  size: [100, 400],
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F',
    width: "200px"
  }
});

Свойство «width» ничего не делает, независимо от того, удален ли 0-й элемент массива, даже несмотря на то, что утверждается, что вы можете использовать свойства CSS в camelCase. Я предполагал, что это правильный способ использования %, но это не так.


famo.us
person Fedoranimus    schedule 11.04.2014    source источник

Ответы (4)


arrow_upward
11
arrow_downward

Нет, это невозможно. Вам нужно рассчитать, но это не сложно:

var sizeModifier = new Modifier();
sizeModifier.sizeFrom(function(){
    var size = mainContext.getSize();
    return [0.5 * size[0],0.5 * size[1]];
});

Движок генерирует событие resize из основного контекста, где вы можете подключить свой модификатор.

Используя функцию sizeFrom, вы можете динамически устанавливать размер.

Вам нужно использовать Modifier, потому что установка размера в Surface не влияет на DOM, а только на размер, используемый для внутренних вычислений. (Это можно использовать для отступов, см. руководство по макету)

Предполагая, что вам нужен процент области просмотра, я использовал mainContext, который равен [100%, 100%]. Конечно, вы можете вызывать getSize на любой родительской поверхности.

person markmarijnissen    schedule 11.04.2014
comment
Я знал, что это не сложно, просто казалось глупым делать это таким образом. - person Fedoranimus; 12.04.2014
comment
Как получить родителя? - person trusktr; 27.07.2014
comment
Зависит от того, как вы структурировали свой код. Я предполагаю, что у вас нет ссылки на родителя, верно? В этом случае вы можете посмотреть на ContextualView.js. (Прочитайте исходный код и проверьте функцию фиксации). Если вам нужна дополнительная информация, возможно, опубликуйте еще один вопрос SO! - person markmarijnissen; 27.07.2014

arrow_upward
7
arrow_downward

Начиная с версии famo.us v0.3, был добавлен пропорциональный размер. Теперь вы можете использовать такие обозначения:

new Modifier({
    size: [undefined, undefined],
    proportions: [0.5, 1/3] // width 50%, height 33%
});

Вы также можете использовать, например, SizeConstraint для масштабирования размера:

var sizeCS = new SizeConstraint({
   scale: [0.5, 1.3]
});
sizeCS.add(new Surface({..}));

https://github.com/IjzerenHein/famous-sizeconstraint

person IjzerenHein    schedule 02.11.2014

arrow_upward
5
arrow_downward

Я использовал famo.us для создания примеров Breezi, Thinglist и Lumosity capptivate.co (neaumusic.github.io)

Поверхность:

size:[undefined, undefined],

// this is default; size key can be ommited; fills Modifier size

Модификатор:

size: [window.innerWidth * 0.5, window.innerHeight * 0.5],

Позже вы можете использовать .setTransform() в своем модификаторе с Transform.scale() или Transform.rotateY(), и, поскольку ваша поверхность напрямую перекрывает модификатор, ничего странного не произойдет. Это не означает, что у вас не может быть модификатора 1 пиксель на 1 пиксель для позиционирования поверхности из верхнего левого угла поверхности, и это приводит меня к еще одной теме путаницы с позиционированием...

Позиционирование с исходной точкой

Если у вас есть исходная точка [0,3, 0,3], расположение на 30% пути поперек внутреннего блока будет выровнено по 30% пути поперек внешнего блока.

Другими словами, используя CSS, выравнивая левый край внутреннего по левому краю внешнего:

position: absolute,
left: 30%

Не эквивалентно происхождению: [0,3, Y], потому что ваш внутренний объект будет слишком далеко влево на 30% от его ширины

Но эквивалентно смещению:

origin: [0, Y],
transform: Transform.translate(window.innerWidth * 0.3, 0, 0)

Мне рекомендовали использовать только 9 позиций для источника

Углы, середина краев и центр (0,5, 0,5) коробки

person neaumusic    schedule 16.04.2014

arrow_upward
0
arrow_downward

Famo.us управляет размером поверхности, но у вас есть возможность установить минимальную и максимальную ширину и высоту на ваших поверхностях, чтобы они реагировали.

  var firstSurface = new Surface({
    size: [100, 400],
    content: 'hello world',
    properties: {
      color: 'red',
      textAlign: 'center',
      backgroundColor: '#FA5C4F',
      minWidth: '90%',
      maxHeight: '60%'
    }   
  });
person talves    schedule 05.10.2014