使用jQuery实现动态线条绘制

Question

使用jQuery实现动态线条绘制

7

我希望使用jQuery创建一种线条绘制的效果，就像用隐形笔画出来的一样。类似于这样：http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html。我用其他库制作了这个模型，但我想知道是否有更简单的方法在jQuery中实现。我还想能够动画地绘制曲线和不规则线条。例如，我想要像这样绘制：http://commons.wikimedia.org/wiki/File:Mouse_line_drawing.jpg。是否有jQuery插件可以帮助创建这种效果？如果没有，您能否建议一个简单而有效的方法在jQuery中实现它？谢谢您的建议！祝好，Dimitri Vorontzov

- Dimitri Vorontzov

3个回答

6

请看Raphael。

Raphaël：跨浏览器矢量图形轻松使用。

- Rasika

这是一个非常有趣的库，谢谢Rasika。不幸的是，它目前并不完全符合我的需求。 - Dimitri Vorontzov

4

这是一个比较旧的话题，但我发现下面的链接可能是解决方案：http://plugins.jquery.com/lazylinepainter/

- Tpojka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sylvain · Accepted Answer

我尝试复现这个动画。我使用了一个 div，其中我放置了4个“边界 div”，并且将它们的 position: absolute 使其成为边框。

所有这些“边界 div”都有 0 像素的宽度和 1px solid black 的边框。

当 DOM 准备就绪时，我依次对边界 div 进行动画处理，改变它们的大小以适应容器的尺寸：

$(function() {
    $(".border, #content").hide();
    $("#topbar").show();
    $("#topbar").animate({width: "318px"}, 1000, function() {
        $("#rightbar").show();
        $("#rightbar").animate({height: "238px"}, 1000, function() {
            $("#bottombar").show();
            $("#bottombar").animate({width: "318px"}, 1000, function() {
                $("#leftbar").show();
                $("#leftbar").animate({height: "238px"}, 1000, function() {
                    $("#content").fadeIn(1000);
                });
            });
        });
    });
});

我不知道我是否表达清楚了，英语不是我的母语，但我已经在这里创建了一个 jsBin 示例。

现在你只需要在整个网站上重复这个过程！