【egret】画画组件

效果如下

代码写的比较垃圾，希望大家可以帮忙指点一下，万分感谢。

代码

/**
 * DrawUI 画画组件
 * @author baozi
 */

class DrawClothesCom extends eui.Component {
    private m_pen: egret.Shape;
    private m_sp: egret.Sprite;

    private m_penList: egret.Shape[] = [];

    private m_penPool: egret.Shape[] = [];

    /** 绘制结束 单笔画会自动派发此事件，其他情况请手动派发一次 */
    public static EVENT_DRAWCOM_DRAW_END: string = "EVENT_DRAWCOM_DRAW_END";
    /** 绘制开始 */
    public static EVENT_DRAWCOM_DRAW_BEGIN: string = "EVENT_DRAWCOM_DRAW_BEGIN";

    public constructor(width: number, height: number) {
        super();
        this.width = width;
        this.height = height;
        this.initView();
        this.initEvent();
    }
	/** 初始化*/
    private initView() {
        this.m_sp = new egret.Sprite();
        this.isBj = true;
        this.isOnePen = true;
        this.bjColor = 0xffffff;
        this.addChild(this.m_sp);
        this.penColor = 0x000000;
        this.penSize = 5;
        this.touchEnabled = true;
        this.touchChildren = true;
    }


    private initEvent() {
        //在离开舞台时，清除组件上的事件，回收画笔
        this.addEventListener(egret.TouchEvent.REMOVED_FROM_STAGE, this.hideCom, this);
    }

    /** 开始画画 */
    private startDraw(evt: egret.TouchEvent) {
        this.m_pen = this.getPen() ? this.getPen() : new egret.Shape();
        this.m_pen.graphics.lineStyle(this.penSize, this.penColor);
        this.addChild(this.m_pen);
        if (!this.m_pen) return;
        Dispatch.dispatch(DrawClothesCom.EVENT_DRAWCOM_DRAW_BEGIN);
        this.m_pen.graphics.moveTo(evt.localX, evt.localY);
    }

    /** 画画途中 */
    private drawing(evt: egret.TouchEvent) {
    	// 此处判断画笔是否越界
        if (evt.localX <= 0 || evt.localY <= 0) {
            return;
        } else if (evt.localX >= this.m_sp.width || evt.localY >= this.m_sp.height) {
            return;
        }
        if (!this.m_pen) return;
        this.m_pen.graphics.lineTo(evt.localX, evt.localY);
    }

    /** 画画结束 */
    private endDraw(evt: egret.TouchEvent) {
        if (this.m_penList.length == 0) return;
        if (this.isOnePen) {
            this.touchEnabled = false;
            this.touchChildren = false;
            //派发一笔画完成事件
            Dispatch.dispatch(DrawClothesCom.EVENT_DRAWCOM_DRAW_END);
        }
        if (evt.localX <= 0 || evt.localY <= 0) {
            return;
        } else if (evt.localX >= this.m_sp.width || evt.localY >= this.m_sp.height) {
            return;
        }
        if (!this.m_pen) return;
        this.m_pen.graphics.lineTo(evt.localX, evt.localY);

    }
    /** 结束完成 */
    private sureEnd() {
        this.touchEnabled = false;
        this.touchChildren = false;
    }

    /** 初始化 */
    public showCom() {
        this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.startDraw, this);
        this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.drawing, this);
        this.addEventListener(egret.TouchEvent.TOUCH_END, this.endDraw, this);
        this.addEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, this.endDraw, this);
        Dispatch.register(DrawClothesCom.EVENT_DRAWCOM_DRAW_END, this.sureEnd, this);
        this.touchEnabled = true;
        this.touchChildren = true;
    }

    /** 关闭界面回收画笔，和清空画布 */
    public hideCom() {
        for (let i = 0; i < this.m_penList.length; i++) {
            this.m_penList[i].graphics.clear();
            this.m_penPool.push(this.m_penList[i])
        }
        this.m_penList.length = 0;
        
        // 此处建议做个延时0.05s左右，执行sureClose方法
        this.sureClose();
 
        Dispatch.remove(DrawClothesCom.EVENT_DRAWCOM_DRAW_END, this.sureEnd, this);
        this.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, this.startDraw, this);
        this.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.drawing, this);
        this.removeEventListener(egret.TouchEvent.TOUCH_END, this.endDraw, this);
        this.removeEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, this.endDraw, this);
        if(this.parent){
            this.parent.removeChild(this);
        }
    }

    private sureClose() {
        this.touchEnabled = true;
        this.touchChildren = true;
    }

    /** 获取画笔 */
    private getPen(): egret.Shape {
        let old: egret.Shape = this.m_penPool.shift();
        if (!old) {
            old = new egret.Shape();
        }
        this.m_penList.push(old);
        return old;
    }

    private m_bjColor: number;
    public get bjColor(): number {
        return this.m_bjColor;
    }
    /** 画板颜色 默认白色 */
    public set bjColor(v: number) {
        this.m_bjColor = v;
        this.m_sp.graphics.beginFill(v);
        this.m_sp.graphics.drawRect(0, 0, this.width, this.height);
        this.m_sp.graphics.endFill();
    }

    private m_penColor: number;
    public get penColor(): number {
        return this.m_penColor;
    }
    /** 画笔颜色 默认黑色*/
    public set penColor(v: number) {
        this.m_penColor = v;
    }

    private _penSize: number;
    public get penSize(): number {
        return this._penSize;
    }
    /** 画笔粗细 默认5*/
    public set penSize(v: number) {
        this._penSize = v;
    }

    private m_isBj: boolean;
    public get isBj(): boolean {
        return this.m_isBj;
    }
    /** 是否显示画板背景 默认显示 */
    public set isBj(v: boolean) {
        this.m_isBj = v;
        this.m_sp.alpha = v ? 1 : 0;
    }
    
    private m_isOnePen: boolean;
    public get isOnePen(): boolean {
        return this.m_isOnePen;
    }
    /** 是否单笔完成  默认是 */
    public set isOnePen(v: boolean) {
        this.m_isOnePen = v;
    }
}