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);

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

1 个答案: