一 实际效果
二 实现原理
三 源码下载

在egret中实现长按复制文本效果,一般用于复制优惠码什么的。

一 实际效果

       

二 实现原理

在egret的游戏元素都是绘制在canvas上的,我们在canvas上覆盖一个<p>标签,来实现长按复制的效果。

1 首先在index.html中为egret所在div赋值id = gameDiv

2 获取gameDiv,在gameDiv上创建一个<p>标签

[Actionscript3] 纯文本查看 复制代码
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类
我把这个功能封装了下,使用方式如下:

[Actionscript3] 纯文本查看 复制代码
1
2
3
var htmlText:HTMLText = new HTMLText();  //新建p标签
htmlText.setValue("123456");                     //设置p文本内容
htmlText.setPosition(0,100, 640, 30); //设置p在canvas上位置和高宽

源码

【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)的更多相关文章

  1. 【咸鱼教程】Egret可长按识别二维码(精确位置和大小)

    教程目录一 实现原理二 实现过程三 Demo下载 本教程是在Egret中实现长按识别的二维码,并可以精确定位二维码的位置和大小,支持横屏和竖屏. 一 实现原理 微信中长按识别二维码,需要长按jpg或p ...

  2. 【咸鱼教程】DragonBones帧动画、骨骼json、极速、二进制

    公司的人想用龙骨,但是同事在官网找不着二进制的资料...于是写了个简单demo. demo中包含了帧动画.骨骼动画json.极速和二进制的资源和代码 测试环境:DragonBonesPro 5.5  ...

  3. 【咸鱼教程】protobuf在websocket通讯中的使用

    教程目录一 protobuf简介二 使用protobuf三 Demo下载 参考: CSDN:Egret项目中使用protobuf(protobufjs) TS项目中使用Protobuf的解决方案(ba ...

  4. 【咸鱼教程】Egret实现摇一摇功能

    教程目录一 实现原理二 代码三 Demo下载 一 实现原理监听设备旋转角度的变化,来判断用户是否摇动手机. 参考:智能手机里陀螺仪和重力感应有何区别?HTML5实现摇一摇的功能Egret官方陀螺仪教程 ...

  5. 【咸鱼教程】TextureMerger1.6.6 一:Egret MovieClip的制作和使用

    几个月没写代码了.然后突然用到TextureMerger,发现不会用序列图做动画了... 于是写下过程,以防忘记... MovieClip主要是用于游戏中的动画制作和播放.支持swf.gif.序列图等 ...

  6. 【咸鱼教程】JsZip压缩与解压教程

    引擎版本3.0.6 教程目录一 为什么要用jszip二 如何使用jszip    2.1 下载jszip库    2.2 导入jszip库    2.3 加载和解压zip代码三 Demo源码下载 一 ...

  7. 【咸鱼教程】本地图片上传。动态GIF表情图生成

    本案例参考:http://emoji.decathlon.trustingme.cn/但是实现方式不一样. 教程目录一 head first二 打开本地图片功能三 拖拽和缩放手势,调整图片四 gifj ...

  8. 【咸鱼教程】Base64

    教程目录1 Base64简介2 使用Base643 Demo下载 1 Base64简介百度百科:Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2 ...

  9. 【咸鱼教程】基于系统时间的计时器DateTimer(不受FPS影响)

    教程目录一 计时器简介二 计时器实现三 Demo下载 一 计时器简介在手机上跑游戏时,可能由于运动物体过多,导致帧频太低,计时不准确.比如一些倒计时的游戏,可能倒计时30s,变成了35s.比如ipho ...

随机推荐

  1. [Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序

    af3的变化非常大.参见[译]Intel App Framework 3.0的变化 一.应用需要引用的js脚本: af3中不在自己实现dom选择器,而是选择基于jquey或兼容jquery的库如zep ...

  2. 【玩转Golang】 自定义json序列化对象时,非法字符错误原因

    由于前台web页面传来的日期对象是这样的格式“2010-11-03 15:23:22”,所以我安装网上查来的办法,自定义包装了time.Time对象,实现自己的Marshal和UnMarshal方法 ...

  3. 【Ubuntu】录屏软件

    http://www.leesven.com/2378.html sudo apt-get install kazam

  4. Java学习之——JavaBeans

    1.什么是JavaBeans? JavaBeans是Java语言中可以重复使用的软件组件,它们是一种特殊的Java类,将很多的对象封装到了一个对象(bean)中.特点是 可序列化, 提供无参构造器, ...

  5. MathType如何设置标尺的单位

    MathType在编辑公式的时候,经常会需要将公式对齐.在将公式对齐的这个过程中,有时候会用到标尺,这样可以更精确的定位公式的位置.我们在使用标尺的时候,有时候会发现标尺上显示的是英寸,而我们平常已经 ...

  6. Adobe超分辨率算法:SRNTT

    论文:Image Super-Resolution by Neural Texture Transfer 论文链接:https://arxiv.org/abs/1903.00834 项目地址:http ...

  7. Linux的时间设置与同步

    http://www.cnblogs.com/liuyou/archive/2012/07/29/2614338.html

  8. java之 ------ 可变參数和卫条件

    可变參数:适用于參数个数不确定.类型确定的情况,java把可变參数当做数组处理. 可变參数必须位于最后一项.当可变參数个数多于一个时,必将有一个不是最后一项,所以仅仅支持有一个可变參数. 可变參数的书 ...

  9. css counter的使用方法

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. .Net使用DES加密,.Net和java分别解密,并正则匹配替换加密密码为明文

    在VS中用WindowsApplication做一个exe程序,用来给数据库密码加密,加密代码如下 private void generateBtn_Click(object sender, Even ...