[Cocos Creator] 畫面縮放改變後 EditBox 輸入區顯示位置異常問題

Cocos Creator 版本: 2.2.0
問題: 畫面縮放改變後 cc.EditBox 輸入區顯示位置異常

修正方式: 增加 Component 動態修正位置

const { ccclass, property, requireComponent } = cc._decorator;
@ccclass
@requireComponent(cc.EditBox)
export default class EditBoxFix extends cc.Component {
 
    // 修正 EditBox 在網頁縮放後 輸入區顯示位置異常的問題
    // 參考資料
    // https://github.com/cocos-creator/engine/blob/2.2.0/cocos2d/core/components/editbox/CCEditBox.js
    private canvasWidth: number = 0;
    private canvasHeight: number = 0;
 
    onLoad(): void {
        this.canvasWidth = cc.game.canvas.width;
        this.canvasHeight = cc.game.canvas.height;
        window.addEventListener("resize", this.onResize);
        window.addEventListener("orientationchange", this.onResize);
    }
 
    onDestroy(): void {
        window.removeEventListener("resize", this.onResize);
        window.removeEventListener("orientationchange", this.onResize);
    }
 
    private onResize = (e: Event): void => {
        if (this.canvasWidth === cc.game.canvas.width 
            && this.canvasHeight === cc.game.canvas.height) { return; }
        this.resetSize();
    }
 
    public resetSize = (): void => {
        this.canvasWidth = cc.game.canvas.width;
        this.canvasHeight = cc.game.canvas.height;
        let editBox: any = this.node.getComponent(cc.EditBox);
        if (editBox == null) { return; }
        let isFocused: any = editBox.isFocused();
        if (editBox._impl) {
            editBox._impl.clear();
        } else {
            return;
        }
        let EditBoxClass: any = cc.EditBox;
        let impl: any = editBox._impl = new EditBoxClass._ImplClass();
        impl.init(editBox);
        editBox._updateString(editBox._string);
        editBox._syncSize();
        if (isFocused) { editBox.focus(); }
    }
}

參考資料
GitHub cocos-creator