围绕原点旋转 - Famo.us答案

【问题标题】：Rotating around origin - Famo.us围绕原点旋转 - Famo.us
【发布时间】：2014-06-22 05:37:28
【问题描述】：

如果我对 ImageSurface 应用了 translate ，如何围绕它的原点旋转它？

它不绕原点旋转。有人可以解释一下它是使用“对齐点”作为旋转中心吗？

编辑

我的 ImageSurface 正在旋转，就像它具有较远的旋转点并且它会按比例放大。

 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);

    }

【问题讨论】：

标签： rotation famo.us translate3d

【解决方案1】：

这可以直接使用 Famo.us 来完成，无需修改 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)

【讨论】：

【解决方案2】：

我在旋转元素时遇到了类似的问题。变换原点需要设置为中心（50% 50%）。我为此使用了 css 类。

.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 }  
);

【讨论】：

但是原点 0.5,0.5 应该设置原点。
我也是这么想的，但是没用。使用 web 检查器检查元素并查看转换原点是否设置正确。我不得不将 css 类与 { -webkit-transform-origin: 50% 50% !important; }
我发布的解决方案对我有用，我需要确认为什么？ :) 我也会尝试你的解决方案。