使用白鹭引擎遇到的一些问题以及一些工具分享

用egret也有一段时间了，记录一下遇到的bug和流水账。

BUG类

1 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

egret 2.5 里面将WebImageLoader的crossOrigin默认值设置为anonymous就可以了

Update:2017-11-30

缓存资源进入游戏但是显示不正常的问题

棋牌项目里面加载和卸载游戏模块的时候，退出游戏的时候缓存资源卸载js程序。

重新进入游戏的时候，部分资源无法显示出来，但是点击相应位置还是有响应。

在console里面通过RES.getRes(resname)的方法得到一个显示正常的Texture一个不正常的Texture，

对比发现，显示正常的bitmapdata的sourc是一个img，而显示不正常的bitmapdata的source是null。

然后在egret.js的bitmap里面断点的时候发现，由于使用了sheet里面的元素的显示对象调用了texture.dispose()，导致销毁了texture。

所以使用了图集里面的元素的所有显示对象的bitmapdata数据基本正确，但是就source是空，而显示不正常。

然后在整个项目中搜索texture.dispose()，注释掉就好了。

资源如果不要缓存的话，应该还是要在调用了RES.destroyRes后强行dispose一下。

Update:2017-9-21

从别的项目取来的exml文件不能用的问题

在wing3，egret 5.0.3中，
default.thm.json中无法被自动加载，
即使手动去其中添加也会在build的时候被清理掉。
因为新生成的项目的egretProperties.json中有默认配置：

"eui": {
"exmlRoot": "resource/eui_skins",
"themes": [
"resource/default.thm.json"
]
},

这里应该是eui皮肤文件的配置，

把这里删除掉，

然后使用egret清理就可以看到所有皮肤文件导入进来了。

设置了分辨率但build之后大小还是默认的

egret项目文件里有一个叫做template的文件夹，

其中有debug，runtime和web三个文件夹，

本地调试可以修改debug里面的index.html的尺寸和其他数据就可以在build之后显示正常。

 2016-1-8【以下应该是egret版本 <= 3.0】

egret.gui.BitmapLabel自定义font不能居中问题

在egret wing里面设置textAlign是通过setStyle去生效的，这个没有附加到BitmapLabel._bitmapText上去，因为BitmapLabel._bitmapText是通过_addToDisplayList()的方式去加上去的，这是官方比较hack的方式去将非UIComponent的元件加到gui显示列表里面去，所以这个style是无法生效的，我的解决方法很简单，直接给BitmapLabel加textAlign的setter和getter，然后在commiteProperties()里面判断textAlign是否有变更，有的话就赋值给BitmapLabel._bitmapText.textAlign，这个方法只能在程序里面手动去设置，egret wing里面的设置还是无效的，问题解决，修改后的BitmapLabel.ts如下:

//////////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2014-2015, Egret Technology Inc.
//  All rights reserved.
//  Redistribution and use in source and binary forms, with or without
//  modification, are permitted provided that the following conditions are met:
//
//     * Redistributions of source code must retain the above copyright
//       notice, this list of conditions and the following disclaimer.
//     * Redistributions in binary form must reproduce the above copyright
//       notice, this list of conditions and the following disclaimer in the
//       documentation and/or other materials provided with the distribution.
//     * Neither the name of the Egret nor the
//       names of its contributors may be used to endorse or promote products
//       derived from this software without specific prior written permission.
//
//  THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS
//  OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
//  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
//  IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
//  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
//  LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA,
//  OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
//  LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
//  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
//  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
//////////////////////////////////////////////////////////////////////////////////////


module egret.gui {

    /**
     * @class egret.gui.BitmapLabel
     * @classdesc
     * 一行或多行不可编辑的位图文本控件
     * @extends egret.gui.UIComponent
     */
    export class BitmapLabel extends UIComponent implements IDisplayText {

        private _bitmapText:BitmapText = null;

        /**
         * @method egret.gui.Label#constructor
         */
        public constructor() {
            super();
            this.addEventListener(UIEvent.UPDATE_COMPLETE, this.updateCompleteHandler, this);
        }

        /**
         * 一个验证阶段完成
         */
        private updateCompleteHandler(event:UIEvent):void {
            this.lastUnscaledWidth = NaN;
        }

        private _textChanged:boolean = false;
        private _text:string = "";
        /**
         * @member egret.gui.BitmapLabel#text
         * 设置或获取显示文本
         */
        public set text(value:string) {
            if (this._text == value)
                return;
            this._text = value;
            this._textChanged = true;
            this.invalidateProperties();
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        public get text():string {
            return this._text;
        }

        private fontChanged:boolean = false;

        public _font:any;
        /**
         * 位图字体标识符，可以是BitmapFont对象或者在资源表中的key。
         * @member egret.gui.BitmapLabel#font
         */
        public get font():any {
            return this._font;
        }

        public set font(value:any) {
            if (this._font == value)
                return;
            this._font = value;
            if (this.createChildrenCalled) {
                this.parseFont();
            }
            else {
                this.fontChanged = true;
            }
            this.invalidateProperties();
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        private _isLetterSpacingChanged:boolean = false;
        public _letterSpacing:number = 0;
        /**
         * 字符之间的距离
         * @default 0
         * @param value
         */
        public set letterSpacing(value:number) {
            this._setLetterSpacing(value);
        }

        public _setLetterSpacing(value:number):void {
            this._letterSpacing = value;

            this._isLetterSpacingChanged = true;
            this.invalidateProperties();
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        public get letterSpacing():number {
            return this._letterSpacing;
        }
        
        private _isTextAlignChanged:boolean = false;
        public _textAlign:string = "left";
        /**
         * 字符之间的距离
         * @default 0
         * @param value
         */
        public set textAlign(value:string) {
            this._settextAlign(value);
        }

        public _settextAlign(value:string):void {
            this._textAlign = value;

            this._isTextAlignChanged = true;
            this.invalidateProperties();
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        public get textAlign():string {
            return this._textAlign;
        }

        private _isLineSpacingChanged:boolean = false;
        public _lineSpacing:number = 0;
        /**
         * 行与行之间的距离
         * @default 0
         * @param value
         */
        public set lineSpacing(value:number) {
            this._setLineSpacing(value);
        }

        public _setLineSpacing(value:number):void {
            this._lineSpacing = value;

            this._isLineSpacingChanged = true;
            this.invalidateProperties();
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        public get lineSpacing():number {
            return this._lineSpacing;
        }

        private createChildrenCalled:boolean = false;

        /**
         * 创建子对象
         */
        public createChildren():void {
            super.createChildren();
            if (!this._bitmapText) {
                this.checkBitmapText();
            }
            if (this.fontChanged) {
                this.parseFont();
            }
            this.createChildrenCalled = true;
        }

        /**
         * 皮肤解析适配器
         */
        private static assetAdapter:IAssetAdapter;

        /**
         * 解析source
         */
        private parseFont():void {
            this.fontChanged = false;
            var adapter:IAssetAdapter = BitmapLabel.assetAdapter;
            if (!adapter) {
                adapter = this.getAdapter();
            }
            if (!this._font) {
                this.onFontChanged(null, null);
            }
            else {
                adapter.getAsset(this._font, this.onFontChanged, this, null);
            }
        }

        /**
         * 获取资源适配器
         */
        private getAdapter():IAssetAdapter {
            var adapter:IAssetAdapter;
            try {
                adapter = $getAdapter("egret.gui.IAssetAdapter");
            }
            catch (e) {
                adapter = new DefaultAssetAdapter();
            }
            BitmapLabel.assetAdapter = adapter;
            return adapter;
        }

        /**
         * 皮肤发生改变
         */
        private onFontChanged(bitmapFont:any, font:any):void {
            if (font !== this._font)
                return;
            this._bitmapText.font = bitmapFont;
            this.invalidateSize();
            this.invalidateDisplayList();
        }


        /**
         * 上一次测量的宽度
         */
        private lastUnscaledWidth:number = NaN;

        private _padding:number = 0;
        /**
         * 四个边缘的共同内边距。若单独设置了任一边缘的内边距，则该边缘的内边距以单独设置的值为准。
         * 此属性主要用于快速设置多个边缘的相同内边距。默认值：0。
         * @member egret.gui.BitmapLabel#padding
         */
        public get padding():number {
            return this._padding;
        }

        public set padding(value:number) {
            if (this._padding == value)
                return;
            this._padding = value;
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        private _paddingLeft:number = NaN;
        /**
         * 文字距离左边缘的空白像素,若为NaN将使用padding的值，默认值：NaN。
         * @member egret.gui.BitmapLabel#paddingLeft
         */
        public get paddingLeft():number {
            return this._paddingLeft;
        }

        public set paddingLeft(value:number) {
            if (this._paddingLeft == value)
                return;

            this._paddingLeft = value;
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        /**
         *
         * @type {number}
         * @private
         */
        private _paddingRight:number = NaN;
        /**
         * 文字距离右边缘的空白像素,若为NaN将使用padding的值，默认值：NaN。
         * @member egret.gui.BitmapLabel#paddingRight
         */
        public get paddingRight():number {
            return this._paddingRight;
        }

        public set paddingRight(value:number) {
            if (this._paddingRight == value)
                return;

            this._paddingRight = value;
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        /**
         *
         * @type {number}
         * @private
         */
        private _paddingTop:number = NaN;
        /**
         * 文字距离顶部边缘的空白像素,若为NaN将使用padding的值，默认值：NaN。
         * @member egret.gui.BitmapLabel#paddingTop
         */
        public get paddingTop():number {
            return this._paddingTop;
        }

        public set paddingTop(value:number) {
            if (this._paddingTop == value)
                return;

            this._paddingTop = value;
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        /**
         *
         * @type {number}
         * @private
         */
        private _paddingBottom:number = NaN;
        /**
         * 文字距离底部边缘的空白像素,若为NaN将使用padding的值，默认值：NaN。
         * @member egret.gui.BitmapLabel#paddingBottom
         */
        public get paddingBottom():number {
            return this._paddingBottom;
        }

        public set paddingBottom(value:number) {
            if (this._paddingBottom == value)
                return;

            this._paddingBottom = value;
            this.invalidateSize();
            this.invalidateDisplayList();
        }

        /**
         * 计算  容器默认大小的最小值和最大值
         * @method egret.gui.BitmapLabel#measure
         */
        public measure():void {
            //先提交属性，防止样式发生改变导致的测量不准确问题。
            if (this._UIC_Props_._invalidatePropertiesFlag)
                this.validateProperties();
            if (this.isSpecialCase()) {
                if (isNaN(this.lastUnscaledWidth)) {
                    this._UIC_Props_._oldPreferWidth = NaN;
                    this._UIC_Props_._oldPreferHeight = NaN;
                }
                else {
                    this.measureUsingWidth(this.lastUnscaledWidth);
                    return;
                }
            }

            var availableWidth:number;

            if (!isNaN(this.$getExplicitWidth())) {
                availableWidth = this.$getExplicitWidth();
            }
            else if (this.maxWidth != 10000)
                availableWidth = this.maxWidth;

            this.measureUsingWidth(availableWidth);
        }

        /**
         * 特殊情况，组件尺寸由父级决定，要等到父级UpdateDisplayList的阶段才能测量
         */
        private isSpecialCase():boolean {
            return (!isNaN(this.percentWidth) || (!isNaN(this.left) && !isNaN(this.right))) &&
                isNaN(this.$getExplicitWidth()) &&
                isNaN(this.percentHeight);
        }

        /**
         * 使用指定的宽度进行测量
         */
        private measureUsingWidth(w:number):void {
            if (this._textChanged) {
                this._bitmapText.text = this._text;
            }

            if (this._isLetterSpacingChanged) {
                this._bitmapText.letterSpacing = this._letterSpacing;
            }
            if (this._isLineSpacingChanged) {
                this._bitmapText.lineSpacing = this._lineSpacing;
            }
            if( this._isTextAlignChanged){
                this._bitmapText.textAlign = this._textAlign;
            }

            var padding:number = isNaN(this._padding) ? 0 : this._padding;
            var paddingL:number = isNaN(this._paddingLeft) ? padding : this._paddingLeft;
            var paddingR:number = isNaN(this._paddingRight) ? padding : this._paddingRight;
            var paddingT:number = isNaN(this._paddingTop) ? padding : this._paddingTop;
            var paddingB:number = isNaN(this._paddingBottom) ? padding : this._paddingBottom;

            this._bitmapText.width = NaN;
            this._bitmapText.height = NaN;
            if (!isNaN(w)) {
                this._bitmapText.width = w - paddingL - paddingR;
                this.measuredWidth = Math.ceil(this._bitmapText.width);
                this.measuredHeight = Math.ceil(this._bitmapText.height);
            }
            else {
                this.measuredWidth = Math.ceil(this._bitmapText.width);
                this.measuredHeight = Math.ceil(this._bitmapText.height);
            }
            this.measuredWidth += paddingL + paddingR;
            this.measuredHeight += paddingT + paddingB;

        }

        /**
         * 通过设置此容器子项的位置和大小来响应大小更改
         * @method egret.gui.BitmapLabel#updateDisplayList
         * @param unscaledWidth {number}
         * @param unscaledHeight {number}
         */
        public updateDisplayList(unscaledWidth:number, unscaledHeight:number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if (!this._bitmapText)
                return;
            var padding:number = isNaN(this._padding) ? 0 : this._padding;
            var paddingL:number = isNaN(this._paddingLeft) ? padding : this._paddingLeft;
            var paddingR:number = isNaN(this._paddingRight) ? padding : this._paddingRight;
            var paddingT:number = isNaN(this._paddingTop) ? padding : this._paddingTop;
            var paddingB:number = isNaN(this._paddingBottom) ? padding : this._paddingBottom;

            this._bitmapText.x = paddingL;
            this._bitmapText.y = paddingT;
            if (this.isSpecialCase()) {
                var firstTime:boolean = isNaN(this.lastUnscaledWidth) ||
                    this.lastUnscaledWidth != unscaledWidth;
                this.lastUnscaledWidth = unscaledWidth;
                if (firstTime) {
                    this._UIC_Props_._oldPreferWidth = NaN;
                    this._UIC_Props_._oldPreferHeight = NaN;
                    this.invalidateSize();
                    return;
                }
            }
            //防止在父级validateDisplayList()阶段改变的text属性值，
            //接下来直接调用自身的updateDisplayList()而没有经过measure(),使用的测量尺寸是上一次的错误值。
            if (this._UIC_Props_._invalidateSizeFlag)
                this.validateSize();

            if (!this._bitmapText.visible)//解决初始化时文本闪烁问题
                this._bitmapText.visible = true;

            this._bitmapText.width = unscaledWidth - paddingL - paddingR;
            var unscaledTextHeight:number = unscaledHeight - paddingT - paddingB;
            this._bitmapText.height = unscaledTextHeight;

        }

        private checkBitmapText() {
            if (this._bitmapText)
                return;
            this._bitmapText = new BitmapText();
            this._bitmapText.text = this._text;
            this._bitmapText.letterSpacing = this._letterSpacing;
            this._bitmapText.lineSpacing = this._lineSpacing;
            this._bitmapText.textAlign = this._textAlign;
            this._textChanged = false;
            this._isLetterSpacingChanged = false;
            this._isLineSpacingChanged = false;
            this._isTextAlignChanged = false;
            this._addToDisplayList(this._bitmapText);
        }

        /**
         * 处理对组件设置的属性
         */
        public commitProperties():void {
            super.commitProperties();

            if (!this._bitmapText) {
                this.checkBitmapText();
            }
            if (this._textChanged) {
                this._bitmapText.text = this._text;
                this._textChanged = false;
            }
            if (this._isLetterSpacingChanged) {
                this._bitmapText.letterSpacing = this._letterSpacing;
                this._isLetterSpacingChanged = false;
            }
            if (this._isLineSpacingChanged) {
                this._bitmapText.lineSpacing = this._lineSpacing;
                this._isLineSpacingChanged = false;
            }
            if (this._isTextAlignChanged) {
                this._bitmapText.textAlign = this._textAlign;
                this._isTextAlignChanged = false;
            }
        }

    }
}

Sound.play()循环播放导致声音重复加载的问题

产生的原因是HtmlSoundChannel.ts在播放完成的时候，判断到loops的时候，直接重新this.audio.load()，然后浏览器去进行了加载，至于浏览器为什么不是从缓存里面去加载而是去服务器上加载，我就不知道了，我只知道，判断一下然后去确定是否要去加载，治愈官方说的有的手机会播放不了，对于大型游戏，例如我们项目来说，其实声音在大部分机型上能播放就可以了，最起码我是这么认为的：

//////////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2014-2015, Egret Technology Inc.
//  All rights reserved.
//  Redistribution and use in source and binary forms, with or without
//  modification, are permitted provided that the following conditions are met:
//
//     * Redistributions of source code must retain the above copyright
//       notice, this list of conditions and the following disclaimer.
//     * Redistributions in binary form must reproduce the above copyright
//       notice, this list of conditions and the following disclaimer in the
//       documentation and/or other materials provided with the distribution.
//     * Neither the name of the Egret nor the
//       names of its contributors may be used to endorse or promote products
//       derived from this software without specific prior written permission.
//
//  THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS
//  OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
//  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
//  IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
//  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
//  LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA,
//  OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
//  LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
//  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
//  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
//////////////////////////////////////////////////////////////////////////////////////

module egret.web {

    /**
     * @private
     * @inheritDoc
     */
    export class HtmlSoundChannel extends egret.EventDispatcher implements egret.SoundChannel {


        /**
         * @private
         */
        $url:string;
        /**
         * @private
         */
        $loops:number;
        /**
         * @private
         */
        $startTime:number = 0;
        /**
         * @private
         */
        private audio:HTMLAudioElement = null;

        //声音是否已经播放完成
        private isStopped:boolean = false;

        /**
         * @private
         */
        constructor(audio:HTMLAudioElement) {
            super();
            audio.addEventListener("ended", this.onPlayEnd);
            this.audio = audio;
        }

        $play():void {
            if (this.isStopped) {
                egret.$error(1036);
                return;
            }

            try {
                this.audio.currentTime = this.$startTime;
            }
            catch (e) {

            }
            finally {
                this.audio.play();
            }
        }

        /**
         * @private
         */
        private onPlayEnd = () => {
            if (this.$loops == 1) {
                this.stop();

                this.dispatchEventWith(egret.Event.SOUND_COMPLETE);
                return;
            }

            if (this.$loops > 0) {
                this.$loops--;
            }

            /////////////
            if( !this.audio.ended)
                this.audio.load();
            this.$play();
        };

        /**
         * @private
         * @inheritDoc
         */
        public stop() {
            if (!this.audio)
                return;
            var audio = this.audio;
            audio.pause();
            audio.removeEventListener("ended", this.onPlayEnd);
            this.audio = null;

            HtmlSound.$recycle(this.$url, audio);
        }

        /**
         * @private
         * @inheritDoc
         */
        public get volume():number {
            if (!this.audio)
                return 1;
            return this.audio.volume;
        }

        /**
         * @inheritDoc
         */
        public set volume(value:number) {
            if (this.isStopped) {
                egret.$error(1036);
                return;
            }

            if (!this.audio)
                return;
            this.audio.volume = value;
        }

        /**
         * @private
         * @inheritDoc
         */
        public get position():number {
            if (!this.audio)
                return 0;
            return this.audio.currentTime;
        }
    }
}

 QQ玩吧声音加载和播放问题

Android QQ玩吧的页面如果有嵌入jsbridge.js的话，egret会判断是否是玩吧，时候有jsbridge里面的接口，有的话会强制使用相对路径，详见HtmlCapbility搜索"wanba"就可以看到了，此时玩吧会使用他们的audio播放程序去加载和播放audio，cdn以及绝对路径都会没有用，resource一定要存放在代码的相对根目录下才能用。

所有细节可以参考:HtmlCapability以及QQSound中参考

解决方法很简单，去掉页面里面的jsbridge.js的嵌入，其实这个js文件没有什么用，去掉后android上QQ玩吧会默认使用egret.HtmlSound去播放声音

 

心得

关闭列表的滚动：比较hack的做法

var skin = this.list.skin;
var scroller:egret.gui.Scroller = skin._elementsContent[0];
if( scroller != null)
    scroller.verticalScrollPolicy = "off";

监听列表的滚动事件

这个找了很久

this.list.dataGroup.addEventListener(egret.gui.PropertyChangeEvent.PROPERTY_CHANGE,this.onListTouchEnd, this);

private onListTouchEnd(evt:egret.gui.PropertyChangeEvent){

            var newPos:number = evt.newValue;
            var referPos:number = this.list.dataGroup.scrollRect.bottom-this.list.dataGroup.height;
            if( evt.property == "verticalScrollPosition" && referPos - newPos <= 10){
                //todo dosomething
            }
        }

工具

1 抽屉效果

原理： Tween + mask实现

例如对显示对象d实现抽屉效果：

var tw:egret.Tween = egret.Tween.get(this.d,{onChange:this.updateMask,onChangeObj:this},null,true);
this.maskForD = new egret.Rectangle(0,0,0,60);

private updateMask(){
    var showWidth:number;
    if( this.isLeft){
        showWidth = 420-(this.itemGroup.x-20);
    }else{
        showWidth = 420 - this.itemGroup.x;
    }
    this.maskForD.width = showWidth;
    this.d.mask = this.maskForItemGroup;
}

2 帧事件的管理

沿用as的习惯，全局只有一个帧事件。

配合这个使用：

3 简单的位移补间

用自带的Tween效率不是很好，于是自己实现了一个，如下：

需要配合这个使用：

4 做了一个简单的重力系统，如下：

配合使用的类：