CreateJs教程4章:easeljs怎么创建文字
CreateJs教程: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()); };
生成多个文字
下面的代码生成多个文字:
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); }
- links数组中是要显示的6个文字
- new TextLink表示生成文字,文字生成后,设置其位置
- link.addEventListener表示监听文字的点击事件,文字被点击后,会调用handleClick函数
- link.cursor = "pointer"表示鼠标移动到文字上,显示手形