ActionScript
TypeScript
JavaScript

超出文本区域的处理&滚动文本

发布时间:2017-02-16

        我们文本在添加内容的时候免不了超出我们所设置的文本区域,这时候我们要对我们的文本进行处理,不处理的话我们的内容有可能超出我们舞台。

Laya.display.text 中所使用的API 参数:

image.png

hidden:不显示超出文本域的字符。

visible:不进行任何裁切。

scroll:不显示文本域外的字符像素,并且支持scroll接口。

package
{
	import laya.display.Stage;
	import laya.display.Text;
	import laya.utils.Browser;
	import laya.webgl.WebGL;
	
	public class Text_AutoSize
	{
		public function Text_AutoSize()
		{
			// 不支持WebGL时自动切换至Canvas
			Laya.init(550, 400, WebGL);
			setup();
		}

		private function setup():void
		{
                	 var t1:Text = createText();
                   //设置不进行任何裁剪
                   t1.overflow = Text.VISIBLE;
                   t1.pos(10, 10);
                
                   var t2:Text= createText();
                   //设置不显示文本域外的字符像素
                   t2.overflow = Text.SCROLL;
                   t2.pos(10, 110);
                
                   var t3 = createText();
                   //设置不显示超出文本域的字符
                   t3.overflow = Text.HIDDEN;
                   t3.pos(10, 210);
		}
		
		private function createText():Text
		{
					   var txt:Text= new Text();
   
   txt.text = 
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!\n" +
    "Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!";
   
   txt.borderColor = "#FFFF00";
   //设置宽高以后自动裁剪会按照这个区域裁剪
   txt.size(300, 50);
   txt.fontSize = 20;
   txt.color = "#ffffff";
   
   Laya.stage.addChild(txt);
			
			return text;
		}
	}
}

image.png

可以看到3种方法的对文本处理的不同,每种处理都有各自的优缺点,性能比最高的还是hidden。

除了通过对文本区域设置overflow ,还可以通过使用scrollX和scrollY滚动文本视口,通过滚动文本来显示全部的文本内容。

要是想要实现滚动文本需要使用 overflow = Text.SCROLL 使用 Text.HIDDEN的话即时你设置了滚动也没有效果。

package 
{
	import laya.display.Stage;
	import laya.display.Text;
	import laya.events.Event;
	import laya.utils.Browser;
	import laya.utils.Stat;
	import laya.webgl.WebGL;
	
	public class Text_Scroll 
	{
		private var txt:Text;
		private var prevX:Number = 0;
		private var prevY:Number = 0;
		
		public function Text_Scroll() 
		{
			// 不支持WebGL时自动切换至Canvas
			Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
			createText();
		}

		private function createText():void
		{
			txt = new Text();
			txt.overflow = Text.SCROLL;
			txt.text = 
				"Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!\n" +
				"Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!\n" +
				"Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!\n" +
				"Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!\n" +
				"Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!\n" +
				"Layabox是HTML5引擎技术提供商与优秀的游戏发行商,面向AS/JS/TS开发者提供HTML5开发技术方案!";
			
			txt.size(200, 100);
			txt.x = Laya.stage.width - txt.width >> 1;
			txt.y = Laya.stage.height - txt.height >> 1;
			
			txt.borderColor = "#FFFF00";
			
			txt.fontSize = 20;
			txt.color = "#ffffff";
			
			Laya.stage.addChild(txt);
			
			txt.on(Event.MOUSE_DOWN, this, startScrollText);
		}
		
		/* 开始滚动文本 */
		private function startScrollText(e:Event):void
		{
			prevX = txt.mouseX;
			prevY = txt.mouseY;
			
			Laya.stage.on(Event.MOUSE_MOVE, this, scrollText);
			Laya.stage.on(Event.MOUSE_UP, this, finishScrollText);
		}
		
		/* 停止滚动文本 */
		private function finishScrollText(e:Event):void
		{
			Laya.stage.off(Event.MOUSE_MOVE, this, scrollText);
			Laya.stage.off(Event.MOUSE_UP, this, finishScrollText);
		}
		
		/* 鼠标滚动文本 */
		private function scrollText(e:Event):void
		{
			var nowX:Number = txt.mouseX;
			var nowY:Number = txt.mouseY;
			
			txt.scrollX += prevX - nowX;
			txt.scrollY += prevY - nowY;
			
			prevX = nowX;
			prevY = nowY;
		}
	}
}

image.png

image.png

这里我们就通过滚动文本显示更多的文本内容,在实际编码中根据项目需要使用overflow的3种处理方式,还有自动换行和滚动文本可以对文本进行处理。