用拉斐尔画一个矩形的线条答案

【问题标题】：Draw lines of a rectangle with raphael用拉斐尔画一个矩形的线条
【发布时间】：2012-08-30 03:08:28
【问题描述】：

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

这是我得到的：

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

如果你用这种方法制作一个矩形，那么边角是尖的。

我该如何解决？

【问题讨论】：

出于好奇，@user1386906 -- 你为什么使用路径组合而不是实际的矩形图元？
因为我想为矩形的线条设置动画，就像它在画布上绘制的一样。我不知道矩形图元是否可行？

标签： raphael draw rectangles

【解决方案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。

【讨论】：

感谢您的帮助，但就像我说的，我想将矩形的线条一一绘制。我唯一知道怎么做的是使用 element.path
我很抱歉我是个傻瓜，user1386906。
哇！太感谢了。这为我节省了很多时间！不要道歉，我感谢所有的帮助！
格拉茨。很高兴你们都喜欢 =)

【解决方案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);
                });
            });
        }); 
      }

【讨论】：