1

私のコード:

$(document).ready(function () {           

            // Creates canvas 800 × 800 at 30, 50
            var paper = Raphael(30, 50, 800, 800);
            $(document).click(function () {
                create(paper);
            });

            function create(paper) {

                // Creates circle at x = 250, y = 100, with radius 50
                var circle = paper.circle(250, 100, 50);
                // Sets the fill attribute of the circle to red (#f00)
                circle.attr("fill", "#f00");

                // Sets the stroke attribute of the circle to white
                circle.attr("stroke", "#EEE");
                circle.animate({ transform: "r" + 180 }, 1000);
           }
        });

ドキュメントをクリックすると円を作成できます。Raphael.js を使用して、動的な場所でページ上のフライング アニメーションをクリックして、さまざまな色の円オブジェクトを作成するコードを教えてください。

4

1 に答える 1

1

おそらく、これから何かを適応させることができますか？

var canvas = Raphael( 0, 0, 320, 240 );

var backboard = canvas.rect( 0, 0, 320, 240 ).attr( { fill: 'white', stroke: 'none' } );

backboard.click( function( event, x, y )
    {
        var bbox = backboard.getBBox();
        var x_ratio = x / bbox.width;
        var y_ratio = y / bbox.height;

        var color = 'rgb(' + Math.floor( x_ratio * 255 ) + ',0,' + Math.floor( y_ratio * 255 ) + ")";

        var transient_circle = canvas.circle( x, y, 25 ).attr( { fill: color, stroke: 'black', 'stroke-width': 1 } );
        transient_circle.animate( { cx: bbox.width / 2, cy: bbox.width / 3, 'fill-opacity': 0.25 }, 3000, ">", function()
            {
                transient_circle.animate( { 'stroke-opacity': 0, 'fill-opacity': 0 }, 2500, function() 
                { 
                    transient_circle.remove(); 
                } );
            } );
    } );

フィドルはここにあります。

一般的な考え方は、クリックの位置をキャプチャし、位置の変数を使用して円の属性を決定し、クリックの位置から中心に向かって円をアニメートし、そこでフェードアウトして削除するというものです。アニメーションの速度を十分に遅くして、さまざまな色の透明な円がたくさん重なっているのを見ることができるようにしました。

于 2012-07-03T19:57:52.083 に答える