CreateJs教程4章：easeljs怎么创建文字

CreateJs教程：easeljs怎么创建文字

本课讲解如何用easeljs实现一个链接文本，效果如下：

效果如下：

easeljs链接文字

easeljs链接文字源码解析

这个效果的源码如下，接下来我们详细分析一下该源码，学习完这段源码后，你会对easeljs更为熟悉。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS 案例: 文字链接 Link</title>

	<link href="../_easel-assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_easel-assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_easel-assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>


<script id="editable">
	// define a new TextLink class that extends / subclasses Text, and handles drawing a hit area
	// and implementing a hover color.
	function TextLink(text, font, color, hoverColor) {
		// this super class constructor reference is automatically created by createjs.extends:
		this.Text_constructor(text, font, color);
		this.hoverColor = hoverColor;
		this.hover = false;
		this.hitArea = new createjs.Shape();
		this.textBaseline = "top";

		this.addEventListener("rollover", this);
		this.addEventListener("rollout", this);
	}
	createjs.extend(TextLink, createjs.Text);

	// use the same approach with draw:
	TextLink.prototype.draw = function (ctx, ignoreCache) {
		// save default color, and overwrite it with the hover color if appropriate:
		var color = this.color;
		if (this.hover) {
			this.color = this.hoverColor;
		}

		// call Text's drawing method to do the real work of drawing to the canvas:
		// this super class method reference is automatically created by createjs.extends for methods overridden in the subclass:
		this.Text_draw(ctx, ignoreCache);

		// restore the default color value:
		this.color = color;

		// update hit area so the full text area is clickable, not just the characters:
		this.hitArea.graphics.clear().beginFill("#FFF").drawRect(0, 0, this.getMeasuredWidth(), this.getMeasuredHeight());
	};

	// set up the handlers for mouseover / out:
	TextLink.prototype.handleEvent = function (evt) {
		this.hover = (evt.type == "rollover");
	};

	// set up the inheritance relationship: TextLink extends Text.
	createjs.promote(TextLink, "Text");
</script>

<script>
	var canvas;
	var stage;

	function init() {
		//find canvas and load images, wait for last image to load
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		// we need to enable mouseover events for rollover/out and cursor to work:
		stage.enableMouseOver(20);

		// Create some TextLinks:
		var links = ["yellow", "blue", "green", "red", "purple", "orange"];
		for (var i = 0; i < links.length; i++) {
			var link = new TextLink(links[i] + " link!", "36px Arial", links[i], "#FFF");
			link.x = 100;
			link.y = 50 + i * 50;
			link.addEventListener("click", handleClick);
			link.cursor = "pointer";
			stage.addChild(link);
		}

		createjs.Ticker.addEventListener("tick", stage);
	}

	function handleClick(evt) {
		alert("You clicked on: " + evt.target.text);
	}

</script>
</head>

<body onload="init();">

<header class="EaselJS">
	<h1>Text链接 demo</h1>

	<p>这个例子展示了如何做一个 <code>链接文本</code> 使用 <code>DisplayObject.hitArea</code>, <code>DisplayObject.cursor</code>,
		and <code>rollover</code> / <code>rollout</code> 等对象或事件来实现</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"
			style="background:#111"></canvas>
</div>
</body>
</html>

stage.enableMouseOver(20);

本例是鼠标移动到文字后有hover的效果，传统的html中A标签就可以实现，但是createjs的文字是绘制在canvas上的，canvas是没有鼠标Over的效果的。所以stage模拟了这个效果，需要使用stage.enableMouseOver函数将这个功能打开：

enableMouseOver ( [frequency=20] )

运行例子

此函数启用mouseover and mouseout 和rollover and rollout事件，这些事件独立于html的鼠标事件，仅用于canvas上，由于是模拟实现的，所以比较消耗资源，frequency表示每s钟模拟多少次鼠标事件。

TextLink文本

本课中定义了一个TextLink类，表示链接文本。我们来分析一下这个类：

function TextLink(text, font, color, hoverColor) {
	// this super class constructor reference is automatically created by createjs.extends:
	this.Text_constructor(text, font, color);
	this.hoverColor = hoverColor;
	this.hover = false;
	this.hitArea = new createjs.Shape();
	this.textBaseline = "top";

	this.addEventListener("rollover", this);
	this.addEventListener("rollout", this);
}
createjs.extend(TextLink, createjs.Text);

createjs.Text类是文字类的基类。TextLink通过createjs.extend函数继承了createjs.Text类。
TextLink类的构造函数有4个参数，分别是：text：文字内容，font：字体，color：字体颜色，hoverColor：鼠标移动上去的颜色
Text_constructor是createjs.Text的构造函数
this.addEventListener("rollover", this);指定了当发生rollover事件是，会调用TextLink类的函数

绘制文字函数TextLink.prototype.draw

TextLink.prototype.draw函数是绘制文字的意思,代码如下：

TextLink.prototype.draw = function (ctx, ignoreCache) {
	// 保存默认的颜色，当hover结束后，恢复默认的颜色
	var color = this.color;
	if (this.hover) {
		// 如果鼠标在文字上，那么改为hover颜色
		this.color = this.hoverColor;
	}

	// 调用基类的方法，绘制文字
	this.Text_draw(ctx, ignoreCache);

	// 恢复默认的颜色，下一次绘制的时候，如果鼠标不在文字上，就会使用该颜色
	this.color = color;

	// 更新整个文字区域
	this.hitArea.graphics.clear().beginFill("#FFF").drawRect(0, 0, this.getMeasuredWidth(), this.getMeasuredHeight());
};