Famo.us“true”调整大小和渲染树的大小？

时间：2015-03-26 21:19:43

标签： famo.us

我认为我不明白使用true大小调整famo.us节点的大小意味着什么。

在这个例子中，我只想尝试使用固定大小的视图居中。但我最终希望这些BlueView根据它们的内容计算它们的大小，并在Scrollview中有一个它们的数组。

所以，我想我的问题是：

true大小的真正含义是什么？它背后的数学是什么？我假设大小为true触发节点blueModifier，以从其直接子节点获取该值，在本例中为blueView实例。我错了吗？

如果是这种情况，如何让BlueView发布他们的尺寸？阅读famo.us源代码及其文档只是令人困惑。看起来如果View只有一个孩子，它应该使用该孩子的大小。或者，您可以在视图上使用setOptions()来设置其大小。或者您可以覆盖视图getSize()功能。但我无法让任何人工作。

function BlueView() {
  View.call(this)

  this
    .add(new Modifier({
      size: [400, 200],
      origin: [0, 0],
      align: [0, 0]
    }))
    .add(new Surface({
      properties: {
        backgroundColor: 'blue'
      }
    }));

};
BlueView.prototype = Object.create(View.prototype);
BlueView.prototype.constructor = BlueView;



var blueModifier = new Modifier({
  size: [true, true],
  origin: [0.5, 0.5],
  align: [0.5, 0.5],
});

var blueView = new BlueView();


mainContext.add(blueModifier).add(blueView);

http://jsbin.com/gopeli/1/edit?html,output

1 个答案:

答案 0 :(得分：1)

Famo.us中的大小调整可能会让实时快速混乱（目前版本为0.3.5）。我们都希望他们在MixedMode中解决这个问题。这是一个解释它的尝试，试图为你清理它。

尺寸调整类型：

  • True - [true, true]
  • 未定义 - [undefined, undefined]
  • 实际 - [Xpx, Ypx]例如[100, 100]

其中每个都有一个片段，您可以通过点击BlueView查看返回的尺寸。我通过扩展View冒充重构，因此我们可以访问示例的renderables。

真

Famo.us中的真实尺寸可以告诉您的渲染尺寸为contents。基本上它相当于没有高度和宽度的<div>。渲染不能直接从孩子那里得到大小，所以这里没有数学。在使用getSize大小调整时，开发人员需要了解True方法的大小可能不透明。

可能有办法获得可渲染的实际大小，但取决于它如何以及何时渲染到上下文。可以部署可渲染的时间，并从real true获得target大小。

＆＃13;
＆＃13; 
define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var View = require("famous/core/View");
  var Surface = require("famous/core/Surface");
  var StateModifier = require("famous/modifiers/StateModifier");
  var Modifier = require("famous/core/Modifier");

  var BlueView = require("BlueView");

  var mainContext = Engine.createContext();

  // Grid lines to show the center of the context.

  var sizeShow = new Surface({
    content: 'Click BlueView Surface to get sizes',
    size: [true, true],
    properties: {
      backgroundColor: 'rgba(0,0,0,0.15)'
    }
  });

  var outerBlueBack = new Surface({
    size: [undefined, undefined],
    properties: {
      backgroundColor: 'rgba(0,0,255,0.15)'
    }
  });

  var horizontalRule = new Surface({
    content: '',
    size: [undefined, 1],
    properties: {
      backgroundColor: '#aaaaaa'
    }
  });

  var verticalRule = new Surface({
    content: '',
    size: [1, undefined],
    properties: {
      backgroundColor: '#aaaaaa'
    }
  });

  var originModifier = new StateModifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });

  var node = mainContext.add(originModifier);
  node.add(verticalRule);
  node.add(horizontalRule);


  var sizeBlueModifier = new Modifier({
    //size: [true, true]
    //size: [undefined, undefined]
    size: [400, 200]
  });

  var centerBlueModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
  });

  var blueView = new BlueView({
    content: 'set to true',
    size: [true, true]
  });
  blueView.on('deploy', function() {
    var sizeInfo = sizeShow.getContent() + '<br/><hr>';
    var target = this.surface._currentTarget;
    var targetSize = [target.clientWidth, target.clientHeight];
    
    sizeInfo += 'target size = ' + targetSize;
    sizeShow.setContent(sizeInfo);
  });
  blueView.on('click', function(e) {
    console.log(e);
    var target = e.target;
    var targetSize = [target.clientWidth, target.clientHeight];
    
    var sizeInfo = 'target size = ' + targetSize + '<br/><hr>';
    sizeInfo += 'BlueView size = ' + this.sizeMod.getSize() + '<br/>';
    sizeInfo += 'BlueView.sizeMod = ' + this.sizeMod.getSize() + '<br/>';
    sizeInfo += 'BlueView.surface = ' + this.surface.getSize() + '<br/><hr>';
    sizeInfo += 'sizeBlueModifier = ' + sizeBlueModifier.getSize() + '<br/>';
    sizeInfo += 'outerBlueBack = ' + outerBlueBack.getSize() + '<br/>';
    
    sizeShow.setContent(sizeInfo);
  });


  mainContext.add(sizeShow);
  var centerBlueNode = mainContext.add(centerBlueModifier);
  var outerBlueNode = centerBlueNode.add(sizeBlueModifier);
  outerBlueNode.add(outerBlueBack);
  centerBlueNode.add(blueView);
});
define('BlueView', function(require, exports, module) {
  var View = require("famous/core/View");
  var Surface = require("famous/core/Surface");
  var Modifier = require("famous/core/Modifier");

  function BlueView(options) {
    View.apply(this, arguments);

    this.sizeMod = new Modifier({
      size: this.options.size,
    });
    this.placeMod = new Modifier({
      origin: this.options.origin,
      align: this.options.align
    });
    this.surface = new Surface({
      content: this.options.content,
      properties: {
        backgroundColor: 'blue',
        cursor: 'pointer'
      }
    });

    this
      .add(this.sizeMod)
      .add(this.placeMod)
      .add(this.surface);

    this.surface.pipe(this._eventOutput);

  };

  BlueView.DEFAULT_OPTIONS = {
    size: [undefined, undefined]
  };

  BlueView.prototype = Object.create(View.prototype);
  BlueView.prototype.constructor = BlueView;

  module.exports = BlueView;
});
require(['main']);
＆＃13; 
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

未定义

未定义的大小调整会告知可渲染对其“父级”的大小。在这种情况下，应该从父级引用大小。如果您不知道父级是谁，则可以在部署后始终从实际目标可渲染中获得大小。

注意：当size 不设置时，就像设置未定义一样。

＆＃13;
＆＃13; 
define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var View = require("famous/core/View");
  var Surface = require("famous/core/Surface");
  var StateModifier = require("famous/modifiers/StateModifier");
  var Modifier = require("famous/core/Modifier");

  var BlueView = require("BlueView");

  var mainContext = Engine.createContext();

  // Grid lines to show the center of the context.

  var sizeShow = new Surface({
    content: 'Click BlueView Surface to get sizes',
    size: [true, true],
    properties: {
      backgroundColor: 'rgba(0,0,0,0.15)'
    }
  });

  var outerBlueBack = new Surface({
    size: [undefined, undefined],
    properties: {
      backgroundColor: 'rgba(0,0,255,0.15)'
    }
  });

  var horizontalRule = new Surface({
    content: '',
    size: [undefined, 1],
    properties: {
      backgroundColor: '#aaaaaa'
    }
  });

  var verticalRule = new Surface({
    content: '',
    size: [1, undefined],
    properties: {
      backgroundColor: '#aaaaaa'
    }
  });

  var originModifier = new StateModifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });

  var node = mainContext.add(originModifier);
  node.add(verticalRule);
  node.add(horizontalRule);


  var sizeBlueModifier = new Modifier({
    //size: [true, true]
    //size: [undefined, undefined]
    size: [200, 200]
  });

  var centerBlueModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
  });

  var blueView = new BlueView({
    content: 'set to undefined',
    size: [undefined, undefined]
  });
  blueView.on('deploy', function() {
    var sizeInfo = sizeShow.getContent() + '<br/><hr>';
    var target = this.surface._currentTarget;
    var targetSize = [target.clientWidth, target.clientHeight];
    
    sizeInfo += 'target size = ' + targetSize;
    sizeShow.setContent(sizeInfo);
  });
  blueView.on('click', function(e) {
    console.log(e);
    var myTarget = e.target;
    var myTargetSize = [myTarget.clientWidth, myTarget.clientHeight];
    
    var sizeInfo = 'target size = ' + myTargetSize + '<br/><hr>';
    sizeInfo += 'BlueView size = ' + this.sizeMod.getSize() + '<br/>';
    sizeInfo += 'BlueView.sizeMod = ' + this.sizeMod.getSize() + '<br/>';
    sizeInfo += 'BlueView.surface = ' + this.surface.getSize() + '<br/><hr>';
    sizeInfo += 'sizeBlueModifier = ' + sizeBlueModifier.getSize() + '<br/>';
    sizeInfo += 'outerBlueBack = ' + outerBlueBack.getSize() + '<br/>';
    
    sizeShow.setContent(sizeInfo);
  });


  mainContext.add(sizeShow);
  var centerBlueNode = mainContext.add(centerBlueModifier);
  var outerBlueNode = centerBlueNode.add(sizeBlueModifier);
  outerBlueNode.add(outerBlueBack);
  outerBlueNode.add(blueView);
});
define('BlueView', function(require, exports, module) {
  var View = require("famous/core/View");
  var Surface = require("famous/core/Surface");
  var Modifier = require("famous/core/Modifier");

  function BlueView(options) {
    View.apply(this, arguments);

    this.sizeMod = new Modifier({
      size: this.options.size,
    });
    this.placeMod = new Modifier({
      origin: this.options.origin,
      align: this.options.align
    });
    this.surface = new Surface({
      content: this.options.content,
      properties: {
        backgroundColor: 'blue',
        cursor: 'pointer'
      }
    });

    this
      .add(this.sizeMod)
      .add(this.placeMod)
      .add(this.surface);

    this.surface.pipe(this._eventOutput);

  };

  BlueView.DEFAULT_OPTIONS = {
    size: [undefined, undefined]
  };

  BlueView.prototype = Object.create(View.prototype);
  BlueView.prototype.constructor = BlueView;

  module.exports = BlueView;
});
require(['main']);
＆＃13; 
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

实际

实际尺寸是不言自明的。 [100, 100]表示要在width中将height中的100像素渲染为100像素。

＆＃13;
＆＃13; 
define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var View = require("famous/core/View");
  var Surface = require("famous/core/Surface");
  var StateModifier = require("famous/modifiers/StateModifier");
  var Modifier = require("famous/core/Modifier");

  var BlueView = require("BlueView");

  var mainContext = Engine.createContext();

  // Grid lines to show the center of the context.

  var sizeShow = new Surface({
    content: 'Click BlueView Surface to get sizes',
    size: [true, true],
    properties: {
      backgroundColor: 'rgba(0,0,0,0.15)'
    }
  });

  var outerBlueBack = new Surface({
    size: [undefined, undefined],
    properties: {
      backgroundColor: 'rgba(0,0,255,0.15)'
    }
  });

  var horizontalRule = new Surface({
    content: '',
    size: [undefined, 1],
    properties: {
      backgroundColor: '#aaaaaa'
    }
  });

  var verticalRule = new Surface({
    content: '',
    size: [1, undefined],
    properties: {
      backgroundColor: '#aaaaaa'
    }
  });

  var originModifier = new StateModifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });

  var node = mainContext.add(originModifier);
  node.add(verticalRule);
  node.add(horizontalRule);


  var sizeBlueModifier = new Modifier({
    //size: [true, true]
    //size: [undefined, undefined]
    size: [200, 200]
  });

  var centerBlueModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
  });

  var blueView = new BlueView({
    content: 'Actual<br/>[100, 100]',
    size: [100, 100]
  });
  blueView.on('click', function(e) {
    console.log(e);
    var target = e.target;
    var targetSize = [target.clientWidth, target.clientHeight];
    
    var sizeInfo = 'target size = ' + targetSize + '<br/><hr>';
    sizeInfo += 'BlueView size = ' + this.sizeMod.getSize() + '<br/>';
    sizeInfo += 'BlueView.sizeMod = ' + this.sizeMod.getSize() + '<br/>';
    sizeInfo += 'BlueView.surface = ' + this.surface.getSize() + '<br/><hr>';
    sizeInfo += 'sizeBlueModifier = ' + sizeBlueModifier.getSize() + '<br/>';
    sizeInfo += 'outerBlueBack = ' + outerBlueBack.getSize() + '<br/>';
    
    sizeShow.setContent(sizeInfo);
  });


  mainContext.add(sizeShow);
  var centerBlueNode = mainContext.add(centerBlueModifier);
  var outerBlueNode = centerBlueNode.add(sizeBlueModifier);
  outerBlueNode.add(outerBlueBack);
  centerBlueNode.add(blueView);
});
define('BlueView', function(require, exports, module) {
  var View = require("famous/core/View");
  var Surface = require("famous/core/Surface");
  var Modifier = require("famous/core/Modifier");

  function BlueView(options) {
    View.apply(this, arguments);

    this.sizeMod = new Modifier({
      size: this.options.size,
    });
    this.placeMod = new Modifier({
      origin: this.options.origin,
      align: this.options.align
    });
    this.surface = new Surface({
      content: this.options.content,
      properties: {
        backgroundColor: 'blue',
        cursor: 'pointer'
      }
    });

    this
      .add(this.sizeMod)
      .add(this.placeMod)
      .add(this.surface);

    this.surface.pipe(this._eventOutput);

  };

  BlueView.DEFAULT_OPTIONS = {
    size: [undefined, undefined]
  };

  BlueView.prototype = Object.create(View.prototype);
  BlueView.prototype.constructor = BlueView;

  module.exports = BlueView;
});
require(['main']);
＆＃13; 
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题