1

如果我对 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);

    }
4

2 回答 2

3

这可以直接使用 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)
于 2014-06-21T21:37:28.030 回答
1

我在旋转元素时遇到了类似的问题。变换原点需要设置为中心（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 }  
);
于 2014-06-17T20:47:13.833 回答