1

我想在动画中绘制矩形的线条。

这就是我得到的：

    window.onload = function() {  
        var paper = new Raphael(document.getElementById('ornament2'), 520, 520);

        var balk1 = paper.path("M10 10").animate({path: "M10 10 L510 10"}, 1000, function() {
            paper.path("M510 10").animate({path: "M510 10 L510 14"}, 80, function(){
                paper.path("M510 14").animate({path: "M510 14 L10 14"}, 1000, function(){
                    paper.path("M10 14").animate({path: "M10 14 L10 10"}, 80);
                });
            });
        }); 
      }

绘制了矩形，但如果仔细观察，矩形的角并没有真正闭合。

看看这个例子：

var balk2 = paper.path ("M10 256 L510 256 L510 260 L10 260 z");

如果你用这种方式制作一个矩形，那么边角就会很锋利。

我该如何解决？

4

2 回答 2

2

更新为以前的白痴道歉：

我通常使用如下的实用函数在给定的时间段内绘制任意路径：

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 25;
    var result = path;       

    var interval_id = setInterval( function()
    {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath( 0, this_length );            
        attr.path = subpathstr;
        path.animate( attr, interval_length );                         
        if ( elapsed_time >= duration )
        {
            clearInterval( interval_id );
            if ( callback != undefined ) callback();
        }                                       
    }, interval_length );  
    return result;
}

在这种情况下，您只需调用

var rectPath = drawpath( paper, "M10 10 L510 10 L510 14 L10 14 z", 4000, function()
    {
        // want to apply some other attributes to the finished rectangular path?  Here's where you'd do it.
    } );

This has the advantage of working with all sorts of complicated shapes, include textual paths if you're using print. That means you can accomplish moderately more impressive drawing effects, like this.

于 2012-08-29T17:56:11.877 回答
1

不知道如何修复原件，但也许您可以删除原件，然后使用一条路径重绘

http://jsfiddle.net/XhHgs/1/

   window.onload = function() {  
        var paper = new Raphael(document.getElementById('ornament2'), 520, 520);

        var balk1 = paper.path("M10 10").animate({path: "M10 10 L510 10"}, 1000, function() {
                var path2=paper.path("M510 10");
                path2.animate({path: "M510 10 L510 14"}, 80, function(){
                var path3 = paper.path("M510 14");
                path3.animate({path: "M510 14 L10 14"}, 1000, function(){
                    paper.path("M10 14").animate({path: "M10 14 L10 10"}, 80).remove();
                    path3.remove();
                    path2.remove();
                    balk1.remove();
                    balk1  = paper.path ("M10 10 L510 10 L510 14 L10 14 z");
                });
            });
        }); 
      }​

编辑

在第二个想法只是使用这个

http://jsfiddle.net/XhHgs/3/

   window.onload = function() {  
        var paper = new Raphael(document.getElementById('ornament2'), 520, 520);

        var balk1 = paper.path("M10 10").animate({path: "M10 10 L510 10"}, 1000, function() {
                balk1 .animate({path: "M10 10 L510 10 L510 14"}, 80, function(){
                  balk1 .animate({path: "M10 10 L510 10 L510 14 L10 14"}, 1000, function(){
                   balk1.animate({path: "M10 10 L510 10 L510 14 L10 14 z"}, 80);
                });
            });
        }); 
      }​
于 2012-08-29T16:23:47.213 回答