一个canvas里,分别为其他元素绑定事件

刚学canvas,搜了一些教程,还是不太明白怎么在一个canvas里怎么给img1.jpg,img2.jpg分别添加事件?
如下简单例子:

    var canvas=doc.querySelector('#canvas_wrapper');
    var cvs=canvas.getContext('2d');
    var imgArr=['img1.jpg','img2.jpg']
    var images=[];
    var img=null;
    for(var i=0,len=imgArr.length;i<len;i++){
        img=new Image();
        img.src=imgArr[i];
        images.push(img);
    };
    img.onload=function(){
        cvs.drawImage(images[0],0,0,200,100); //给这个添加事件
        cvs.drawImage(images[1],0,100,200,100); //给这个添加事件
    };

望指点,谢谢了

阅读 7.7k
3 个回答

楼主你说到点子上了,如果图片多的话怎么办?如果不是图片是个矩形,圆形,扇形, 甚至是不规则图形怎么办???

请走进今天的走进科学!

就是把要绘制的元素抽象成对象啦~

比如 function image() {}, function rect() {}...

而这些方法在调用的时候都会储存进一个全局的数组中,是你绘制的所有元素的集合, 集合中包含各自的位置信息, 判断点是否在区域中的信息 , 以及一切你自定义的信息。

遍历这个集合, 依次绘制, 判断点是否在某个对象上, 调用这个对象的isPointerInner方法(对象中的判断点是否在区域内的方法)就可以了。

有点懵比的话看我封装好的一个库, 思路就是上边的思路啦~

https://github.com/PengJiyuan...

用这个库实现的图表

https://github.com/PengJiyuan...

   var canvas=doc.querySelector('#canvas_wrapper');
    var cvs=canvas.getContext('2d');    
    var imgArr=['img1.jpg','img2.jpg']    //图片地址
    var images=[];                        //给将要创建的image对象建个容器
    var img=null;                         //声明img
    for(var i=0,len=imgArr.length;i<len;i++){
        img=new Image();                  //创建image对象
        img.src=imgArr[i];                //给image对象分配地址
        images.push(img);                 //把分配完地址的image对象放到容器里
    };
    img.onload=function(){                //在image加载时触发方法把容器里的image对象放到canvas中
        cvs.drawImage(images[0],0,0,200,100); //给这个添加事件
        cvs.drawImage(images[1],0,100,200,100); //给这个添加事件
    };

已经解决了,古老的方法,判断坐标位置,不过要是图片很多的话,估计就麻烦了,不知道有没有其他方法=。=!

               canvas.addEventListener('click',function(ev){
                    var pos=getPosition(ev);
                    if(pos.x>=0&&pos.x<=200){
                        if(pos.y>=0&&pos.y<=100){
                            console.log('在第一张图上')
                        }else{
                            console.log('在第二张图上');
                        }
                    }
                },false);
                //获取点击时的坐标
                function getPosition(ev){
                        var x, y;
                        if (ev.layerX || ev.layerX == 0){
                            x = ev.layerX;
                            y = ev.layerY;
                        }else if (ev.offsetX || ev.offsetX == 0){
                            x = ev.offsetX;
                            y = ev.offsetY;
                      }
                      return {x: x,y: y};
                }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题