Question

如果我已对其应用了翻译，如何围绕它的原点旋转ImageSurface？

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

修改

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

    }

Answer 1

这可以使用直接Famo.us完成，无需修改CSS。这是一个例子。其中一些修饰符可以组合使用，但为了清晰起见，我将其分解。将原点居中首先应用于Surface。旋转现在围绕新定义的原点进行旋转。然后翻译旋转的曲面。

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类。

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

围绕原点旋转 - Famo.us

2 个答案: