Skip to content

Instantly share code, notes, and snippets.

@jinwei233
Created December 19, 2013 02:54
Show Gist options
  • Save jinwei233/8033643 to your computer and use it in GitHub Desktop.
Save jinwei233/8033643 to your computer and use it in GitHub Desktop.
raphaeljs平滑的连线
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="http://a.tbcdn.cn/p/global/1.0/global-min.css" />
<title>Raphaeljs 平滑的连接端点</title>
<style type="text/css" media="screen">
.con{
border:1px solid #999;width:700px;height:350px;margin:10px 0 0 10px;
float:left;
}
.clear-both{
clear:both;
}
</style>
</head>
<body>
<div id="J_Paper" class="con">
</div>
<script charset="utf-8" src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>
<script type="text/javascript">
KISSY.use("gallery/kcharts/1.3/raphael/index",function(S,Raphael){
var paper = Raphael("J_Paper");
// paper.path("M,50,50,Q100,10,150,50");
console.log(paper.curveTo);
paper.circle(50,50,3);
paper.circle(150,50,3);
paper.circle(300,300,3);
// 指令的含义: http://raphaeljs.com/reference.html#Paper.path
// 1. 直线连接各个点
paper.path("M,50,50,L150,50L300,300").attr({"stroke":"red"});
// 2. 平滑的连接各个点
paper.path("M,50,50,R150,50,300,300");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment