2

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

谢谢！

4

1 回答 1

3

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

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

在此示例中，表面根据内容的大小在整个上下文中居中。我对 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);
于 2014-04-28T14:56:36.000 回答