动态生成canvas后为其添加onmouseover事件出问题

Question

本帖最后由 sunuechao 于 2014-10-30 16:09:16 编辑

Answer 1

下面的两句是什么意思，polydraw是什么？                newCnvs.onmouseover=polydraw;
                newCnvs.onmouseover(tit,polypntx[i],polypnty[i]);

Answer 2

newCnvs.onmouseover=function(e){polydraw(x,y,z,......e)};

Answer 3

polydraw是画图函数，下面是根据id、坐标点画出图形

Answer 4

这里的e是event？怎么用呢，还望指点下

Answer 5

你是想newCnvs.onmouseover(tit,polypntx[i],polypnty[i]);给函数传参数执行吗？onmouseover是事件，能这样给函数传参数的吗？
试一下newCnvs.onmouseover=polydraw(tit,polypntx[i],polypnty[i]);polydraw是画图函数，下面是根据id、坐标点画出图形

Answer 6

Quote: 引用 5 楼 save4me 的回复:

你是想newCnvs.onmouseover(tit,polypntx[i],polypnty[i]);给函数传参数执行吗？onmouseover是事件，能这样给函数传参数的吗？
试一下newCnvs.onmouseover=polydraw(tit,polypntx[i],polypnty[i]);改了之后不响应鼠标移进移出的事件了，咋个情况？

Answer 7

polydraw是画图函数，下面是根据id、坐标点画出图形改了之后不响应鼠标移进移出的事件了，咋个情况？

Answer 8

不好意思，刚才那样改是把一个值赋给mouseover事件，所以不会执行，应该是需要一个函数，改成newCnvs.onmouseover=(function(id, x, y){
    return function(){polydraw(id, x, y);}
})(tit,polypntx[i],polypnty[i]);

Answer 9

另外，假如我有个判断点是不是在多边形中的函数function isIn(point, polygon) //point为鼠标坐标，polygon为某个画布中事先确定的多边形顶点坐标，想当鼠标移到多边形内的时候再显示，这个函数和鼠标移动事件怎么联系，用document.body.onmousemove？与newCnvs.onmouseover这部分又要怎么结合呢？

Answer 10

事件响应不一定要这么写，比如如果不需要参数，你原先写的newCnvs.onmouseover=polydraw应该就可以。
触发newCnvs.onmouseover的时候，前提就是你的鼠标已经在多边形中了。所以是newCnvs.onmouseover。

Answer 11

假如我有个判断点是不是在多边形中的函数function isIn() ，想当鼠标移到多边形内的时候再显示，这个函数和鼠标移动事件怎么联系？与newCnvs.onmouseover这部分又要怎么结合呢？

Answer 12

不知道你的function isIn()函数是怎么样的，我使用了HTML DOM getContext() 方法getContext() 方法返回一个用于在画布上绘图的环境，然后在onmouseover事件中通过HTML5 canvas isPointInPath() 方法判断鼠标是否在图形内，并将鼠标位置输出，请点击查看在线演示，你可以把鼠标位置输出改成你要显示的函数
假如我有个判断点是不是在多边形中的函数function isIn() ，想当鼠标移到多边形内的时候再显示，这个函数和鼠标移动事件怎么联系？与newCnvs.onmouseover这部分又要怎么结合呢？

Answer 13

我又试了一下，你给出的例子确实可以实现，但是为什么把move换成over就不行了呢？另外，还是没有真正理解这个函数嵌套是怎么使用，下面的代码要怎么改才行？function isInPolygon(p, poly) {
    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]);
};
}

Answer 14

先不管其他的，复制了你的代码，按F12打开开发者工具，在控制台就能看到有两个变量没有定义：mPos和pnt。你这两个变量是怎么定义的？

Answer 15

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的数组。

Answer 16

mousemove可以而mouseover不行的原因是你的mouseover绑定的是canvas，鼠标进入canvas的边界的时候就会触发这个事件，而且只触发一次，除非鼠标移出后再移进，但是始终是在canvas的边界触发。所以当你的鼠标在移到canvas里面的多边形的时候，什么也不会触发。而mousemove会在鼠标移动的过程中始终监视鼠标的变化，并触发相应的事件。不知道我有没有说明白。

Answer 17

嗯，这两者的区别我也看了下，大致道理明白，个人理解如果触发了move，肯定也触发了over，只有在画布上才会有move的事件，而这个之前肯定经过了over，这里我换了一个思路，改用move代替了over和out，不过还是没有完全弄好。谢谢save4me的耐心指导，不知道有问题是否可以给你发站内信？这个帖子也有段时间了，现在结贴，还望以后多指导。