Unity WebGL 实现中文输入 UGUI

插件：https://assetstore.unity.com/packages/essentials/tutorial-projects/ime-input-for-unity-webgl-64933

主要在此插件上修改。

参考：https://blog.csdn.net/blog_lee/article/details/79173141  使用NGUI实现

效果如下

 

根据该效果使用UGUI实现，目前大部分浏览器仍不支持该方式全屏输入。

 

思路：

1、获取输入框位置

2、使用js动态添加input输入框

3、输入结果反馈

 

1、获取输入框位置

      主要考虑UGUI的缩放、Pivot、Anchor等，获取其在网页中的坐标和大小，扩展了RectTransform的方法，代码如下：

/// <summary>
/// 获取RectTransform的屏幕位置和大小
/// </summary>
public static Rect worldRect(this RectTransform main)
{
    Rect result = new Rect();
    float xScale = main.lossyScale.x;
    float yScale = main.lossyScale.y;
    Vector2 size = main.rect.size;

    result.width = size.x * xScale;
    result.height = size.y * yScale;
    result.x = main.position.x - result.width * main.pivot.x;
    result.y = Screen.height - (main.position.y + result.height * (1 - main.pivot.y));
    return result;
}

 

2、使用js动态添加input输入框

修改插件中WebNativeDialog代码的SetUpOverlayDialog函数，添加调用传输的参数

[DllImport("__Internal")]
private static extern string SetupOverlayDialogHtml(string defaultValue, int x, int y, int width, int height, int s);

public static void SetUpOverlayDialog(string defaultValue, int x, int y, int width, int height, int s)
{
#if UNITY_WEBGL && !UNITY_EDITOR
    if (Screen.fullScreen)
    {
        if( IsRunningOnEdgeBrowser() ){
            Screen.fullScreen = false;
        }else{
            HideUnityScreenIfHtmlOverlayCant();
        }
    }
    SetupOverlayDialogHtml(defaultValue,x,y,width,height, s);
#else
#endif
}

修改WebGLNativeInputField脚本中的OnSelect

public override void OnSelect(BaseEventData eventData)
{
    Rect rect = this.GetComponent<RectTransform>().worldRect();
    int size = (int)(this.transform.lossyScale.x * this.textComponent.fontSize);
    WebNativeDialog.SetUpOverlayDialog(this.text, (int)rect.x, (int)rect.y, (int)rect.width, (int)rect.height, size);
    StartCoroutine(this.OverlayHtmlCoroutine());
}

将插件中Plugins/WebGL文件夹下WebNativeDialog.jslib文件打开编辑，主要更改了根据输入的位置来调节动态生成的输入框的大小和位置字体等。

主要修改了SetupOverlayDialogHtml函数：

SetupOverlayDialogHtml:function(defaultValue,x,y,w,h,s){
    defaultValue = Pointer_stringify(defaultValue);
	
    if( !document.getElementById("nativeInputDialogInput" ) ){
      // setup css
      var style = document.createElement( 'style' );
      style.setAttribute('id' , 'inputDialogTextSelect');
      style.appendChild( document.createTextNode( 'nativeInputDialogInput::-moz-selection { background-color:#00ffff;}' ) );
      style.appendChild( document.createTextNode( 'nativeInputDialogInput::selection { background-color:#00ffff;}' ) );
      document.head.appendChild( style );
    }
    if( !document.getElementById("nativeInputDialog" ) ){
      // setup html
      var html = '<div id="nativeInputDialog" '+
	  'style="background:#0000003F;opacity:1;width:100%;height:100%;position:fixed;top:0%;z-index:2147483647;">' + 
               '    <input id="nativeInputDialogInput" type="text" onsubmit="" style="position:absolute;background:#FFFFFF7F;">' + 
               '    <div style="margin-top:10px">' + 
               '      <input id="nativeInputDialogCheck" type="checkBox" style="display:none;">' + 
               '    </div>' + 
               '</div>';
      var element = document.createElement('div');
      element.innerHTML = html;
      // write to html
      document.getElementById("gameContainer").appendChild(element);
		//document.body.appendChild(element);
      // set Event
      var okFunction = 
        'document.getElementById("nativeInputDialog" ).style.display = "none";' + 
        'document.getElementById("nativeInputDialogCheck").checked = false;' +
        'document.getElementById("#canvas").style.display="";'+
		'event.stopPropagation();';
      var cancelFunction = 
        'document.getElementById("nativeInputDialog" ).style.display = "none";'+ 
        'document.getElementById("nativeInputDialogCheck").checked = true;'+
        'document.getElementById("#canvas").style.display="";';
	  var inputClickFunc = 'event.stopPropagation();';
      var inputField = document.getElementById("nativeInputDialogInput");
      inputField.setAttribute( "onkeyup" , 'if(event.keyCode==13) {'+ okFunction +'} else if(event.keyCode==27){'+cancelFunction+'}'  );
      inputField.setAttribute( "onclick" , inputClickFunc );
      var okBtn = document.getElementById("nativeInputDialog");
      okBtn.setAttribute( "onclick" , okFunction );
    }
    var dinput = document.getElementById("nativeInputDialogInput");
	dinput.value= defaultValue;
	dinput.style.left = x+'px';
	dinput.style.top = y+'px';
	dinput.style.width = w+'px';
	dinput.style.height = h+'px';
	dinput.style.fontSize = s+'px';
	dinput.focus();

    document.getElementById("nativeInputDialog" ).style.display = "";
  }

3、输入结果反馈

基于原插件内容，此部分没有修改

 

工程文件：

https://download.csdn.net/download/funilbing/10945222