当前位置：文江博客话题详情

JavaScript jQuery SVG bezier

使用javascript计算贝塞尔曲线的长度

发布于 2024-11-26 00:04:55 字数 59 浏览 4 评论 0原文

我使用 Keith Wood 的 jQuery SVG 插件沿着路径绘制文本。 JS如何获取路径的长度？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

七颜 2024-12-03 00:04:55

根据 SVG 规范，使用 path.getTotalLength()。

以下是如何将其与 jquery-svg 库一起使用的最小示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
@import "jquery.svg.css";

#mydiv { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mydiv").svg({
        onLoad : function(svg){
            var path = svg.createPath(); 
            var pathNode = svg.path(path.move(100, 200).curveC([[200, 
                100, 300, 0, 400, 100], [500, 200, 600, 300, 700, 
                200], [800, 100, 900, 100, 900, 100]]));

            console.log(pathNode.getTotalLength());

        }
    });
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

From the SVG specification, use path.getTotalLength().

Here's a minimal example of how to use this with the jquery-svg library:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
@import "jquery.svg.css";

#mydiv { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mydiv").svg({
        onLoad : function(svg){
            var path = svg.createPath(); 
            var pathNode = svg.path(path.move(100, 200).curveC([[200, 
                100, 300, 0, 400, 100], [500, 200, 600, 300, 700, 
                200], [800, 100, 900, 100, 900, 100]]));

            console.log(pathNode.getTotalLength());

        }
    });
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

27 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文