10

Famo.us サーフェスには、サーフェスのサイズを設定する方法が 1 つあります。それらには、ピクセル値に直接対応する2つの数値の配列を取る「サイズ」プロパティがあります。これは、多数の異なる画面サイズが与えられたモバイル デバイスを扱う場合にはあまり役に立ちません。これにより、Famo.us が裏で計算を行うのではなく、ユーザーが親コンテナのサイズを計算する必要があります。

値の 1 つが指定されていない場合、そのディメンションの使用可能な 100% が使用されますが、50% または 33% を指定する方法はありません。

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

「幅」プロパティは、キャメルケースで CSS プロパティを使用できると主張されていても、0 番目の配列要素が削除されたかどうかに関係なく何もしません。これが % を使用する適切な方法だと思いましたが、そうではありません。

4

4 に答える 4

11

いいえ、これは不可能です。計算する必要がありますが、これは難しくありません。

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

エンジンは、resize修飾子を接続できるメイン コンテキストからイベントを発行します。

関数を使用するsizeFromと、サイズを動的に設定できます。

Modifieraにサイズを設定しても DOM には影響Surfaceせず、内部計算に使用されるサイズのみが影響を受けるため、 a を使用する必要があります。(これは間隔に使用できます。レイアウト ガイドを参照してください)

ビューポートのパーセンテージが必要だと仮定すると、[100%,100%] である mainContext を使用しました。もちろん、getSize任意の親サーフェスで呼び出すことができます。

于 2014-04-11T22:04:58.547 に答える
7

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

于 2014-11-02T22:37:30.603 に答える
0

Famo.us はサーフェスのサイズを管理しますが、サーフェスの幅と高さの最小値と最大値をレスポンシブに設定することができます。

  var firstSurface = new Surface({
    size: [100, 400],
    content: 'hello world',
    properties: {
      color: 'red',
      textAlign: 'center',
      backgroundColor: '#FA5C4F',
      minWidth: '90%',
      maxHeight: '60%'
    }   
  });
于 2014-10-05T19:11:44.153 に答える