1

为了使缩放或旋转居中，您需要依赖使用origin属性的修改器，即{"origin":[0.5,0.5]}

不幸的是，origin 似乎不仅会设置表面的参考中心点，还会将其转换到相对于其父级的某个位置。

现在想象以下情况：我想创建一个按钮表面并将其放置在左上角（默认为原点：[0,0]）。触发动作时，表面应从其中心缩放（或旋转） ，而不是从左上角（这将是默认行为）。

显然，我可以通过创建一个自定义变换矩阵来使其工作，将平移和缩放矩阵相乘以使表面居中。

但是我无法想象没有更好的 famo.us 方法可以做到这一点，我尝试制作一个容器（读取视图），通过居中修饰符将表面添加到视图中，然后通过另一个具有原点的修饰符将此视图添加到上下文中[0,0] 但没办法……对使用的模式有什么建议吗？

4

2 回答 2

1

[编辑] Famo.us 版本 > 0.2.0 引入了“对齐”属性。

var rotation = new StateModifier({
  origin:[0.5,0.5], // Set the origin to the center, this will center the rotation as well
  align:[0,0], // Set the surface's origin to the upper left corner of the parent 
  transform: Transform.rotateZ(1), // a transform (here a rotation)
});

下面是我之前针对版本 < 0.2.0 的解决方案：

只要没有具有“大小”属性的修饰符，上下文就会被视为后备。同样，如果缺少 size 属性，修饰符不能相对于其父级定位。这是有关如何执行此操作的示例

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

var mainContext = Engine.createContext();

var surface = new Surface({
  size: [100, 100],
  properties: {
    backgroundColor: '#FA5C4F' // a silly square surface
  }
});

var rotation = new StateModifier({
  origin:[0.5,0.5], //center for the rotation
  transform: Transform.rotateZ(1),// a transform
});

var stateModifier = new StateModifier({
  origin:[0.0,0.0],//The modifier position according to the parent
  size:[100,100],// The size with which the modifier can be positioned (note that using [1,1] would put the center of the square stuck to the upper left corner)
});


mainContext.add(stateModifier).add(rotation).add(surface);
于 2014-05-07T16:34:41.307 回答
0

当您说“不行”时，您是说您不想这样做，还是说 View 不起作用？

我建议每次您想更改原点时都使用 ContainerSurface。如果有两个起源，则必须有两个修饰符。

这是我解决问题的方法..

希望能帮助到你..

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var ContainerSurface  = require('famous/surfaces/ContainerSurface');
var EventHandler      = require('famous/core/EventHandler')
var Transform         = require('famous/core/Transform')
var Easing            = require('famous/transitions/Easing')

var context = Engine.createContext();

var surface = new Surface({
  size: [200,200],
  properties: { backgroundColor: 'green' }
});

surface.rotateState = new StateModifier({origin:[0.5,0.5]});

surface.translateState = new StateModifier({origin:[0,0]});

surface.container = new ContainerSurface({size:surface.getSize()});

surface.container.add(surface.rotateState).add(surface);

var rotate = 0;
var transition = {duration:400,curve:Easing.inOutQuad};

surface.on('click',function(){
  rotate += Math.PI;
  surface.rotateState.setTransform(Transform.rotate(0,0,rotate),transition);
});

context.add(surface.translateState).add(surface.container);
于 2014-05-07T16:25:46.847 回答