Unity WebGL 修改鼠标指针

 

问题描述：现手上项目是UnityWebGL+Vue进行开发，开发时发现源生的web程序中的按钮、超链接等，鼠标移动上去时，鼠标指针会变为手型,移出时又会恢复成指针。但是Unity发布出WebGL程序中的UI按钮或其他交互控件是不具备这功能的，产品经理要求实现该需求。

解析思路：这里以UGUI的Button为例，通过重写OnPointerEnter(PointerEventData eventData)和OnPointerExit(PointerEventData eventData)来向Web程序发出消息，通知Web程序当前鼠标的状态。Web程序收到相应的消息之后，再修改鼠标指针形状

实现过程：

1.重写事件接口，发送鼠标状态消息。然后发布到WebGL

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ChangeMouse : Button
{
    public override void OnPointerEnter(PointerEventData eventData)
    {
        Application.ExternalCall("ChangeMouse2Pointer", string.Empty);
    }

    public override void OnPointerExit(PointerEventData eventData)
    {
        Application.ExternalCall("ChangeMouse2Default", string.Empty);
    }
}

2.修改Index.html文件，在【Script】标签下添加如下代码

 var canvas = document.getElementById("#canvas");
 var pointerDiv = document.getElementById("#pointer");
 var defaultDiv = document.getElementById("#default");	  
 //修改鼠标指针为手型
 function ChangeMouse2Pointer(arg0)
 {
    canvas.style.cursor = pointerDiv.style.cursor;
 }
	  
 //修改鼠标指针为默认
 function ChangeMouse2Default(arg0)
 {
    canvas.style.cursor = defaultDiv.style.cursor;
 }

3.修改index.htm文件，在【body】标签下添加下列代码

 <div id = "#pointer" style = "cursor:pointer"></div>
 <div id = "#default" style = "cursor:default"></div>

装逼成功：现阶段已实现产品经理的需求，在鼠标移动到指定控件上，改变鼠标的指针形状，暂未发现其他问题。如果有同学有更好的解决办法或者思路，欢迎私信。关于产品/项目开发过程中发现的问题，我能解决的或不能解决的，今后都会在这里和大家鸡鸡讨论分享。