svg绘图工具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>
效果展示;
svg绘图工具raphael.js的使用的更多相关文章
- 【重点突破】——第三方绘图工具FusionCharts.js的使用详解
一.引言 项目组中,经常会因为绘制图表的繁杂度,衡量会不会使用第三方绘图工具,如果自己做很困难,成本使用高于第三方绘图工具库,就会使用.很多人使用的是Chart.js,因为它是免费使用的,不过,缺点就 ...
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)
(原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...
- Raphael Js矢量库API简介:
Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...
- Python绘图工具Plotly的简单使用
1.Plotly被称为史上最好的绘图工具之一,为了更好的展示金融数据的复杂性. Plotly的官方网站为:https://plot.ly/ python量化的关键是金融数据可视化,无论是传统的K线图, ...
- Raphael.js image 在ie8以下的兼容性问题
Raphael.js 在ie7,ie8浏览器内绘制图形採用的vml,在绘制image的时候会解析成 <?xml:namespace prefix = "rvml" ns = ...
- HTML5_04之SVG绘图
1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...
- 强大的矢量图形库:Raphael JS 中文帮助文档及教程
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...
- 绘图工具graphviz学习使用
画图工具: http://www.tuicool.com/articles/r2iAfa http://www.tuicool.com/articles/RjQfey 绘图工具graphviz学习使用 ...
随机推荐
- jQuery缓存机制(三)
缓存机制提供的入口有: $.data([key],[value]) // 存取数据 $.hasData(elem) // 是否有数据 $.removeData([key]) // 删除数据 $.acc ...
- MacOS 安装PyQt5
PyQt5官方安装教程指出2种安装方法: Installing from Wheels Building and Installing from Source 网上搜罗的大多是按照第二种方法安装的,本 ...
- Android Studio项目提交(或更新)到github的方法
一 配置github登陆信息 二 上传工程到github 1. 2. 点击Share按钮 3. 点击ok按钮 状态栏提示: 4. 点击 No 按钮 5.AS右下脚弹出提示框 查看github网站,已经 ...
- ubuntu安装vncserver实现图形化访问
请注意: 如果在安装中部分软件无法安装成功,说明软件源中缺包,先尝试使用命令#apt-get update更新软件源后尝试安装.如果还是不行,需要更换软件源.更换步骤: a)输入命令#cp /etc/ ...
- 数据库操作相关(sql语句-命令行)
创建数据库: create database books; 创建用户: mysql> grant select,insert,delete,uptate -> on books.* ...
- [转]Android Activity的加载模式和onActivityResult方法之间的冲突
前言 今天在调试程序时,发现在某一Activity上点击返回键会调用该Activity的onActivityResult()方法.我一开始用log,后来用断点跟踪调试半天,还是百思不得其解.因为之前其 ...
- wpgcms---流程控制
在模板里面Twig标签语法的时候,很多时候会用到流程控制. if 判断: {% if true %} {% endif %} // 示例 {% if item.href %} href="{ ...
- yii的安装
1.安装composer windows系统直接下载Composer-Setup.exe 运行安装. 2.安装Composer asset plugin composer安装完成后,在一个可通过web ...
- sklearn的快速使用
传统的机器学习任务从开始到建模的一般流程是:获取数据 -> 数据预处理 -> 训练建模 -> 模型评估 -> 预测,分类.本文我们将依据传统机器学习的流程,看看在每一步流程中都 ...
- 寻找 IBatisNet 批量插入(批量复制) 的心路历程
1.IBatisNet本身就是一个比较早的ORM框架,再加上是从java iBatis移值过来的,其流行程度不是特别高资料也不是很多(一年前),不过最近好像搜索比较多了一些(可能是训练的结果吧) 2. ...