Question

我尝试了代码：

 paper.rect(100, 100, 300,300).animate({transform :"t0,0r120t-0,0"}, 2000, "bounce");

在stie http://raphaeljs.com/playground.html 并且它工作得很好，但在我的代码中，我无法让对象在地方旋转。请帮忙？我想要旋转的是var blueRect。

这是我的代码：

<!DOCTYPE html>

<html lang="sv">

<head>
<meta charset="utf-8" />
<title>SVG/VLM</title>
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />

<style>

    #artboard{
        width: 240px;
        height: 150px;
    }

</style>

<script src="raphael.js"></script>
<script type="text/javascript">



    var paper;
    var blueRect;
    var redRect;
    var rightButton;
    var stopButton;


    var xEnd;

    function init(){

        paper = Raphael("artboard");

        // Bakgrunden
        var background = paper.rect( 0, 0, "100%", "90px", 0 );
        background.attr({fill: "#f3f3ff", "stroke-width": 1, "stroke": "#000"});

        // Blåa rektangeln
        blueRect = paper.rect( 35, 20, "50px", "50px", 0);
        blueRect.attr({fill: "#aaaaff", "stroke-width": 3, "stroke": "#000"});

        // Röda rektangeln
        redRect = paper.rect( 150, 20, "50px", "50px", 0);
        redRect.attr({fill: "#ffaaaa", "stroke-width": 3, "stroke": "#000"});

        //Knapparna
        rightButton = paper.rect(5, 100, "50px", "22px", 0);
        rightButton.attr("fill", "#ff0000");

        leftButton = paper.rect(65, 100, "50px", "22px", 0);
        leftButton.attr("fill", "#00ff00");

        sidewaysButton = paper.rect(125, 100, "50px", "22px", 0);
        sidewaysButton.attr("fill", "#0000ff");

        stopButton = paper.rect(185, 100, "50px", "22px", 0);
        stopButton.attr("fill", "#000");

        xEnd = 150;

        // Kör funktionen sideways()
        go();

    };

    function go(){

        rightButton.click(
            function rotateRight(){
                blueRect.animate({transform:"t0,0r120t-0,0"}, 2000, "bounce");
        });

        sidewaysButton.click(
            function sine(){

                if( xEnd == 150 )
                    xEnd = 50;
                else
                    xEnd = 150;

                redRect.animate( {x: xEnd},     // Attributet som ska animeras följt av till vilket värde den ska animeras

                    1000,                       // Tiden
                    "sine",                 // Ease funktion
                    function (){ sine(); }  // Anropar sig själv igen för att upprepa funktionen.

                );

        });

        stopButton.click(
            function stop(){

                redRect.stop();

        });
    }


</script>
</head>

<body onload="init()">

<div id="artboard"></div>

</body>

</html>

我对瑞典的所有评论感到抱歉，希望你能理解我的代码并不重要。

Answer 1

在这种特殊情况下，您需要通过指定中心点使其围绕其中心旋转，因此变换看起来像......

blueRect.animate({transform:"r120,60,45"}, 2000, "bounce")

如果它的变量在哪里，你可以从getBBox（）

获得中心点

jsfiddle

用变换和Raphaël旋转一个矩形，怎么样？

1 个答案: