jinwei233/raphaeljs_cross_line.html

## raphaeljs_cross_line.html
<!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,dom,event",function(S,Raphael,D,E){
       var width = 700,height=350;

       var paper = Raphael("J_Paper");

       /**
        * 获取point点的十字
        * @param {point}
        * @param {leftTop} 十字所在容器的左上角坐标
        * @param {width} 十字所在容器的宽度
        * @param {height} 十字所在容器的高度
        * */
       function getCrossPath(point,leftTop,width,height){
         var p = [];
         p.push('M',leftTop[0],point[1],
                "L",leftTop[0]+width,point[1]);

         p.push('M',point[0],leftTop[1],
                "L",point[0],height - leftTop[1]);

         return p.join(',');
       }

       function getOffset(e){
		var target = e.currentTarget // 当前触发的目标对象
		if (e.offsetX) {
          return {
			offsetX: e.offsetX,
			offsetY: e.offsetY
          }
		}else{
          var offset = D.offset(target);
          return {
			offsetX: (e.offsetX || e.clientX - offset.left),
			offsetY: (e.offsetY || e.clientY - offset.top)
          }
        }
       }

       // event listeners
       // 十字
       var crosspath;

       // 进入，显示十字
       E.on("#J_Paper","mouseenter",function(e){
         if(crosspath){
           crosspath.show();
         }
       });

       // 离开，隐藏十字
       E.on("#J_Paper","mouseleave",function(e){
         if(crosspath){
           crosspath.hide();
         }
       });
       // 移动，重绘十字
       E.on("#J_Paper","mousemove",function(e){
         var offset = getOffset(e);
         var pstr = getCrossPath([offset.offsetX,offset.offsetY],[0,0],width,height);
         if(crosspath){
           crosspath.attr("path",pstr);
         }else{
           crosspath = paper.path(pstr).attr({'stroke-width':0.5});
         }
       });

     });

    </script>
  </body>
</html>
	<!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,dom,event",function(S,Raphael,D,E){
	var width = 700,height=350;

	var paper = Raphael("J_Paper");

	/**
	* 获取point点的十字
	* @param {point}
	* @param {leftTop} 十字所在容器的左上角坐标
	* @param {width} 十字所在容器的宽度
	* @param {height} 十字所在容器的高度
	* */
	function getCrossPath(point,leftTop,width,height){
	var p = [];
	p.push('M',leftTop[0],point[1],
	"L",leftTop[0]+width,point[1]);

	p.push('M',point[0],leftTop[1],
	"L",point[0],height - leftTop[1]);

	return p.join(',');
	}

	function getOffset(e){
	var target = e.currentTarget // 当前触发的目标对象
	if (e.offsetX) {
	return {
	offsetX: e.offsetX,
	offsetY: e.offsetY
	}
	}else{
	var offset = D.offset(target);
	return {
	offsetX: (e.offsetX \|\| e.clientX - offset.left),
	offsetY: (e.offsetY \|\| e.clientY - offset.top)
	}
	}
	}

	// event listeners
	// 十字
	var crosspath;

	// 进入，显示十字
	E.on("#J_Paper","mouseenter",function(e){
	if(crosspath){
	crosspath.show();
	}
	});

	// 离开，隐藏十字
	E.on("#J_Paper","mouseleave",function(e){
	if(crosspath){
	crosspath.hide();
	}
	});
	// 移动，重绘十字
	E.on("#J_Paper","mousemove",function(e){
	var offset = getOffset(e);
	var pstr = getCrossPath([offset.offsetX,offset.offsetY],[0,0],width,height);
	if(crosspath){
	crosspath.attr("path",pstr);
	}else{
	crosspath = paper.path(pstr).attr({'stroke-width':0.5});
	}
	});

	});

	</script>
	</body>
	</html>