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

问题描述

如果我创建一个大小为 [true, true] 的 famo.us 表面并将一些任意的 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..

在此示例中，创建了一个新的表面类，该类在部署函数中或在呈现表面时发出事件.我一定会在构建过程中获取对原始部署函数的引用，以便以后可以正常调用.收到渲染事件后，您可以按自己的意愿编辑表面..

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屋！