【js类库Raphaël】使用raphael.js根据点坐标绘制平滑曲线

 一、可供参考的文档资料。

raphaeljs官网：http://raphaeljs.com/

w3c关于path的介绍：http://www.w3.org/TR/2003/REC-SVG11-20030114/paths.html

mdn关于path的介绍（英文版）：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

mdn关于path的介绍（中文版）：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

 二、简介

raphaeljs目前支持的浏览器： Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, Internet Explorer 6.0+.

因为支持ie6，所以应用可以更广泛些。

超级喜欢的一个demo：http://raphaeljs.com/polar-clock.html

三、实例

使用raphael.js根据点坐标绘制平滑曲线

难点：需要理解svg如何使用贝塞尔曲线；如何获得贝塞尔曲线的锚点坐标。

效果图：

 

代码：

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Carl Test</title>
        <script src="./js/raphael.js"></script>        
</head>
<body>
<div id="carl"></div>

<script>
window.onload = function () {
    
    //获取锚点
    function getAnchors(p1x, p1y, p2x, p2y, p3x, p3y) {
        var l1 = (p2x - p1x) / 2,
            l2 = (p3x - p2x) / 2,
            a = Math.atan((p2x - p1x) / Math.abs(p2y - p1y)),
            b = Math.atan((p3x - p2x) / Math.abs(p2y - p3y));
        a = p1y < p2y ? Math.PI - a : a;
        b = p3y < p2y ? Math.PI - b : b;
        var alpha = Math.PI / 2 - ((a + b) % (Math.PI * 2)) / 2,
            dx1 = l1 * Math.sin(alpha + a),
            dy1 = l1 * Math.cos(alpha + a),
            dx2 = l2 * Math.sin(alpha + b),
            dy2 = l2 * Math.cos(alpha + b);
        return {
            x1: p2x - dx1,
            y1: p2y + dy1,
            x2: p2x + dx2,
            y2: p2y + dy2
        };
    }
    
   
    
    (function(){
        var data = [{x:35,y:180},{x:125,y:59},{x:250,y:180},{x:450,y:70},{x:530,y:170}];
        var paper = Raphael("carl", 800, 300); 
        
        var p;
        for(var i=0, ii = data.length; i<data.length;i++){
            var point = data[i];
            var x = point.x;
            var y = point.y;
            if(!i){
                 p = ["M", x, y, "C", x, y];
            }
            if (i && i < ii - 1) {
               var point1 = data[i-1];
               var point2 = data[i+1];
                var a = getAnchors(point1.x, point1.y, x, y, point2.x, point2.y);//获取锚点
                p = p.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
                
                paper.circle(a.x1, a.y1).attr({fill: "red",stroke:"#fff",r:3});//锚点
                paper.circle(a.x2, a.y2).attr({fill: "red",stroke:"#fff",r:3});//锚点
                paper.path('M'+a.x1+','+a.y1+' L'+x+','+y).attr({stroke:"red"});//锚点到点的连线
                paper.path('M'+a.x2+','+a.y2+' L'+x+','+y).attr({stroke:"red"});//锚点到点的连线
            }
            
            paper.circle(x,y).attr({fill: "#34C400",stroke:"#fff",r:3});
            
        }
        p = p.concat([x,y,x,y]);
        paper.path().attr({'path':p}).attr({stroke:"#34C400"});
        
    })();
                
};
</script>
</body>
</html>

 

 

查看：

 

posted @ 2015-09-30 16:32  jinhuazhe2013  阅读(1338)  评论(0)  编辑  收藏  举报