Question

我想在动画中绘制一个矩形线。

这就是我得到的：

    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");

如果以这种方式制作矩形，那么角落就很清晰。

我该如何解决？

Answer 1

更新为先前的愚蠢道歉：

我通常使用如下所示的实用程序函数来绘制给定持续时间内的任意路径：

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

这具有处理各种复杂形状的优点，如果您使用print，则包括文本路径。这意味着您可以完成更适度的绘画效果，例如this。

Answer 2

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

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

用raphael画一个矩形线

2 个答案: