【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)
一 实际效果
二 实现原理
三 源码下载
在egret中实现长按复制文本效果,一般用于复制优惠码什么的。
一 实际效果
二 实现原理
在egret的游戏元素都是绘制在canvas上的,我们在canvas上覆盖一个<p>标签,来实现长按复制的效果。
1 首先在index.html中为egret所在div赋值id = gameDiv
2 获取gameDiv,在gameDiv上创建一个<p>标签
01
02
03
04
05
06
07
08
09
10
11
12
13
|
//在egret的div下创建<p> var gameDiv = document.getElementById( "gameDiv" ); this .p = document.createElement( "p" ); gameDiv.appendChild( this .p); //设置<p>属性 this .p.style.border = "0px" ; this .p.style.backgroundColor = "transparent" ; this .p.style.position = "absolute" ; this .p.style.fontSize = this .fontSize + "px" ; //fontSize是将这个功能封装后,可自定义的文本大小。具体看源码。 this .p.style.display = "none" ; this .p.style.color = "#000000" ; this .p.style.textAlign = "center" ; |
3 适配<p>标签
由于egret中组件是在canvas上,而<p>标签是在浏览器页面。
所以egret中的1像素和<p>的1像素是不一样的。
我们这里利用stage的高宽和document.body.client的高宽比例,来进行<p>标签在canvas上的适配。(这个点比较重要)
不知道怎么回事,代码含不良信息粘不了...删了才能发帖成功....握草。
4 在egret使用封装好的HtmlText类
我把这个功能封装了下,使用方式如下:
1
2
3
|
var htmlText:HTMLText = new HTMLText(); //新建p标签 htmlText.setValue( "123456" ); //设置p文本内容 htmlText.setPosition( 0 , 100 , 640 , 30 ); //设置p在canvas上位置和高宽 |
三 源码
【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)的更多相关文章
- 【咸鱼教程】Egret可长按识别二维码(精确位置和大小)
教程目录一 实现原理二 实现过程三 Demo下载 本教程是在Egret中实现长按识别的二维码,并可以精确定位二维码的位置和大小,支持横屏和竖屏. 一 实现原理 微信中长按识别二维码,需要长按jpg或p ...
- 【咸鱼教程】DragonBones帧动画、骨骼json、极速、二进制
公司的人想用龙骨,但是同事在官网找不着二进制的资料...于是写了个简单demo. demo中包含了帧动画.骨骼动画json.极速和二进制的资源和代码 测试环境:DragonBonesPro 5.5 ...
- 【咸鱼教程】protobuf在websocket通讯中的使用
教程目录一 protobuf简介二 使用protobuf三 Demo下载 参考: CSDN:Egret项目中使用protobuf(protobufjs) TS项目中使用Protobuf的解决方案(ba ...
- 【咸鱼教程】Egret实现摇一摇功能
教程目录一 实现原理二 代码三 Demo下载 一 实现原理监听设备旋转角度的变化,来判断用户是否摇动手机. 参考:智能手机里陀螺仪和重力感应有何区别?HTML5实现摇一摇的功能Egret官方陀螺仪教程 ...
- 【咸鱼教程】TextureMerger1.6.6 一:Egret MovieClip的制作和使用
几个月没写代码了.然后突然用到TextureMerger,发现不会用序列图做动画了... 于是写下过程,以防忘记... MovieClip主要是用于游戏中的动画制作和播放.支持swf.gif.序列图等 ...
- 【咸鱼教程】JsZip压缩与解压教程
引擎版本3.0.6 教程目录一 为什么要用jszip二 如何使用jszip 2.1 下载jszip库 2.2 导入jszip库 2.3 加载和解压zip代码三 Demo源码下载 一 ...
- 【咸鱼教程】本地图片上传。动态GIF表情图生成
本案例参考:http://emoji.decathlon.trustingme.cn/但是实现方式不一样. 教程目录一 head first二 打开本地图片功能三 拖拽和缩放手势,调整图片四 gifj ...
- 【咸鱼教程】Base64
教程目录1 Base64简介2 使用Base643 Demo下载 1 Base64简介百度百科:Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2 ...
- 【咸鱼教程】基于系统时间的计时器DateTimer(不受FPS影响)
教程目录一 计时器简介二 计时器实现三 Demo下载 一 计时器简介在手机上跑游戏时,可能由于运动物体过多,导致帧频太低,计时不准确.比如一些倒计时的游戏,可能倒计时30s,变成了35s.比如ipho ...
随机推荐
- [Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序
af3的变化非常大.参见[译]Intel App Framework 3.0的变化 一.应用需要引用的js脚本: af3中不在自己实现dom选择器,而是选择基于jquey或兼容jquery的库如zep ...
- 【玩转Golang】 自定义json序列化对象时,非法字符错误原因
由于前台web页面传来的日期对象是这样的格式“2010-11-03 15:23:22”,所以我安装网上查来的办法,自定义包装了time.Time对象,实现自己的Marshal和UnMarshal方法 ...
- 【Ubuntu】录屏软件
http://www.leesven.com/2378.html sudo apt-get install kazam
- Java学习之——JavaBeans
1.什么是JavaBeans? JavaBeans是Java语言中可以重复使用的软件组件,它们是一种特殊的Java类,将很多的对象封装到了一个对象(bean)中.特点是 可序列化, 提供无参构造器, ...
- MathType如何设置标尺的单位
MathType在编辑公式的时候,经常会需要将公式对齐.在将公式对齐的这个过程中,有时候会用到标尺,这样可以更精确的定位公式的位置.我们在使用标尺的时候,有时候会发现标尺上显示的是英寸,而我们平常已经 ...
- Adobe超分辨率算法:SRNTT
论文:Image Super-Resolution by Neural Texture Transfer 论文链接:https://arxiv.org/abs/1903.00834 项目地址:http ...
- Linux的时间设置与同步
http://www.cnblogs.com/liuyou/archive/2012/07/29/2614338.html
- java之 ------ 可变參数和卫条件
可变參数:适用于參数个数不确定.类型确定的情况,java把可变參数当做数组处理. 可变參数必须位于最后一项.当可变參数个数多于一个时,必将有一个不是最后一项,所以仅仅支持有一个可变參数. 可变參数的书 ...
- css counter的使用方法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- .Net使用DES加密,.Net和java分别解密,并正则匹配替换加密密码为明文
在VS中用WindowsApplication做一个exe程序,用来给数据库密码加密,加密代码如下 private void generateBtn_Click(object sender, Even ...