Question

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

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

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

显然，我可以通过创建一个自定义变换矩阵，使平移和缩放矩阵相乘以使曲面居中来实现它。

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

Answer 1

[编辑] Famo.us版本＆gt; 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)
});

以下是我以前的版本解决方案＆lt; 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);

Answer 2

当你说“没办法”时，你是说你不想这样做，或者说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);

在famo.us中居中表面变换

2 个答案: