日期:2014-05-16  浏览次数:20691 次

HTML5 Canvas中实现文字链接

HTML5中没有关于链接的API,所以我们只有自己来实现了。

首先,我们来想一下,链接有什么特点。第一个想到的估计就是它能跳转,这是链接最显著的特点,当然这也是废话,要不怎么能叫链接?第二个想到的可能就是文字下方的下划线;第三可能就是当鼠标盘旋在它上空时,鼠标要变成一只手。这些都不难实现,因为跳转可以用window.open()来实现,下划线用html5 canvas API就能实现,更改鼠标的样式用css改就OK。接下来就来讲一下如何实现这些。

本次开发依然用到了开源引擎lufylegend,引擎的一些信息如下:

引擎官方网站:

http://lufylegend.com/lufylegend

引擎API文档:

http://lufylegend.com/lufylegend/api

?

一,LLink类

?

首先我们来创建一个LLink类。代码如下:

?

function LLink(url,text,type,color,font,size){
	var self = this;
	base(self,LSprite,[]);
	
	self.type = "LLink";
	self.url = url;
	self.openType = type || "blank";
	
	self.x = 0;
	self.y = 0;
}

这只是一个很基本的类,有6个参数,分别是打开【链接的地址】,【显示文字】,【链接打开的类型】,【链接颜色】,【链接字体】,【链接尺寸】。由于这个类是继承自LSprite,所以它享有LSprite的一切属性和函数,比如x,y,addChild()等。(注:在lufylegend中base()函数可用于继承,用法可参照API文档。LSprite的用法亦可以参照API文档上的说明)

?

接着我们更改它的type属性,以便和其他类进行区分。然后用url属性保存链接,用openType保存链接打开的类型。如果链接类型没有设置,就默认为"blank",表示在新的标签页打开。至于xxx || yyy的用法以前也讲过,意思是如果xxx的值为null之类的,就将值设置为yyy。

由于是继承自LSprite,所以不能直接显示文字。因此要加入一个属性text,这个属性是一个LTextField(用法见API文档)对象,用于显示文字,具体代码如下:

?

self.text.color = color || "blue";
self.text.font = font || "urf-8";
self.text.size = size || 12;
self.text.x = 0;
self.text.y = 0;
self.text.text = text || url;
self.addChild(self.text);

从上面的代码可以看出,如果不设置链接的显示文字,显示文字就为网址。不设置颜色就自动设置为蓝色

为了方便加一个下划线,我们建立一个名为underLine的LSprite对象,然后通过LSprite实现画线,具体代码如下:

?

?

self.underLine = new LSprite();
self.underLine.graphics.drawRect(0,self.text.color,[0,0,self.text.getWidth(),Math.floor(self.text.size * 0.1)],true,self.text.color);
self.underLine.x = 0;
self.underLine.y = parseInt(self.text.getHeight()) + Math.floor(self.text.size * 0.3);
self.addChild(self.underLine);

由于LTextField类没有鼠标事件,所以我们没法判断链接文字是否被点击,为了实现点击事件,我特地问了lufy,lufy给我提了一个dirty way(虽说是一个dirty way,不过还真的好使 ^_^):在文本上方画一个与文本大小一样的透明矩形,由于LSprite是可以加入事件的,而且矩形是可以响应事件的,所以就给自身加一个鼠标事件,如果点到文字上,相当于点到透明矩形上,然后就触发事件。于是我们加一个LSprite:

?

?

self.back = new LSprite();
self.back.graphics.drawRect(0,"trans