Raphael之arrow-end属性简析

最新推荐文章于 2022-08-17 22:15:27 发布

Jinx_Q

最新推荐文章于 2022-08-17 22:15:27 发布

阅读量2.6k

点赞数

分类专栏： raphael.js Raphael 文章标签： raphael

知识本就需要传播，如果你需要请自行转走。

本文链接：https://blog.csdn.net/medivhq/article/details/37053295

版权

raphael.js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Raphael

13 篇文章 7 订阅

订阅专栏

近日发现，有些时候现成的方法需要仔细琢磨才可以知道它适用的环境。本来想偷懒不去自己写方法绘制直线末端的箭头，后来发现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>

很明显，每次结果直线的颜色是设定的颜色，但是箭头的颜色始终是最后一次设置的直线颜色。