famo.us 中没有文本垂直对齐属性吗？

Question

看起来在所有 famo.us 示例中，他们使用非常大的 lineHeight 属性将表面上的文本垂直对齐到中间，而他们使用 textAlign: "center" 将其水平对齐。如果没有垂直对齐，这似乎有问题，因为如果我想要一段文本，行高技巧会搞砸。

谢谢！

Answer 1

这应该是一个比现在更容易的问题，但由于真实尺寸表面的问题，您可能需要为此拼凑一个技巧。

问题在于，真实尺寸的表面无法将其高度报告给修改器以正确计算给定原点的位置。您必须设置表面的实际高度才能实现真正的居中。

在此示例中，表面根据内容的大小在整个上下文中居中。我对 Surface 进行了子类化，因此我可以重新定义以目标元素作为参数的 deploy。然后我设置了 surface.state 的大小，这样它就能够以它的原点居中元素。

这些类型的问题很快就会得到解决，但现在必须进行黑客攻击..

这是一个例子......祝你好运

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

function MySurface(options) {
    Surface.apply(this, arguments);
    this._superDeploy = Surface.prototype.deploy
}

MySurface.prototype = Object.create(Surface.prototype);
MySurface.prototype.constructor = MySurface;

MySurface.prototype.deploy = function deploy(target) {
  this._superDeploy(target);
  var size    = this.getSize();
  var width   = size[0] == true ? target.offsetWidth  : size[0] ;
  var height  = size[1] == true ? target.offsetHeight : size[1] ;
  this.state.setSize([width,height]);
};


var context = Engine.createContext();

var lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var surface = new MySurface({
  size: [200,true],
  content: lorem,
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: 'green'
  }
});

surface.state = new StateModifier({origin:[0.5,0.5]});

context.add(surface.state).add(surface);