Created
December 19, 2013 02:54
-
-
Save jinwei233/8033643 to your computer and use it in GitHub Desktop.
raphaeljs平滑的连线
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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