近日发现，有些时候现成的方法需要仔细琢磨才可以知道它适用的环境。本来想偷懒不去自己写方法绘制直线末端的箭头，后来发现arrow-end属性不适用。原来该属性可以认为是全局的一个静态变量。做了一个测试代码：
<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>arrow-end</title>
<script src="jquery.min.js" ></script>
<script src="raphael.js" ></script>
<script>
var model ={};
//path_one 's attribute
model.prop_one =
{
stroke:'red',
'arrow-end':'classic-wide-long',
'stroke-width':3
}
//path_two 's attribute
model.prop_two =
{
stroke:'black',
'arrow-end':'classic-wide-long',
'stroke-width':3
}
$(function()
{
//draw paper
var paper = Raphael("paper",500,300);
//click event
var type =false;
$("#btn").click(function()
{
if(type)
{
type = false;
//draw path_one
var path_one = paper.path("M 50 30 L 70 90");
path_one.attr(model.prop_one);
//draw path_two
var path_two = paper.path("M 100 40 L 200 70");
path_two.attr(model.prop_two);
}
else
{
type = true;
//draw path_one
var path_one = paper.path("M 50 30 L 70 90");
path_one.attr(model.prop_two);
//draw path_two
var path_two = paper.path("M 100 40 L 200 70");
path_two.attr(model.prop_one);
}
})
})
/*
* the test tell us the attribute called 'arrow-end' is static
*/
</script>
</head>
<body>
<div id="paper">.</div>
<button id="btn">change lines</button>
</body>
</html>
</span>很明显，每次结果直线的颜色是设定的颜色，但是箭头的颜色始终是最后一次设置的直线颜色。