raphael.js的使用

1.raphael.js svg画图的开源库，支持IE8+

官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html

Github地址: https://github.com/DmitryBaranovskiy/raphael/

2.js引用

//raphael.js主库

<script src="./raphael.js" type="text/javascript"></script>

//raphael.js扩展库，可实现局部元素拖拽，背景画布拖拽缩放等
   <script src="./raphael.extension.js" type="text/javascript"></script>

3.初始化

假设页面上有两个画布需要同时绘制

<div id="main1" class="main main1" style="width:250px;height:300px;">
  </div>
  <div id="main2" class="main main2" style="width:250px;height:300px;">
  </div>

js初始化部分：

var paper1=Raphael.createNew(document.getElementsByClassName(‘main‘)[0], 500, 400);
  var paper2=Raphael.createNew(document.getElementsByClassName(‘main‘)[1], 500, 400);

//第一个参数（必选）为绘制主函数，此处设置为init函数（具体实现在下方），

//第二个参数（可选）为true表示每次绘制清除画布，false不清除画布，

//第三个参数（可选）为任意类型，是用户传给绘制主函数的自定义额外参数。

paper1.draw(init,true,{type:"post"});
  paper2.draw(init);

//绘制主函数的实现，第一个参数（必选）为当前raphael实例，第二个参数（可选）为用户自定义额外参数（与上方draw函数的第三个参数对应）

function init(paper,data){
    console.log("start ,extra params:",data);
    //画圆
   var cir1=paper.circle(15,15,10).attr({
     fill:"red", //填充色
     stroke:"blue", //边缘线
     "stroke-width":4 //
    });

//矩形，起始点x,y,width,height
   var rect1=paper.rect(40,25,60,40).attr({fill:"red",stroke:"green"});
   var rect2=paper.rect(110,25,60,40,5).attr({fill:"red",stroke:"green"});

//椭圆
   var ellipse1 = paper.ellipse(15,55,10,20).attr({
    "fill":"#17A9C6", // background color of the ellipse
    "stroke":"#2A6570", // ellipse‘s border color
    "stroke-width":2 // border width
   });
   //M 移动到（moveTo） (x y)+
   //Z 闭合路径（closepath） (none)
   //L 直线（lineTo） (x y)+
   //H 水平直线 x+
   //V 垂直直线 y+
   //C 曲线（curveto） (x1 y1 x2 y2 x y)+
   //S 平滑曲线 (x2 y2 x y)+
   //Q 二次贝赛尔曲线 (x1 y1 x y)+
   //T 平滑二次贝塞尔曲线 (x y)+
   //A 椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
   //R Catmull-Rom 曲线* x1 y1 (x y)+

//绘制路径

paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z").attr({
     "fill": "#5DDEF4",
     "stroke": "#2A6570",
     "stroke-width": 2
    });
   //2、三角形使用Path命令L
   paper.path("M130,30 L200,30 L160,90 z").attr({
     "fill": "#5DDEF4",
     "stroke": "#2A6570",
     "stroke-width": 2
   });
   //3、T形使用Path命令H,V
   paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z").attr({
      "fill": "#5DDEF4",
      "stroke": "#2A6570",
      "stroke-width": 2
    });
   //4、2次贝塞尔曲线形，使用path命令Q
   paper.path("M240,40L300,40L300,100");
   paper.path("M240,40Q300,40 300,100").attr(‘stroke‘, ‘red‘);
   //5、2次贝塞尔曲线形，使用path命令Q和T（第一个是正常绘制，第二个光滑连接）
   paper.path(‘M10,250 L90,130 L160,160 L250,190 L250,70‘);
   paper.path(‘M10,250 Q90,130 160,160 T250,70‘).attr(‘stroke‘, ‘red‘);
   //6、绘制3次贝赛尔曲线，使用命令C，平滑画线使用命令S
   paper.path(‘M320,120 L350,180 L450,260 L480,140‘);  
   paper.path(‘M320,120 C350,180 450,260 480,140‘).attr(‘stroke‘, ‘red‘);
   paper.path(‘M320,120 S450,260 480,140‘).attr(‘stroke‘, ‘yellow‘);
   //transform
   //T　平移|S　缩放 | R　按角度旋转| M　变换矩阵
    var rect2=paper.rect(110,95,60,40,5).attr({fill:"red",stroke:"green"}).transform("r90t20,0");
   //rect2.animate(
   // { "width":"300", "height":"200" },
   // 500,
   // ‘bounce‘,
   // function(){ }
   //);
   var text1=paper.text(110,195,"你");//.attr({"font-size":"10px"});
   var text1=paper.text(120,195,"好");

var rect3=paper.rect(110,195,60,40,5).attr({fill:"red",stroke:"green"});
   //“linear”（线性）
   //“<”或“easeIn”或“ease-in” （由慢到快）
   //“>”或“easeOut”或“ease-out”（又快到慢）
   //“<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
   //“backIn”或“back-in”（开始时回弹）
   //“backOut”或“back-out”（结束时回弹）
   //“elastic”（橡皮筋）
   //“bounce”（弹跳）
   //rect3.animate({
   // transform: "r90,110,195t100,0s1.5"
   //},2000,"backOut",function(){console.log("finish");})
   //rect3.click(function(){
   // alert("hahah!");
   // });
  rect3.data({
    id:1, 
    name:"n1"
   });
  rect3.data({
    id:2,
    type:"test"
   })
  rect3.removeData("id") 
  rect3.dblclick(function(){
     alert("It‘s a double click !"+rect3.data("name"));
  })

var cir2=paper.circle(110,250,30);
   var newCircle2=cir2.clone();
   var newBBox2=newCircle2.getBBox();
   console.log(newBBox2)
    paper.rect(newBBox2.x,newBBox2.y,newBBox2.width,newBBox2.height);
   //toFront() 、toBack() 、hide() 、show() 、remove()
   //清空
  //paper.clear()
  var img1=paper.image("./favicon.ico",105,245,10,10); 
  paper.setSize(600,800);

var raphaelSet = paper.set();
   raphaelSet.push(rect3,cir2);
   // raphaelSet.splice(1, 1, cir, cir1, cir2);
   raphaelSet.forEach(function(ele){
     ele.attr({
        "fill": "red"
     });
      console.log(ele[0]);
   })
  //raphaelSet.clear()
   raphaelSet.attr({
     "fill": "red"
    });
   console.log("paper",paper);
    paper.setViewBox(00,0,200,200,false)
   //paper.scale(1.3,1.3);
   //元素可拖拽

img1.draggable();
    //背景画布可拖拽
    paper.draggable();
    text1.toFront()
    setTimeout(function(){
       text1.animate({
         transform:"r360,115,200t10,25",
         "font-size":30
       },3000)
    },3000)
     window.paper=paper;
   }

//缩放函数

function zoom(num,paper){
     var paper=paper || window.paper;
     if(num>0 ){
         paper.zoomIn();
      }
      if(num<0 ){
         paper.zoomOut();
       }
       if(num==0){
          paper.zoom(1);
        }
   }

4.实例应用

偶然在一个商业js项目里找到一幅世界地图的json文件，借此试了试raphael的效率如何。

贴出代码：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }

        body {
            overflow: hidden;
            padding: 0;
        }

        .main {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: auto;
            overflow: hidden;
            border: 1px solid yellow;
        }
    </style>
</head>

<body>
    <div id="main1" class="main main1">

    </div>
    <!-- 在此用jquery主要是为了map.json文件的读取及数组遍历省事 -->
    <script src="./jquery-2.2.0.js" type="text/javascript"></script>
    <script src="./raphael.js" type="text/javascript"></script>
    <script src="./raphael.extension.js" type="text/javascript"></script>
    <!-- http://www.hightopo.com/demo/large-screen/index.html -->
    <script src="./map.json"></script>

    <script type="text/javascript">
        function train(result) {
            console.log(result)
        }

        function init(paper, data) {
            console.log("start", data, window.jsonFile);

            var map = window.jsonFile;
            $.each(map.comps, function(i, e) {

                var pathStr = "";
                $.each(e.points, function(ii, ee) {
                    if (ii == 0) {
                        pathStr = "M" + ee;
                    } else {
                        if (e.segments) {
                            if (ii % 2 == 0 && e.segments[ii / 2] == 1) {
                                pathStr += ",M" + ee;
                            } else if (ii % 2 == 0 && e.segments[ii / 2] != 1) {
                                pathStr += ",L" + ee;
                            } else if (ii % 2 != 0) {
                                pathStr += "," + ee;
                            }
                        } else {
                            if (ii % 2 == 0) {
                                pathStr += ",L" + ee;
                            } else {
                                pathStr += "," + ee;
                            }
                        }

                    }

                });

                paper.path(pathStr)
                    .attr({
                        "stroke-width": e.borderWidth,
                        stroke: e.borderColor,
                    })
            });

            paper.draggable();
        }
        var paper1 = Raphael.createNew(document.getElementsByClassName(‘main‘)[0], $(window).width(), $(window).height());
        paper1.draw(init, true, {
            type: "post"
        });
        //setInterval(function(){
        //    paper1.draw(init,true);
        //    paper2.draw(init,true);
        //},2000);
    </script>
</body>

</html>

效果展示；

原文地址：https://www.cnblogs.com/RexSheng/p/8963574.html

时间： 2024-08-16 19:24:09

raphael.js的使用的相关文章

PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)

使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章中,我给大家介绍了如何使用raphael.js绘制中国地图,今天我要给大家介绍在实际应用中,如何把数据载入到地图中.本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果. 本例以统计某产品在各省份的活跃用户数为背景,数据来源于mysql数据库,根据各省份的活跃用户数,分成不同等级,

强大的矢量图形库：Raphael JS 中文帮助文档及教程

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图.饼图.曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作 Rapha?l 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Exp

Javascript实战开发：教你使用raphael.js绘制中国地图

最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

Raphael.js改变元素层叠顺序

Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以改变dom加载顺序实现想要的结果. 1.看Raphael.js API,有关于改变层叠的方法,但只找到两个互换.查看源码发现有改变dom结构的方法. 2.XML DOM appendChild() 方法 移除原有元素插入到新位置.刚开始以为只新增,不移除原有.走了很多弯路,基础不扎实. 3.Raph

使用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

Raphael.js image 在ie8下面的兼容性问题

Raphael.js 在ie7,ie8浏览器内绘制图形采用的vml,在绘制image的时候会解析成 <?xml:namespace prefix = "rvml" ns = "urn:schemas-microsoft-com:vml" /> <rvml:shape class=rvml style="HEIGHT: 1px; WIDTH: 1px; POSITION: absolute; LEFT: 0px; FILTER: none;

Raphael.js API 之Element.remove(),Element.removeData(),paper.text(),Element.node(),Element.onDragOver

/*API-38*/ Element.remove() 删除某个元素对象,无返回值 /*API-39*/ Element.removeData([key]); 删除某个key的value值,如果没有特殊说明则删除所有的元素数据 参数列表: key 可选参数 字符串类型 key 返回值:元素对象 /*API-105*/ 在画布上添加一个字符串,如果需要换行,使用'\n' 参数列表: x number类型 x轴坐标位置 y number类型 y轴坐标 text 字符串类型 文本内容 返回值:type

Raphael.js API之Raphael.pathIntersection(),aphael.pathToRelative(),Set.clear(),Set.exclude(element)

/*API-141*/Raphael.pathIntersection(path1, path2)获取两条线的交点参数列表:path1    字符串类型    路径的字符串表达形式path2    字符串类型    路径的字符串表达形式返回值:交点集合,格式如下:[{    x:       //number类型 点的x坐标    y:       //number类型 点的y坐标    t1:      //number类型   value for segment of path1(不太确定中

svg―Raphael.js Library

Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图.曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作. Raphael是跨浏览器的矢量图形库,目前支持的浏览器包括:Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+以及Internet Explorer 6.0+. 官网地

Raphael.js image 在ie8以下的兼容性问题

Raphael.js 在ie7,ie8浏览器内绘制图形採用的vml,在绘制image的时候会解析成 <?xml:namespace prefix = "rvml" ns = "urn:schemas-microsoft-com:vml" /> <rvml:shape class=rvml style="HEIGHT: 1px; WIDTH: 1px; POSITION: absolute; LEFT: 0px; FILTER: none;