canvas画图事件(2)_H5之家 - 中国HTML5教程资源分享第一站

从上面这段代码可以看到，isPointInPath方法仅能识别当前上下文环境里的图形路径，而之前绘制的路径，无法回溯判断。这种问题的解决方法是：当点击事件发生时，重绘所有图形，每绘制一个就使用isPointInPath方法，判断事件坐标是否在该图形覆盖范围内。

循环重绘和事件冒泡

为了实现循环重绘，所以就要将图形的基本参数事先保存下来：

arr = [

{x:10, y:10, width:100, height:100},

{x:110, y:110, width:100, height:100}

];

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

draw();

function draw(){

ctx.clearRech(0, 0, cvs.width, cvs.height);

arr.forEach(function(v){

ctx.beginPath();

ctx.rect(v.x, v.y, v.width, v.height);

ctx.stroke();

});

}

复制代码

面的代码事先将两个矩形的基本参数保存下来，每次调用draw方法，就会循环调用这些基本参数，用于绘制两个矩形。这里还使用了clearRect方法，用于在重绘时清空画布。接下来要做的是增加事件代理，以及在重绘时对每一个上下文环境使用isPointInPath方法：

cvs.addEventListener('click', function(e){

p = getEventPosition(e);

draw(p);

}, false);

复制代码

事件发生时，将事件对象的坐标传给draw方法处理。这里还需要对draw方法做一些小改动：

function draw(p){

var who = [];

ctx.clearRech(0, 0, cvs.width, cvs.height);

arr.forEach(function(v, i){

ctx.beginPath();

ctx.rect(v.x, v.y, v.width, v.height);

ctx.stroke();

if(p && ctx.isPointInPath(p.x, p.y)){

//如果传入了事件坐标，就用isPointInPath判断一下

//如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里

who.push(i);

}

});

//根据数组中的index值，可以到arr数组中找到相应的元素。

return who;

}

复制代码

在上面代码中，点击事件发生时draw方法会执行一次重绘，并在重绘过程中检查每一个图形是否覆盖了事件坐标，如果判断为真，则视为点击了该图形，并将该图形的index值放入数组，最后将数组作为draw方法的返回值。在这种处理机制下，如果Canvas里有N个图形，它们有一部分是重叠的，而点击事件恰巧发生在这个重叠区域上，那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况，数组的最后一个成员处于Canvas最上层，而第一个成员则在最下层，我们可以视为最上层的成员是e.target，而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法，如果真要模拟DOM处理，还要给图形设置父子级关系。

以上就是Canvas事件处理的基本方法。在实际运用时，如何缓存图形参数，如何进行循环重绘，以及如何处理事件冒泡，都还需要根据实际情况花一些心思去处理。另外，click是一个比较好处理的事件，相对麻烦的是mouseover、mouseout和mousemove这些事件，由于鼠标一旦进入Canvas元素，始终发生的都是mousemove事件，所以如果要给某个图形单独设置mouseover或mouseout，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。

canvas画图 事件(2)

canvas画图事件(2)