function polydraw(d,pntx,pnty) { if(pntx.length!=pnty.length) { alert("坐标点信息有误,请重新输入!"); return ; } var xmn = Math.min.apply(null,pntx); var ymn = Math.min.apply(null,pnty); var poly = document.getElementById(d);
if(poly.getContext){ var ctx = poly.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "blue"; var x0; var y0; for (var i = 0; i <= pntx.length;i++) { var x=pntx[i]-xmn; var y=pnty[i]-ymn; if(0==i) { x0=x; y0=y; ctx.moveTo(x,y); } else if (pntx.length==i) { ctx.lineTo(x0,y0); } else { ctx.lineTo(x,y); }
if(null==pnt) { alert("请输入有效数据!"); return ; } var sz = pnt[0]; var result = pnt.slice(1,pnt.length); for (var i = 0; i < sz; i++) { var index = 0; index = result.indexOf('-1'); var temp=result.slice(0,index); polypnt[i]=temp; polypntx[i]=new Array(); polypnty[i]=new Array(); for (var j = 0; j < polypnt[i].length/2; j++) { polypntx[i][j]=polypnt[i][j*2]; polypnty[i][j]=polypnt[i][j*2+1]; }; var xmx = Math.max.apply(null,polypntx[i]); var xmn = Math.min.apply(null,polypntx[i]); var ymx = Math.max.apply(null,polypnty[i]); var ymn = Math.min.apply(null,polypnty[i]); var w = xmx-xmn; var h = ymx-ymn; var newCnvs= document.createElement('canvas');
var tit="pnt_"+i; newCnvs.setAttribute("id",tit); // newCnvs.setAttribute("width",w); newCnvs.setAttribute("height",h); newCnvs.width=w; // newCnvs.style.backgroundColor="#00ff00"; newCnvs.style.border="1px solid red"; newCnvs.style.position="absolute"; newCnvs.style.float="left"; newCnvs.style.marginTop =ymn+"px"; newCnvs.style.marginLeft =xmn+"px"; newCnvs.style.position="absolute"; // newCnvs.style.z-index=i+1; document.getElementById('wiscan').appendChild(newCnvs); eval("pnt_"+i+"=tit;"); (function(id, x, y){polydraw(id, x, y);})(tit,polypntx[i],polypnty[i]); var ctx=newCnvs.getContext("2d"); ctx.fillStyle = 'rgba(225,225,225,0.8)'; ctx.fill(); var pntt=[{'x':'20','y':'20'},{'x':'50','y':'20'},{'x':'50','y':'50'},{'x':'20','y':'50'}]; var mPos={}; newCnvs.onmousemove = function(event){ var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var xx = e.pageX || e.clientX + scrollX; var yy = e.pageY || e.clientY + scrollY; mPos.x=xx-newCnvs.offsetLeft; mPos.y=yy-newCnvs.offsetTop; if ('in'==isInPolygon(mPos ,pntt)){ //alert("aa"); ctx.clearRect(0,0,newCnvs.width,newCnvs.height); ctx.fillStyle = 'rgba(225,0,225,0.5)'; ctx.fill(); } else { ctx.fillStyle = 'rgba(225,225,225,0.8)'; ctx.fill(); }; } result = result.slice(index+1,result.length); };
newCnvs.onmouseover(tit,polypntx[i],polypnty[i]);
试一下newCnvs.onmouseover=polydraw(tit,polypntx[i],polypnty[i]);polydraw是画图函数,下面是根据id、坐标点画出图形
return function(){polydraw(id, x, y);}
})(tit,polypntx[i],polypnty[i]);
触发newCnvs.onmouseover的时候,前提就是你的鼠标已经在多边形中了。所以是newCnvs.onmouseover。
假如我有个判断点是不是在多边形中的函数function isIn() ,想当鼠标移到多边形内的时候再显示,这个函数和鼠标移动事件怎么联系?与newCnvs.onmouseover这部分又要怎么结合呢?
var px = p.x,
py = p.y,
sum = 0 for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y if((sx - px) * (px - tx) >= 0 && (sy - py) * (py - ty) >= 0 && (px - sx) * (ty - sy) === (py - sy) * (tx - sx)) {
return 'on'
} var angle = Math.atan2(sy - py, sx - px) - Math.atan2(ty - py, tx - px) if(angle >= Math.PI) {
angle = angle - Math.PI * 2
} else if(angle <= -Math.PI) {
angle = angle + Math.PI * 2
} sum += angle
} return Math.round(sum / Math.PI) === 0 ? 'out' : 'in'
}
newCnvs.onmouseover = function(event){ var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var xx = e.pageX || e.clientX + scrollX;
var yy = e.pageY || e.clientY + scrollY; mPos.x=xx-10;
mPos.y=yy-10; if ('in'==isInPolygon(mPos ,pnt)){
// alert("aa");
//这部分的画图函数要怎么写?也就是下面的画图没有判断在不在多边形内的代码要如何改呢?
//newCnvs.onmouseover=(function(id, x, y){return function(){polydraw(id, x, y);}})(tit,polypntx[i],polypnty[i]);
};
}
function polydraw(d,pntx,pnty)
{
if(pntx.length!=pnty.length)
{
alert("坐标点信息有误,请重新输入!");
return ;
}
var xmn = Math.min.apply(null,pntx);
var ymn = Math.min.apply(null,pnty);
var poly = document.getElementById(d);
if(poly.getContext){
var ctx = poly.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "blue";
var x0;
var y0;
for (var i = 0; i <= pntx.length;i++)
{
var x=pntx[i]-xmn;
var y=pnty[i]-ymn;
if(0==i)
{
x0=x;
y0=y;
ctx.moveTo(x,y);
}
else if (pntx.length==i)
{
ctx.lineTo(x0,y0);
}
else
{
ctx.lineTo(x,y);
}
}
ctx.closePath();
ctx.stroke();
ctx.fill();
}
}var pnt=['3','20','50','20','100','70','100','-1','50','20','100','70','100','200','120','80',
'-1','100','150','120','200','170','200','-1'];function multiCnvs(pnt)
{
if(null==pnt)
{
alert("请输入有效数据!");
return ;
}
var sz = pnt[0];
var result = pnt.slice(1,pnt.length);
for (var i = 0; i < sz; i++)
{
var index = 0;
index = result.indexOf('-1');
var temp=result.slice(0,index);
polypnt[i]=temp;
polypntx[i]=new Array();
polypnty[i]=new Array();
for (var j = 0; j < polypnt[i].length/2; j++)
{
polypntx[i][j]=polypnt[i][j*2];
polypnty[i][j]=polypnt[i][j*2+1]; }; var xmx = Math.max.apply(null,polypntx[i]);
var xmn = Math.min.apply(null,polypntx[i]);
var ymx = Math.max.apply(null,polypnty[i]);
var ymn = Math.min.apply(null,polypnty[i]);
var w = xmx-xmn;
var h = ymx-ymn;
var newCnvs= document.createElement('canvas');
var tit="pnt_"+i;
newCnvs.setAttribute("id",tit);
// newCnvs.setAttribute("width",w);
newCnvs.setAttribute("height",h);
newCnvs.width=w;
// newCnvs.style.backgroundColor="#00ff00";
newCnvs.style.border="1px solid red";
newCnvs.style.position="absolute";
newCnvs.style.float="left";
newCnvs.style.marginTop =ymn+"px";
newCnvs.style.marginLeft =xmn+"px";
newCnvs.style.position="absolute";
// newCnvs.style.z-index=i+1;
document.getElementById('wiscan').appendChild(newCnvs); eval("pnt_"+i+"=tit;");
(function(id, x, y){polydraw(id, x, y);})(tit,polypntx[i],polypnty[i]);
var ctx=newCnvs.getContext("2d");
ctx.fillStyle = 'rgba(225,225,225,0.8)';
ctx.fill();
var pntt=[{'x':'20','y':'20'},{'x':'50','y':'20'},{'x':'50','y':'50'},{'x':'20','y':'50'}];
var mPos={};
newCnvs.onmousemove = function(event){ var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var xx = e.pageX || e.clientX + scrollX;
var yy = e.pageY || e.clientY + scrollY; mPos.x=xx-newCnvs.offsetLeft;
mPos.y=yy-newCnvs.offsetTop; if ('in'==isInPolygon(mPos ,pntt)){
//alert("aa");
ctx.clearRect(0,0,newCnvs.width,newCnvs.height);
ctx.fillStyle = 'rgba(225,0,225,0.5)';
ctx.fill();
}
else
{
ctx.fillStyle = 'rgba(225,225,225,0.8)';
ctx.fill();
};
}
result = result.slice(index+1,result.length);
};
}
上面是完整代码,mPos是获取的鼠标位置,pnt是多边形的顶点坐标,由于isInPolygon中多边形使用的是另外格式的多边形,所以创建了一个pntt的数组。