【问题标题】:Length of Bezier curve with javascript使用javascript的贝塞尔曲线的长度
【发布时间】:2011-07-24 18:22:52
【问题描述】:

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

【问题讨论】:

    标签: javascript jquery svg bezier


    【解决方案1】:

    根据 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>
    

    【讨论】:

    • 你能举个例子说明如何让它与 Keith Wood 的 jQuery SVG 插件一起工作吗?
    • 这就是答案。你应该接受它。否则作业。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-01-21
    • 1970-01-01
    • 1970-01-01
    • 2018-12-03
    • 2023-03-24
    • 1970-01-01
    相关资源
    最近更新 更多