Canvas 文字区域判断代码

自从Canvas有了fillText()和strokeText()这两个方法后,在Canvas显示文字再也不用繁琐的调用外部元素了.

这看起来的确很棒,但如何把事件绑定在文字上呢?

要知道在Canvas上绘制的内容最后就是一个图片,并没有什么对象的概念.

所以无法利用内置的方法来解决事件相应的问题.

比如我们点一个”Play”的文字,这个文字就像Flash中的按钮元件一样执行Script代码了.

现在有一个不算太方便的方法来解决这个问题:手动计算文字所占的区域.

那么怎么计算呢?这与文字相关的baseline属性和字体有关.

如果baseline为top,则文字显示在坐标的下方.

如果baseline为bottom,则文字显示在坐标的上方.

如果baseline为middle,则文字显示居中于坐标.

还是用图片来说明吧:

baseline.png

判断区域代码如下:

x=event.clientX-event.target.offsetLeft; y=event.clientY-event.target.offsetTop; //Top if((x>text.x && x<text.x+text.width) && y>text.y && y<text.y+text.fontSize){ alert("In"); }else{ alert("Out"); } //Middle if((x>text.x && x<text.x+text.width) && y>text.y-text.fontSize/2 && y<text.y+text.fontSize/2){ alert("In"); }else{ alert("Out"); } //Bottom if((x>text.x && x<text.x+text.width) && y>text.y-text.fontSize && y<text.y){ alert("In"); }else{ alert("Out"); }

但是很明显,这里还存在一个问题,即字体位于基线下方的部分无法被列入响应区域,这方面还有待解决.

代码中的x,y,width,fontSize均由用户自行设定(width可由ctx.measureText()方法得到),这里仅仅是一个抽象的概念.