Web前端cooltree框架详解3：文本应用

ouyecw

已于 2023-04-14 09:32:02 修改

阅读量80

点赞数

分类专栏： cooltree 文章标签：前端 javascript html 游戏前端框架

于 2023-04-11 15:08:25 首次发布

本文链接：https://blog.csdn.net/ouyecw/article/details/130082544

版权

cooltree 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

cooltree框架详解

一位图文本

1 创建位图字体

我这里使用的是BMFont工具来生成位图字体文件。
在这里插入图片描述

最终生成.fnt与.png文件。

2 加载位图字体

加载字体文件

//新建一个加载器
loader=new Loader();

//添加事件侦听器
loader.addEventListener(Loader.LOAD_COMPLETE,loadComplete);

loader.load(["assets/fonts/SegoePrint.png","assets/fonts/SegoePrint.fnt"]);

解析字体文件

function loadComplete(e)
{
	//资源管理器会自动解析字体文件
	AssetManager.addFiles(e.params);
	
	//手动解析位图字体如下
	const bf=AssetUtil.parseFont(e.params[Loader.getName("assets/fonts/SegoePrint.fnt")]);
	if(bf) FontManager.add(bf);
}

3 使用位图字体

使用BitmapText类创建实例，代码如下

const bt=new BitmapText();
bt.setup("要显示的内容","位图字体名称",文本显示宽度);

二 SVG文本

使用SVGText类创建实例，优势字体清晰，可以无限发大，可以设置描边粗细颜色，可以使用GColor渐变色，代码如下

let c={
	type:0,
	xStart:0, 
	yStart:0, 
	xEnd:0, 
	yEnd:500, 
	offsetlist:[0,0.5,0.95],
	colorList:["#ff8800","#000000","#ff557f"]
}

const color=new GColor(
	c.type,
	c.xStart,
	c.yStart,
	c.xEnd,
	c.yEnd,
	c.offsetlist,
	c.colorList,
	tf1.width,tf1.height);
		
const tf3=new SVGText();
tf3.text=str;
tf3.size=20;
tf3.lineWidth=350;
tf3.color=color;
tf3.lineHeight=1.3;

三 Canvas文本

使用TextField类创建实例，也可以设置描边颜色，可以使用GColor渐变色，代码如下

const tf1=new TextField();
Stage.current.addChild(tf1);

tf1.text="显示文本";
tf1.font='微软雅黑';
tf1.size=20;
tf1.color='#ece50b';
//文本框宽度
tf1.width=360;
//文本框高度
tf1.height=500;
//行间距
tf1.lineHeight=1.3;
//文本宽度
tf1.lineWidth=350;
//字间距
tf1.leading=10;

四输入文本

使用InputText类创建实例，可以支持普通文本显示，也可以单行输入/多行输入，代码如下

/**
* 第一个参数，是不是输入框，true是 false否
* 第二个参数，是不是多行输入框，true是多行 false否单行
* 第三个参数，文本框的tabindex，tab键切换索引
* 第四个参数,是不是密码输入，true是 false否
*/
const tf2=new InputText(false,false,0,false);
Stage.current.addChild(tf2);

tf2.text="显示文本";
tf2.font='微软雅黑';
tf2.size=20;
tf2.color='#ece50b';
//文本框宽度
tf2.width=360;
//文本框高度
tf2.height=500;
//行间距
tf2.lineHeight=1.3;
//文本宽度
tf2.lineWidth=350;
//字间距
tf2.leading=10;

五快捷创建文本

框架提供了快捷的创建文本方式，自动根据useCanvas选择不同文本框显示内容，代码如下

const tf=Factory.c("tf",{text:"TEST",width:200,lineWidth:200,size:22,x:10,y:10});

cooltree框架的两种渲染模式

DOM渲染模式
Global.useCanvas=false;

Canvas渲染模式
Global.useCanvas=true;

查看演示结果

代码如下

const {GColor,SVGText,BitmapText,Event,InputText,TextField,Global,Stage,LoadingClip,Loader,AssetManager,Factory,StageEvent,StringUtil,MathUtil} = ct

let loadingClip,stage,loader,bt,color,_is_init=false;

window.onload = function()
{
	if(_is_init) return;
	_is_init=true;

	/**
	 * 显示模式 true为canvas显示 false为DOM显示（默认为true）
	 */
	Global.useCanvas=false;
	
	/**
	 * 初始化场景
	 */
	stage=new Stage();
	
	/**
	 * 设置父级容器（默认自动添加到body里面新的节点）
	 */
	stage.div=document.getElementById("stage");
	
	/**
	 * 初始化场景的宽度和高度
	 */
	stage.initCanvas(window.innerWidth,window.innerHeight);
	
	document.body.style.backgroundColor="#505050"
	
	//新建一个加载组件
	loadingClip=new LoadingClip("assets/img/buffer.png");
	
	//移动到舞台中间位置
	loadingClip.moveTo(stage.stageWidth*0.5,stage.stageHeight*0.5);
	
	//添加到舞台上
	stage.addChild(loadingClip);

	//新建一个加载器
	loader=new Loader();
	
	//添加事件侦听器
	loader.addEventListener(Loader.LOAD_COMPLETE,loadComplete);
	
	loader.load(["assets/fonts/SegoePrint.png","assets/fonts/SegoePrint.fnt"]);
}

function loadComplete(e)
{
	AssetManager.addFiles(e.params);
	//清除事件侦听器
	e.target.removeEventListener(Loader.LOAD_COMPLETE);
	
	//清空舞台 （Stage.current为获取当前舞台的静态属性）
	if(loadingClip){
		loadingClip.removeFromParent(true);
		loadingClip=null;
	}
	
	const str='8988Often you’re not interested much in the function implementation, rather you just want to call it. That’s why sometimes it makes sense to invoke the function before defining it.能够以 120 fps 的帧率，显示高达 4K 分辨率的游戏画面，同时输入延迟低至仅 7.2 毫秒。Z8H 能够显示细节丰富的 8K 分辨率图像，同时也能以更为平滑顺畅的 120fps 帧率显示 4K 分辨率的游戏画面（支持规格因 PS5 游戏而异)。两个系列电视均能为下一代游戏主机 PS5 提供流畅的游戏体验。';//
	
	const tf1=new TextField();
	Stage.current.addChild(tf1);
	
	const tf2=new InputText();
	Stage.current.addChild(tf2);
	
	tf1.text=tf2.text=str;
	tf1.font=tf2.font='微软雅黑';
	tf1.size=tf2.size=20;
	tf2.color='#ece50b';
	
	tf1.y=25;
	tf2.y=25;
	tf1.width=tf2.width=360;
	tf1.height=tf2.height=500;
	tf1.lineHeight=tf2.lineHeight=1.3;
	
	tf1.lineWidth=tf2.lineWidth=350;
	tf1.leading=tf2.leading=10;
	
	tf1.x=20;
	tf2.x=390;
	
	let c={
		type:0,
		xStart:0, 
		yStart:0, 
		xEnd:0, 
		yEnd:500, 
		offsetlist:[0,0.5,0.95],
		colorList:["#ff8800","#000000","#ff557f"]
	}
	
	color=new GColor(
		c.type,
		c.xStart,
		c.yStart,
		c.xEnd,
		c.yEnd,
		c.offsetlist,
		c.colorList,
		tf1.width,tf1.height);
	
	bt=new BitmapText();
	stage.addChild(bt);
	bt.setup("Freelancer Community is the place for you to hang out between projects, learn top tips to improve your career, share your freelancing experiences, and","SegoePrint",360,"#000000");
	bt.moveTo(740,25);
	
	const tf3=new SVGText();
	Stage.current.addChild(tf3);
	tf3.text=str;
	tf3.size=20;
	tf3.lineWidth=350;
	tf3.color=color;
	tf3.lineHeight=1.3;
	tf3.moveTo(740,230);
	
	tf1.color=color.clone();
}

window.onresize=function()
{
	if(!_is_init ) return;
	Global.reszie(window.innerWidth,window.innerHeight);
    Stage.current.dispatchEvent(new Event(StageEvent.RESIZE));
	if(loadingClip && loadingClip.parent) loadingClip.moveTo(window.innerWidth*0.5,window.innerHeight*0.5);
}