Meteor 我们怎样才能得到famo.us内部曲面的大小?
如果我创建一个famo.us曲面,其大小为[真,真] 并将一些任意的html内容放入其中, 是否有一种干净的方法来检索对象的大小Meteor 我们怎样才能得到famo.us内部曲面的大小?,meteor,famo.us,Meteor,Famo.us,如果我创建一个famo.us曲面,其大小为[真,真] 并将一些任意的html内容放入其中, 是否有一种干净的方法来检索对象的大小 surface.getSize()只返回相同的[true,true] 我注意到有一些明显的私人方法,例如: s.\u currentTarget.clientHeight 但使用这些似乎是自找麻烦 有几种方法可以解决这个问题。Famo.us意识到这一局限性,它应该在优先列表中占据相当高的位置 在本例中,将创建一个新的曲面类,该类在deploy函数中或在渲染曲面时发出事
surface.getSize()
只返回相同的[true,true]
我注意到有一些明显的私人方法,例如:
s.\u currentTarget.clientHeight
但使用这些似乎是自找麻烦 有几种方法可以解决这个问题。Famo.us意识到这一局限性,它应该在优先列表中占据相当高的位置 在本例中,将创建一个新的曲面类,该类在deploy函数中或在渲染曲面时发出事件。我肯定会在构建过程中获取对原始部署函数的引用,以便以后可以正常调用。接收到渲染事件后,可以按任何方式编辑曲面 祝你好运
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);
将
true
传递到。getSize
当前返回曲面的DOM大小
surface.getSize(true)
获取曲面实际大小的最简单方法是surface.getSize(true)
。您不需要为Surface创建子类
但是,如果曲面尚未渲染到DOM,则会出现错误。渲染曲面时,它将发出“部署”事件。你可以这样听:
surface.on('deploy', function () {
// Your Code Here
}.bind(this));
您很可能还必须将代码包装在计时器中。setTimeout()
中。这是因为surface.getSize(true)
方法的执行速度将快于下一个渲染周期(每秒60帧或每个周期约16毫秒)。最终代码如下所示:
// With the rest of your require statements
var Timer = require('famous/utilities/Timer');
surface.on('deploy', function () {
Timer.setTimeout( function () {
// Your code here
// this.surface.getSize(true)
}.bind(this), 16);
}.bind(this));
我也是Famo.us的新手,但我不得不在我的项目中为一些不同的情况实施此修复,而且它似乎工作得很好
让我知道它是否适合您。谢谢您的快速回复。要得到曲面的宽度有点复杂。我在队列任务:TypeError:无法读取null的属性'clientWidth',即使在调用peek函数之前设置了超时,也会出现异常,这可能是因为调用peek函数之前对其进行了计算?你更详细的解决方案应该考虑到这一点。是的。。如果查看任何曲面类的常规部署函数。。您可以看到,它将目标作为第一个参数。这可以在Surface的核心代码中完成,但最好只是子类化。这个事件也让它变得更加复杂。您可以始终在重写的部署函数中应用相同的逻辑,而不必担心事件。感谢您的详细回复。我想这是目前唯一的办法>。不幸的是!它在IRC频道上被提到了很多,似乎很快就会被修复!如果希望在下一帧执行函数,可以使用Timer.nextTick()。