jinwei233/raphael_grid_hover_effect.html

## raphael_grid_hover_effect.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){
       //==================== tools ====================
       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)
          }
        }
       }
       //==================== tools ====================

       var paper = Raphael("J_Paper",700,350);

       var GRID_LEFT_TOP;     // 网格左上角
       var GRID_RIGHT_BOTTOM; // 网格右下角
       var GRID_COL_STEP;     // 列步长
       var GRID_ROW_STEP;     // 行步长
       var GRID_WIDTH;
       var GRID_HEIGHT;

       /**
        * 绘制 m x n 网格 用于非标准坐标标注
        * 要求lefTop 确实在左上，rightBottom确实在右下
        * */
       function gridPath(leftTop,rightBottom,m,n){
         var x1 = leftTop[0],     y1 = leftTop[1]
           , x2 = rightBottom[0], y2 = rightBottom[1]

         GRID_WIDTH = x2 - x1;
         GRID_HEIGHT = y2 - y1;

         var colstep = ((x2 - x1) / n),
             rowstep = ((y2 - y1) / m);

         // global setting
         GRID_LEFT_TOP = leftTop;
         GRID_RIGHT_BOTTOM = rightBottom;
         GRID_COL_STEP = colstep;
         GRID_ROW_STEP = rowstep;

         var pts = [];
         if(colstep){
           for(var i=0;i<=n;i++){
             pts.push(
               "M",
               x1+i*colstep,
               y1,
               "L",
               x1+i*colstep,
               y2
             );
           }
         }

         if(rowstep){
           for(var j=0;j<=m;j++){
             pts.push(
               "M",
               x1,
               y1+j*rowstep,
               "L",
               x2,
               y1+j*rowstep
             );
           }
         }
         return pts.join(',');
       }

       /**
        * 找出点哪个矩形区域内
        * @param point{Array} 点
        * @param yaxis{Bool} 是否为yaxis矩形区域
        * */
       function inRectange(point,yaxis){
         if(!GRID_LEFT_TOP)
           return;
         var x = point[0], y = point[1];

         var x0 = GRID_LEFT_TOP[0],
             y0 = GRID_LEFT_TOP[1],
             x1,
             y1,
             x2 = GRID_RIGHT_BOTTOM[0],
             y2 = GRID_RIGHT_BOTTOM[1],

         x1 = x - x0;
         y1 = y - y0;

         var ret ; // point对应的矩形区域的坐标
         var xx , yy;
         if(yaxis){
           xx = x0;
           yy = y0 + Math.floor(y1 / GRID_ROW_STEP) * GRID_ROW_STEP;
         }else{
           xx = x0 + Math.floor(x1 / GRID_COL_STEP) * GRID_COL_STEP ;
           yy = y0;
         }
         if(
           xx >= x0                 &&
           xx <= x2 - GRID_COL_STEP &&
           yy >= y0                 &&
           yy <= y2 - GRID_ROW_STEP
         ){
           ret = [xx,yy];
         }
         return ret;
       }

       /**
        * 获取point对应的矩形
        * @param paper {Object} Raphael paper
        * @param point {Array} 点
        * @param yaxis {Bool} 获取横向的矩形区域
        * */
       var hilightedRectangle; // 高亮矩形复用
       function getHilightRectangle(paper,point,yaxis){
         var pt = inRectange(point);
         if(!pt)
           return;
         if(!hilightedRectangle){
           if(yaxis){
             hilightedRectangle = paper.rect(pt[0],pt[1],GRID_WIDTH,GRID_ROW_STEP);
           }else{
             hilightedRectangle = paper.rect(pt[0],pt[1],GRID_COL_STEP,GRID_HEIGHT);
           }
         }else{
           if(yaxis){
             hilightedRectangle.attr({
               x:pt[0],
               y:pt[1],
               width:GRID_WIDTH,
               height:GRID_ROW_STEP
             });
           }else{
             hilightedRectangle.attr({
               x:pt[0],
               y:pt[1],
               width:GRID_COL_STEP,
               height:GRID_HEIGHT
             });
           }
         }
         return hilightedRectangle;
       }

       var pstr = gridPath([10,10],[210,210],10,10);
       paper.path(pstr);

       var $paper = D.get('#J_Paper');

       // 鼠标移动的回调函数
       var handle = function(e){
         var o = getOffset(e);
         var pt = [o.offsetX,o.offsetY];

         var rec = getHilightRectangle(paper,pt);
         rec && rec.attr({fill:"#ccc",opacity:.6});
       };

       // 进入展示高亮矩形
       E.on($paper,"mouseenter",function(){
         if(hilightedRectangle){
           hilightedRectangle.show();
         }
       });
       // 离开隐藏高亮矩形
       E.on($paper,"mouseleave",function(){
         if(hilightedRectangle){
           hilightedRectangle.hide();
         }
       });
       // mousemove移动高亮矩形
       E.on($paper,"mousemove",handle)
     });
    </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){
	//==================== tools ====================
	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)
	}
	}
	}
	//==================== tools ====================

	var paper = Raphael("J_Paper",700,350);

	var GRID_LEFT_TOP; // 网格左上角
	var GRID_RIGHT_BOTTOM; // 网格右下角
	var GRID_COL_STEP; // 列步长
	var GRID_ROW_STEP; // 行步长
	var GRID_WIDTH;
	var GRID_HEIGHT;

	/**
	* 绘制 m x n 网格用于非标准坐标标注
	* 要求lefTop 确实在左上，rightBottom确实在右下
	* */
	function gridPath(leftTop,rightBottom,m,n){
	var x1 = leftTop[0], y1 = leftTop[1]
	, x2 = rightBottom[0], y2 = rightBottom[1]

	GRID_WIDTH = x2 - x1;
	GRID_HEIGHT = y2 - y1;

	var colstep = ((x2 - x1) / n),
	rowstep = ((y2 - y1) / m);

	// global setting
	GRID_LEFT_TOP = leftTop;
	GRID_RIGHT_BOTTOM = rightBottom;
	GRID_COL_STEP = colstep;
	GRID_ROW_STEP = rowstep;

	var pts = [];
	if(colstep){
	for(var i=0;i<=n;i++){
	pts.push(
	"M",
	x1+i*colstep,
	y1,
	"L",
	x1+i*colstep,
	y2
	);
	}
	}

	if(rowstep){
	for(var j=0;j<=m;j++){
	pts.push(
	"M",
	x1,
	y1+j*rowstep,
	"L",
	x2,
	y1+j*rowstep
	);
	}
	}
	return pts.join(',');
	}

	/**
	* 找出点哪个矩形区域内
	* @param point{Array} 点
	* @param yaxis{Bool} 是否为yaxis矩形区域
	* */
	function inRectange(point,yaxis){
	if(!GRID_LEFT_TOP)
	return;
	var x = point[0], y = point[1];

	var x0 = GRID_LEFT_TOP[0],
	y0 = GRID_LEFT_TOP[1],
	x1,
	y1,
	x2 = GRID_RIGHT_BOTTOM[0],
	y2 = GRID_RIGHT_BOTTOM[1],

	x1 = x - x0;
	y1 = y - y0;

	var ret ; // point对应的矩形区域的坐标
	var xx , yy;
	if(yaxis){
	xx = x0;
	yy = y0 + Math.floor(y1 / GRID_ROW_STEP) * GRID_ROW_STEP;
	}else{
	xx = x0 + Math.floor(x1 / GRID_COL_STEP) * GRID_COL_STEP ;
	yy = y0;
	}
	if(
	xx >= x0 &&
	xx <= x2 - GRID_COL_STEP &&
	yy >= y0 &&
	yy <= y2 - GRID_ROW_STEP
	){
	ret = [xx,yy];
	}
	return ret;
	}

	/**
	* 获取point对应的矩形
	* @param paper {Object} Raphael paper
	* @param point {Array} 点
	* @param yaxis {Bool} 获取横向的矩形区域
	* */
	var hilightedRectangle; // 高亮矩形复用
	function getHilightRectangle(paper,point,yaxis){
	var pt = inRectange(point);
	if(!pt)
	return;
	if(!hilightedRectangle){
	if(yaxis){
	hilightedRectangle = paper.rect(pt[0],pt[1],GRID_WIDTH,GRID_ROW_STEP);
	}else{
	hilightedRectangle = paper.rect(pt[0],pt[1],GRID_COL_STEP,GRID_HEIGHT);
	}
	}else{
	if(yaxis){
	hilightedRectangle.attr({
	x:pt[0],
	y:pt[1],
	width:GRID_WIDTH,
	height:GRID_ROW_STEP
	});
	}else{
	hilightedRectangle.attr({
	x:pt[0],
	y:pt[1],
	width:GRID_COL_STEP,
	height:GRID_HEIGHT
	});
	}
	}
	return hilightedRectangle;
	}

	var pstr = gridPath([10,10],[210,210],10,10);
	paper.path(pstr);

	var $paper = D.get('#J_Paper');

	// 鼠标移动的回调函数
	var handle = function(e){
	var o = getOffset(e);
	var pt = [o.offsetX,o.offsetY];

	var rec = getHilightRectangle(paper,pt);
	rec && rec.attr({fill:"#ccc",opacity:.6});
	};

	// 进入展示高亮矩形
	E.on($paper,"mouseenter",function(){
	if(hilightedRectangle){
	hilightedRectangle.show();
	}
	});
	// 离开隐藏高亮矩形
	E.on($paper,"mouseleave",function(){
	if(hilightedRectangle){
	hilightedRectangle.hide();
	}
	});
	// mousemove移动高亮矩形
	E.on($paper,"mousemove",handle)
	});
	</script>
	</body>
	</html>