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

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

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

一 实际效果

        


二 实现原理

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

 

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

 


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

[Actionscript3]  纯文本查看 复制代码

//在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]  纯文本查看 复制代码

var htmlText:HTMLText = new HTMLText();  //新建p标签
htmlText.setValue( "123456" );                     //设置p文本内容
htmlText.setPosition( 0 , 100 , 640 , 30 ); //设置p在canvas上位置和高宽

   



三 源码