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 && xtext.y && ytext.x && xtext.y-text.fontSize/2 && ytext.x && xtext.y-text.fontSize && y

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

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