绕原点旋转- Famo.us

Question

如果我对imagessurface应用了translate，那么我如何围绕它的原点旋转它呢?

它不绕原点旋转。有人能解释一下它是用"align point"作为旋转中心吗?

编辑

我的imagessurface正在旋转，就像它有距离旋转点一样，它会缩放。

 function _createFb() {
    this.fbLogo = new ImageSurface({
        size : [true, true],
        content : 'images/fb.png',
        properties: {
            zIndex: 10
        }
    });
      var fbModifier = new StateModifier({
        origin: [0.5,0.5],
        align:[0.5,0.5],
        transform: Transform.scale(0.4,0.4,1)
    });
       var fbPosModifier = new StateModifier({
        transform: Transform.translate(-250,520,0)
    });

    this.fbLogo.on("mouseleave", function(){
          fbModifier.setTransform(Transform.rotateZ(Math.PI/4), { duration: 1000});
    });
    this.layout.content.add(fbModifier).add(fbPosModifier).add(this.fbLogo);
}

我的解决方案

function _createFb() {
        this.fbLogo = new ImageSurface({
            size : [true, true],
            content : 'images/fb.png',
            properties: {
                zIndex: 10
            }
        });
          var fbModifier = new StateModifier({
            origin: [0.5,0.5],
            align:[0.5,0.5],
            transform: Transform.scale(0.4,0.4,1)
        });
           var fbPosModifier = new StateModifier({
            transform: Transform.translate(-250,520,0)
        });
           var fbRotateModifier = new Modifier();
           var transitionable = new Transitionable(0);

        this.fbLogo.on("mouseleave", function(){

              transitionable.reset(0);
              fbRotateModifier.transformFrom(function(){
                 return Transform.rotateZ(transitionable.get());
              }
                );
             transitionable.set(2 * Math.PI, {curve: "inOutQuad", duration: 500});
        });
        this.layout.content.add(fbModifier).add(fbPosModifier).add(fbRotateModifier).add(this.fbLogo);
    }

Answer 1

这可以直接使用Famo来完成。我们，不需要修改CSS。这里有一个例子。其中一些修饰符可以组合使用，但为了清晰起见，我将它们分开。首先将原点定心应用于曲面。旋转现在围绕新定义的原点旋转。然后旋转后的曲面被平移。

var surface = new Surface({
    size : [100,100],
    properties : {background : 'red'}
});
var translateModifier = new Modifier({
    transform : Transform.translate(100,0,0)
});
//rotates around and around based on your current system time
var rotateModifier = new Modifier({
    transform : function(){ return Transform.rotateZ(Date.now() * .001) }
});
var centerModifier = new Modifier({
    origin : [.5,.5]
});
context
    .add(translateModifier)
    .add(rotateModifier)
    .add(centerModifier)
    .add(surface)

Answer 2

我在旋转元素时遇到了类似的问题。变换原点需要设置为居中(50% 50%)。我使用了css class。

.myClass {
    -webkit-transform-origin: 50% 50% !important;
}
var myElem = new Surface({
    size: [40, 40],
    classes: ['myClass']
});
this.myElemModifier = new StateModifier();
// called from user action
this.myElemModifier.setTransform(
    Transform.rotateZ(Math.PI), { duration: 5000 }  
);