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 回答