咸鱼教程Egret中可长按复制的文本（例如复制优惠码)

Posted 2020-11-20 gamedaybyday

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

在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上位置和高宽

   



三 源码