BS版图形系统 - 中文录入

QQ: 282397369

可见字符录入

初步感觉入门，不过问题是一个接一个。
因为各个控件都是自画的，所以想要录入的话，需要处理键盘事件。
这个倒是容易，直接监听相应事件即可。网上资源很多。
借鉴实现一下，采用一个输入控件，绑定其

        this.keyBoardInput.addEventListener('keydown', this.doKeyDown, true);
        this.keyBoardInput.addEventListener('keypress', this.doKeyPress, true);
        this.keyBoardInput.addEventListener('keyup', this.doKeyUp, true);

然后在相应的doKeyxxx函数中处理相应的输入事件对象即可
后续可把需要的快捷键在此进行处理。

       if (kbdMsg.code == 13) { // 回车确认
            if (this.EditStyle == NEditStyle.EmphasizeFirst) {
                let firstWord = DrGraph.String.GetStringAt(this._Text, " ");
                this.Text = this._editingText + this._Text.substring(firstWord.length);
            }
            this.Text = this._editingText;
            return;
        }
        if (kbdMsg.code == 37) { // <
            this.selStart = DrGraph.HelperObject.MAX(0, this.selStart - 1);
            this.selLength = 0;
            return;
        }
        if (kbdMsg.code == 36) { // Home
            this.selStart = 0;
            this.selLength = 0;
            return;
        }
        if (kbdMsg.code == 35) { // end
            this.selStart = this._editingText.length;
            this.selLength = 0;
            return;
        }
        if (kbdMsg.code == 39) { // <
            this.selStart = DrGraph.HelperObject.MIN(this._editingText.length, this.selStart + 1);
            this.selLength = 0;
            return;
        }
        if (kbdMsg.code == 46) {  // Del
            if (this.selStart < this._editingText.length)
                this._editingText = this._editingText.substr(0, this.selStart) + this._editingText.substring(this.selStart + this.selLength + 1);
            this.selLength = 0;
            return;
        }
        if (kbdMsg.code == 8) {  // back
            if (DrGraph.HelperObject.IS_IN_RANGE(this.selStart, 0, this._editingText.length)) {
                this._editingText = this._editingText.substr(0, this.selStart - 1) + this._editingText.substring(this.selStart + this.selLength + 1);
                this.selStart = DrGraph.HelperObject.MAX(0, this.selStart - 1); 
            }
            this.selLength = 0;
            return;
        }
        if (DrGraph.HelperObject.IS_IN_RANGE(kbdMsg.code, 0x20, 0x7E)) {
            this._editingText = this._editingText.substr(0, this.selStart) + kbdMsg.key + this._editingText.substring(this.selStart + this.selLength);
            this.selStart += 1;
            this.selLength = 0;
        }

中文输入

刚实现上面功能的时候，觉得还行，可用了一会，发现没法录入中文。调试半天无果。
上网找到一个GIT项目，看其功能，很强大，但学起来要花很多时间，不划算。
期望能找到一个轻量级的，或者直接几句话搞定的最好。
最终找到中文输入法下如何正确监听输入框input事件，好象能搞定。继续深入到https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event，通过对三个消息监听处理，搞定

        this.keyBoardInput.addEventListener('compositionstart', this.handleImeEventStart);
        this.keyBoardInput.addEventListener('compositionupdate', this.handleImeEventUpdate);
        this.keyBoardInput.addEventListener('compositionend', this.handleImeEventEnd);

其实，关心的就是compositionend，直接转发成onKeyDown/keyUp就进入正常轨道了

    handleImeEventEnd(ime: any) {
        let destInput: HTMLInputElement | null = <HTMLInputElement><unknown>(this);
        if (destInput) {
            let pb = DrGraph.CanvasMaps.get(destInput);
            if(pb) {
                pb.doKeyDown.bind(this)(ime);
                pb.doKeyUp.bind(this)(ime);
            }
        }
    }

将生成的code直接固定为200，然后处理一下

		if(kbdMsg.code == 200) { // 中文
            this._editingText = this._editingText.substr(0, this.selStart) + kbdMsg.key + this._editingText.substring(this.selStart + this.selLength);
            this.selStart += kbdMsg.key.length;
            this.selLength = 0;
        }