Famo.us

Question

为什么我为此投了反对票？

更新 - 已解决

谢谢你们给我指明了正确的方向。我实际上发现使用 View 并没有我希望的那么有用。我的解决方案是使用 ContainerSurface。

请在这里找到我的解决方案：http://jsfiddle.net/pandafinity/qntrau92/

我确定我可以删除很多代码，但 ContainerSurfaces 似乎是我需要的。

再次感谢:)

大家好，新年快乐！！

有没有人有使用新方法 'proportionsFrom' 作为 Famo.us 修饰符的例子？ https://famo.us/docs/core/Modifier

似乎比计算宽度等容易得多，所以想知道是否有人在使用它，因为搜索引擎上没有任何内容:)

我想看看它是否会覆盖尺寸等？

任何帮助将不胜感激:)

再次感谢。

更新

这是一些快速代码。我试图调用一个特定大小的视图（可能是浏览器的百分比大小）。在这个视图中，我想要另一个视图占据外部视图（不是浏览器窗口）的 30% 宽度。

JSFiddle 示例在这里：http://jsfiddle.net/pandafinity/b68zfbyt/

-- 主文件

define(function(require, exports, module) {
  'use strict';
  var Engine = require("famous/core/Engine");
  var StateModifier = require('famous/modifiers/StateModifier');
  var TestingWindow = require('app/widgets/TestingWindow');
  var mainContext = Engine.createContext();
  var contextSize = [undefined, undefined];
  var mainView = new TestingWindow();

  mainContext.setPerspective(1000);

  Engine.nextTick(function() {
    contextSize = mainContext.getSize();
    mainContext.add(mainView);
  });
});

调用的主视图是 'TestingWindow' :

define(function(require, exports, module) {
  'use strict';

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  var SidePanel = require('app/lib/panels/SidePanel');

  function TestingWidget() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      content: 'Weegeet',
      properties: {
        border: '1px solid #ccc'
      }
    });

    this._mainModifier = new StateModifier({
      size: [300,500],
      origin: [0.5,0.5],
      align: [0.5,0.5],
    });
    this.sidePanel = new SidePanel();

    // This is the Proportions Bit I am asking about - but it attaches the sidePanel View
    // to the Context not the 'TestingWindow' (it appears)
    this._sidePanelModifier = new StateModifier({
      proportions: [0.3,1]
    });

    this.add(this._mainModifier).add(this.surface);

    this.add(this._sidePanelModifier).add(this.sidePanel);
  }
  TestingWidget.prototype = Object.create(View.prototype);
  TestingWidget.prototype.constructor = TestingWidget;

  module.exports = TestingWidget;
});

'SidePanel' 视图 - 我希望 'TestingWindow' 视图的宽度为 30%：

define(function(require, exports, module) {
  'use strict';

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  function SidePanel() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      size: [undefined,undefined],
      properties: {
        backgroundColor: 'red'
      }
    });
    this._mainModifier = new StateModifier({
      opacity: 0.6
    });

    this._add(this._mainModifier).add(this.surface);
  }
  SidePanel.prototype = Object.create(View.prototype);
  SidePanel.prototype.constructor = SidePanel;

  module.exports = SidePanel;
});

希望这能更多地解释我正在努力实现的目标。

再次感谢:)

Answer 1

它是这样工作的：

var mod = new Modifier();

// set size to full-width and 100px height
mod.sizeFrom([undefined, 150]);

// set size to 50% of full-width and 10% of height (15px)
mod.proportionsFrom([0.5, 0.1]);

Answer 2

实际上并没有覆盖大小。它根据原始值的大小更改呈现的大小。

Example jsBin here

当您点击表面时，下面的代码将随机设置 1、2 或 3 的比例。表面大小设置为与父上下文 ([undefined, undefined]) 一样大，并将适当调整大小。修饰符会将其尺寸 proportionately 更改为原始尺寸集。

示例代码

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var surface = new Surface({ 
    size: [undefined, undefined],
    content: 'Famo.us Application',
    properties: {
      backgroundColor: 'rgba(0, 255, 0, 0.5)'
    }
  });

  var modifier = new Modifier({
    size: [100, 100],
    proportions: [2, 2]
  });

  var proportion = 1;
  function _getProportions() {
    return [proportion, proportion];
  }

  surface.on('click', function(e){
    console.log('clicked ', proportion);
    proportion = Math.floor(Math.random() * (3)) + 1;
    this.setContent('Clicked ' + this.getSize());
  });
  surface.on('resize', function() {
    console.log('changing ', proportion);
    this.setContent('Changed Size ' + this.getSize());
  });

  mainContext.add(modifier).add(surface);

  modifier.proportionsFrom(_getProportions);

[编辑]：处理您的编辑

因为小部件的大小将与父级成比例。让我们在小部件本身内设置比例，这样您就不会在小部件之外应用它。

Example Changes Here

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var StateModifier = require('famous/modifiers/StateModifier');
  var mainContext = Engine.createContext();
  var contextSize = [undefined, undefined];
  var TestingWindow = require('TestingWindow');

  var mainView = new TestingWindow();

  mainContext.setPerspective(1);

  Engine.nextTick(function() {
    contextSize = mainContext.getSize();
    mainContext.add(mainView);
  });
});

define('TestingWindow', function(require, exports, module) {

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  var SidePanel = require('SidePanel');

  function TestingWidget() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      content: 'Weegeet',
      properties: {
        border: '1px solid #ccc'
      }
    });

    this._mainModifier = new StateModifier({
      size: [300 ,500],
      origin: [0.5 ,0.5],
      align: [0.5 ,0.5],
    });
    this.sidePanel = new SidePanel();

    this._sidePanelModifier = new StateModifier({
      size: [undefined, undefined]
    });

    this._contextNode = this.add(this._mainModifier);
    this._contextNode.add(this.surface);
    this._contextNode.add(this._sidePanelModifier).add(this.sidePanel);
  }
  TestingWidget.prototype = Object.create(View.prototype);
  TestingWidget.prototype.constructor = TestingWidget;

  module.exports = TestingWidget;
});

define('SidePanel',function(require, exports, module) {

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  function SidePanel() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      size: [undefined,undefined],
      properties: {
        backgroundColor: 'red'
      }
    });
    this._mainModifier = new StateModifier({
      opacity: 0.6,
      proportions: [0.333, 1]
    });

    this._add(this._mainModifier).add(this.surface);
  }
  SidePanel.prototype = Object.create(View.prototype);
  SidePanel.prototype.constructor = SidePanel;

  module.exports = SidePanel;
});

Famo.us - 在修饰符中使用 'proportionsFrom'

Famo.us - Using 'proportionsFrom' in Modifiers

示例代码

[编辑]：处理您的编辑