Question

为什么我会因此投票减票？

更新 - 已解决

谢谢你们指点我正确的方向。我实际上发现使用View并不像我希望的那样有用。我的解决方案是使用ContainerSurface。

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

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

再次感谢：）

大家好，新年快乐!!

有没有人为Famo.us Modifiers使用新方法'proportionionsFrom'？ 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 - 在修饰符中使用'proportionionsFrom'

2 个答案:

示例代码

[编辑]：解决您的修改