我们如何在famo.us中获得表面的大小? [英] how can we get the size of a surface within famo.us?

问题描述

如果我创建一个famo.us表面，其大小为[true，true] 并放入一些任意的html内容， 有没有一种干净的方法来检索对象的大小?

If i create a famo.us surface giving a size of [true, true] and put some arbitrary html content into it, is there a clean way to retrieve the size of the object?

surface.getSize()仅返回相同的[true,true]

我注意到有一些明显的私有方法，例如: s._currTarget.clientHeight 但是使用这些功能似乎有点麻烦！

I noticed there are some apparently private methods such as: s._currTarget.clientHeight but it seems asking for trouble to use those!

推荐答案

有两种方法可以解决此问题. Famo.us意识到了这一限制，它在优先级列表中应该很高.

There are a couple of ways to solve this issue. Famo.us is aware of this limitation and it should be pretty high on the priority list..

在此示例中，创建了一个新的表面类，该类在deploy函数中或渲染表面时发出事件.我确定在构造过程中会抓住对原始部署功能的引用，以便以后可以正常调用.收到渲染事件后，您可以根据需要任意编辑表面.

In this example, a new surface class is created that emits an event in the deploy function or when the surface is rendered. I am sure to grab the reference to the original deploy function during construction, so that can be called normally later on. Once you receive the render event you can edit the surface any way you wish..

祝你好运！

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


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);
  this.eventHandler.trigger('surface-has-rendered', this);
};

var context = Engine.createContext();

var event_handler = new EventHandler();

event_handler.on('surface-has-rendered', function(surface){

  var size = surface.getSize();
  var width = (size[0] == true) ? surface._currTarget.offsetWidth : size[0] ;
  var height = (size[1] == true) ? surface._currTarget.offsetHeight : size[1] ;

  surface.setSize([width,height]);

  console.log(surface.getSize());

})

var surface = new MySurface({
  size: [true,true],
  content: "Hello",
  properties: {
    color: 'white',
    textAlign: 'center',
    padding: '20px',
    backgroundColor: 'green'
  }
})

surface.pipe(event_handler);

context.add(new StateModifier({origin:[0.5,0.5]})).add(surface);

这篇关于我们如何在famo.us中获得表面的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！