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

Famo.us Поверхности имеют единственный способ установить размер поверхности. Они имеют свойство "size", которое принимает массив из двух чисел, которые соответствуют значениям пикселей. Это не слишком полезно при работе с мобильными устройствами, учитывая большое количество различных размеров экрана. Это потребует от пользователя выполнения математики по размеру родительского контейнера, а не для 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. Я предположил, что это будет правильный способ использования%, но это не так.

Ответы

Ответ 1

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

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

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

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

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

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

Ответ 2

Начиная с 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

Ответ 3

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

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

size:[undefined, undefined],

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

Modifier:

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

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

Позиционирование с Origin

Если у вас есть источник [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) окна

Ответ 4

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

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