AlloyRenderingEngine文本框组件
写在前面
Github: https://github.com/AlloyTeam/AlloyGameEngine
在dom元素里,自带了input标签,设置其type为text,它就是一个文本框。
那么在Canvas中模拟input文本框是不是闲的没事找事?绝对不是!
因为在游戏当中可以统一化像素管理,具体统一化像素管理有什么好处,以后新开文章详细讨论。
演示
上面的文本框就是使用AlloyRenderingEngine渲染出来的。
使用
- ; (function () {
- var Stage = ARE.Stage, Textbox = ARE.Textbox;
- var stage = new Stage("#ourCanvas", true);
- var textbox = new ARE.Textbox({
- fontSize: 22,
- color: "red",
- width: 200,
- height: 26
- });
- textbox.x = 50;
- textbox.y = 50;
- textbox.focus();
- stage.add(textbox);
- })();
原理(都在注释里)
- ; (function () {
- //先把要使用类的赋给临时变量,以后就不用打点了:)
- var Stage = ARE.Stage, Container = ARE.Container, Graphics = ARE.Graphics, Text = ARE.Text;
- //文本框集成自容器
- ARE.Textbox = Container.extend({
- //构造函数
- ctor: function (option) {
- //把容器的属性和方法搞给自己
- this._super();
- //鼠标移上去指针的形状,AlloyRenderingEngine会自动帮你显示鼠标移上去时候的形状
- this.cursor = "text";
- //文本框的边框
- this.box = new Graphics()
- //直接根据传进的宽和高画个矩形
- this.box.strokeRect(0, 0, option.width, option.height);
- //文本框的背景,这里接近透明,为什么要设置背景是因为鼠标一上去要触发一个事件,
- //而AlloyRenderingEngine的默认触发是像素级别,
- //会根据getImageData得到该点的rgba的a是否为0去判断是否触发事件
- //所以铺一个接近透明的背景
- //主要是为了触发的事件是:鼠标移到文本框上面,鼠标形状要变成cursor:text
- this.box.fillStyle("rgba(255,255,255,0.1)").fillRect(0, 0, option.width, option.height);
- //把边框添加到自身(因为自身就是容器,继承自Container,所以有了add方法)
- this.add(this.box);
- //绑定事件
- this._bindEvent();
- //合并默认配置
- this.option = {
- fontSize: option.fontSize || 12,
- fontFamily: option.fontFamily || "arial",
- color: option.color || "black",
- width: option.width
- };
- //cursorText代表文本框中闪烁的光标,自己用黑色的Text去模拟
- this.cursorText = new Text("|", this.option.fontSize + "px " + this.option.fontFamily, "black");
- //真正的input!!!!哈哈,玄机就在于此 = =!
- this.realTextbox = document.createElement("input");
- this.realTextbox.type = "text";
- this.realTextbox.style.position = "fixed";
- this.realTextbox.style.left= "-200px"
- this.realTextbox.style.top= "0px"
- document.body.appendChild(this.realTextbox);
- //canvas中显示的文本
- this.text = new Text("", this.option.fontSize + "px " + this.option.fontFamily, this.option.color);
- //measureCtx是专门用于测量canvas中文本宽度的
- this.measureCtx = document.createElement("canvas").getContext("2d");
- this.measureCtx.font = this.option.fontSize + "px " + this.option.fontFamily;
- this.add(this.text, this.cursorText);
- //tickFPS是该容器tick执行的频率,AlloyRenderingEngine会自动帮你执行tick方法
- this.tickFPS = 20;
- },
- //获取焦点
- focus: function () {
- var self = this;
- //真正的input也同时获取焦点
- this.realTextbox.focus();
- //Canvas中的光标闪烁
- this.loop = setInterval(function () {
- self.cursorText.visible = !self.cursorText.visible;
- }, 500);
- },
- //失去焦点
- blur: function () {
- clearInterval(this.loop);
- //真正的input也同时失去焦点
- this.realTextbox.blur();
- //隐藏Canvas中的光标
- this.cursorText.visible = false;
- },
- _bindEvent: function () {
- var self = this;
- this.onClick(function (evt) {
- //真正的input也同时获取焦点
- self.realTextbox.focus();
- //显示光标
- self.cursorText.visible = true;
- //自己也假装获取焦点
- self.focus();
- //阻止冒泡
- evt.stopPropagation();
- });
- //点击文本框的其他区域触发失去焦点
- document.addEventListener("mousedown", function () {
- //失去焦点
- self.blur();
- }, false);
- },
- //计算合适的显示文本,这主要是解决文本超出了文本框的宽度时候的显示问题
- getFitStr: function (str, index) {
- //利用measureText计算文本宽度
- var width = this.measureCtx.measureText(str.substring(index, str.length - 1)).width;
- if (width < this.option.width - this.option.fontSize) {
- return this.getFitStr(str, --index);
- } else {
- return str.substring(index++, str.length - 1)
- }
- },
- tick: function () {
- //利用measureText计算文本宽度,并把该宽度赋值给光标的偏移
- this.cursorText.x = this.measureCtx.measureText(this.realTextbox.value).width;
- //如果宽度超了
- if (this.cursorText.x > this.option.width) {
- this.text.value = this.getFitStr(this.realTextbox.value, this.realTextbox.value.length - 2);
- this.cursorText.x = this.measureCtx.measureText(this.text.value).width;
- } else {//如果宽度没超
- this.text.value = this.realTextbox.value;
- }
- }
- });
- })();
大部分代码都做了解释,不再重复阐述。
Github: https://github.com/AlloyTeam/AlloyGameEngine
AlloyRenderingEngine文本框组件的更多相关文章
- Flutter学习笔记(21)--TextField文本框组件和Card卡片组件
如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...
- Flutter——TextField组件(文本框组件)
TextField组件的常用属性: 属性 描述 maxLines 设置此参数可以把文本框改为多行文本框 onChanged 文本框改变的时候触发的事件 decoration hintText 类似 h ...
- javaSwing文本框组件
public class JTextFieldTest extends JFrame{ private static final long serialVersionUID = 1L; p ...
- xmlplus 组件设计系列之三 - 文本框
文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输 ...
- Python Tkinter 文本框(Entry)
Python Tkinter 文本框用来让用户输入一行文本字符串. 你如果需要输入多行文本,可以使用 Text 组件. 你如果需要显示一行或多行文本且不允许用户修改,你可以使用 Label 组件. 语 ...
- [js开源组件开发]js文本框计数组件
js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...
- Android开发10.2:UI组件AutoCompleteTextView(自动完成文本框)
概述 AutoCompleteTextVeiw(自动完成文本框)从 EditText派生而出 PS :EditText用法介绍 当用户输入一定字符后,自动完成自动完成文本框会显示 ...
- 『Asp.Net 组件』第一个 Asp.Net 服务器组件:自己的文本框控件
代码: using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace DemoWebControl ...
- 使用ErrorProvider组件验证文本框输入
实现效果: 知识运用: ErrorProvider组件的BlinkStyle属性 //指示错误图标的闪烁时间 public ErrorBlinkStyle BlinkStyle{ get;set; } ...
随机推荐
- postgresql 基本语法
postgresql数据库创建/修改/删除等写入类代码语法总结: 1,创建库 2,创建/删除表 2.1 创建表 create table myTableName 2.2 如果表不存在则创建表 crea ...
- 自制Azure中国版“加血包”
Micrsoft Azure中国版的国际出口最近升级为电话线拨号模式,目测为10个用户共享一条56kb的电话线拨号链路.有图有真相: 中国的IT从业者,有三分之一的职业生涯时间是在跟网络斗智斗勇.这点 ...
- TCP三次握手图解
- EMD分析 Matlab 精华总结 附开源工具箱(全)
前言: 本贴写于2016年12与15日,UK.最近在学习EMD(Empirical Mode Decomposition)和HHT(Hilbert-Huang Transform)多分辨信号处理,FQ ...
- 通过Mono 在 Heroku 上运行 .NET 应用
英文原文:Running .NET on Heroku 中文原文:在 Heroku 上运行 .NET 应用 自从加入了Heroku之后,我就想在这个平台上运行.NET程序.现在我很高兴向大家宣布,我们 ...
- opengl 笔记(2)
/*- * Opengl Demo Test * * Fredric : 2016-7-10 */ #include <GLUT/GLUT.h> #include <stdlib.h ...
- 关于JavaScript中的delete操作
关于JavaScript中的delete操作 看到一道题,是这样的: (function(x){ delete x; return x; })(1); 1 null undefined Error 我 ...
- Docker之Compose服务编排
Compose是Docker的服务编排工具,主要用来构建基于Docker的复杂应用,Compose 通过一个配置文件来管理多个Docker容器,非常适合组合使用多个容器进行开发的场景. 说明:Comp ...
- Microsoft Visual Studio 2013 — Project搭载IIS配置的那些事
前段时间在改Bug打开一个project时,发生了一件奇怪的事,好好的一直不能加载solution底下的这个project,错误如下图所示:大致的意思就是这个project的web server被配置 ...
- 编程之美—烙饼排序问题(JAVA)
一.问题描述 星期五的晚上,一帮同事在希格玛大厦附近的"硬盘酒吧"多喝了几杯.程序员多喝了几杯之后谈什么呢?自然是算法问题.有个同事说:"我以前在餐 馆打工,顾 ...