HTML5 Canvas中实现文字链接

文章源自:http://blog.csdn.net/yorhomwang/article/details/9625319

 

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,"transparent",[0,0,self.text.getWidth(),self.text.getHeight()],true,"transparent");
self.addChild(self.back);

 然后加入鼠标事件：

self.addEventListener(LMouseEvent.MOUSE_DOWN,self._jump);

 到现在为止，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;
	
	self.text = new LTextField();
	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);
	
	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);
	
	self.back = new LSprite();
	self.back.graphics.drawRect(0,"transparent",[0,0,self.text.getWidth(),self.text.getHeight()],true,"transparent");
	self.addChild(self.back);
	
	self.addEventListener(LMouseEvent.MOUSE_DOWN,self._jump);
}

 

二，跳转网页

在上面的代码中我们已经实现了下划线，和链接文字，并且加入了鼠标事件。

接下来要实现一下如何跳转网页。前面我们说了，跳转网页的的话可以用到window.open()，这个函数的用法如下,语法：

window.open(URL,name,features,replace)

参数 描述

URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

（以上内容来自w3school，网址：http://www.w3school.com.cn/htmldom/met_win_open.asp）

有了以上的介绍，我想实现跳转已经是很简单的了。

由于我们的鼠标事件触发的是_jump成员函数，所以加入_jump方法，代码如下：

LLink.prototype._jump = function(event,self){
	var openType = "_" + self.openType;
	window.open(self.url, openType);
}

三，更改鼠标样式

首先，为了了解css如何更改鼠标样式，我先介绍一下css里的cursor属性：

实例

一些不同的光标：

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

 可能的值

值 描述

url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

有了这些就好办多了，lufylegend中有MOUSE_MOVE事件，它是用来判断鼠标是否盘旋在某对象上。用这个事件很显然能做出这个效果， 但是出现了一个问题，那就是不能判断鼠标是否在对象之外，换句话说，就是不能把鼠标转换为正常样式。因此，我们就只能自己来做这个事件了。

由于我初略得研究过lufylegend这个引擎，所以了解了LEvent这个类。因此我先用它给整个canvas加一个鼠标移动事件，在LLink构造器中加入代码如下：

LEvent.addEventListener(LGlobal.object,LMouseEvent.MOUSE_MOVE,LStage._addLinkEvent);

 由于我们不能直接给对象加入事件，因此取不出对象当前的位置，从而无法判断鼠标是否盘旋在某对象上面。为了解决这个问题，我建立一个列表，把所有的LLink对象都加进去。代码如下：

LStage._linkList = new Array();

 给列表添加对象的代码要写到LLink构造器中，如下：

LStage._linkList.push(self);

 因为我们加的canvas事件触发LStage._addLinkEvent这个函数，所以把LStage._addLinkEvent代码展示如下：

LStage._addLinkEvent = function(event){ 
	for(var i in LStage._linkList){
		o = LStage._linkList[i];
		if(event.offsetX < parseInt(o.x) + parseInt(o.getWidth()) && event.offsetY < parseInt(o.y) + parseInt(o.getHeight()) + parseInt(Math.floor(o.text.size * 0.4)) && event.offsetX > parseInt(o.x) && event.offsetY > parseInt(o.y)){
			document.body.style.cursor = "pointer";
			return;
		}else{
			document.body.style.cursor = "default";
		}
	}
}

 这个代码也不难理解，就是遍历一下上面定义的列表，判断鼠标的位置是否在遍历到的对象上，如果在上面，就更改鼠标样式为一只手，如果不在就改回来。

但是给canvas加事件应该只用加一次，所以我们判断一下是否已经加入，如果是就不再加了，不是的话就继续，说白了就是个判断，因此加一个属性：

LStage._isAddLinkEvent = false;

 然后给加事件的地方加一个判断就行了，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;
	
	self.text = new LTextField();
	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);
	
	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);
	
	self.back = new LSprite();
	self.back.graphics.drawRect(0,"transparent",[0,0,self.text.getWidth(),self.text.getHeight()],true,"transparent");
	self.addChild(self.back);
	
	LStage._linkList.push(self);
	
	self.addEventListener(LMouseEvent.MOUSE_DOWN,self._jump);
	
	if(LStage._isAddLinkEvent == false){
		LEvent.addEventListener(LGlobal.object,LMouseEvent.MOUSE_MOVE,LStage._addLinkEvent);
		LStage._isAddLinkEvent = true;
	}
}

 本次开发所有的代码如下，要用的朋友尽管拿去用，代码也不多，完全免费：

/**
*LLink.js
*/
LStage._linkList = new Array();
LStage._isAddLinkEvent = false;
LStage._addLinkEvent = function(event){
	for(var i in LStage._linkList){
		o = LStage._linkList[i];
		if(event.offsetX < parseInt(o.x) + parseInt(o.getWidth()) && event.offsetY < parseInt(o.y) + parseInt(o.getHeight()) + parseInt(Math.floor(o.text.size * 0.4)) && event.offsetX > parseInt(o.x) && event.offsetY > parseInt(o.y)){
			document.body.style.cursor = "pointer";
			return;
		}else{
			document.body.style.cursor = "default";
		}
	}
}
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;
	
	self.text = new LTextField();
	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);
	
	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);
	
	self.back = new LSprite();
	self.back.graphics.drawRect(0,"transparent",[0,0,self.text.getWidth(),self.text.getHeight()],true,"transparent");
	self.addChild(self.back);
	
	LStage._linkList.push(self);
	
	self.addEventListener(LMouseEvent.MOUSE_DOWN,self._jump);
	
	if(LStage._isAddLinkEvent == false){
		LEvent.addEventListener(LGlobal.object,LMouseEvent.MOUSE_MOVE,LStage._addLinkEvent);
		LStage._isAddLinkEvent = true;
	}
}
LLink.prototype._jump = function(event,self){
	var openType = "_" + self.openType;
	window.open(self.url, openType);
}

 要写的时候就直接这样写：

var link = new LLink("http://lufylegend.com","链接测试");
addChild(link);

 最后奉上演示地址：http://www.cnblogs.com/yorhom/articles/3227576.html
截图如下：