svg繪圖工具raphael.js的使用

ooAAMM 2019-03-25

展開全文

1.raphael.js svg畫圖的開源庫(kù)，支持IE8+

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

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

2.js引用

//raphael.js主庫(kù)

//raphael.js擴(kuò)展庫(kù)，可實(shí)現(xiàn)局部元素拖拽，背景畫布拖拽縮放等
<script src="./raphael.extension.js" type="text/javascript"></script>

3.初始化

假設(shè)頁面上有兩個(gè)畫布需要同時(shí)繪制

js初始化部分：

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

//第一個(gè)參數(shù)（必選）為繪制主函數(shù)，此處設(shè)置為init函數(shù)（具體實(shí)現(xiàn)在下方），

//第二個(gè)參數(shù)（可選）為true表示每次繪制清除畫布，false不清除畫布，

//第三個(gè)參數(shù)（可選）為任意類型，是用戶傳給繪制主函數(shù)的自定義額外參數(shù)。

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

//繪制主函數(shù)的實(shí)現(xiàn)，第一個(gè)參數(shù)（必選）為當(dāng)前raphael實(shí)例，第二個(gè)參數(shù)（可選）為用戶自定義額外參數(shù)（與上方draw函數(shù)的第三個(gè)參數(shù)對(duì)應(yīng)）

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 //
});

//矩形，起始點(diǎn)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 移動(dòng)到（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（第一個(gè)是正常繪制，第二個(gè)光滑連接）
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　按角度旋轉(zhuǎn)| 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"});
//“l(fā)inear”（線性）
//“<”或“easeIn”或“ease-in” （由慢到快）
//“>”或“easeOut”或“ease-out”（又快到慢）
//“<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
//“backIn”或“back-in”（開始時(shí)回彈）
//“backOut”或“back-out”（結(jié)束時(shí)回彈）
//“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;
}

//縮放函數(shù)

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.實(shí)例應(yīng)用

偶然在一個(gè)商業(yè)js項(xiàng)目里找到一幅世界地圖的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文件的讀取及數(shù)組遍歷省事 -->
    <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./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>

效果展示；

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： ooAAMM > 《14一些博客文章》

舉報(bào)/認(rèn)領(lǐng)