基于DOM层的光标指针替换方案

清澈淌漾

JAVASCRIPT 代码复制

在CSS里清理掉body的光标
 
body {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: none;
    overflow: hidden;

在CSS里清理掉body的光标


 


body {


    -moz-user-select: none;


    -webkit-user-select: none;


    -ms-user-select: none;


    user-select: none;


    cursor: none;


    overflow: hidden;

JAVASCRIPT 代码复制

在index中加入div标记  
<div id="cursor"></div>

在index中加入div标记  


<div id="cursor"></div>

JAVASCRIPT 代码复制

添加DOM的样式
#cursor{
    background-image: url(../img/ui/鼠标.png);
    position:absolute;
    z-index:200;
    top:50%;
    left:50%;
    width:32px;
    height:32px;
    background-size: 100%;
    animation: size 1s  infinite;
}
 
@keyframes size {
    0% {
        transform:scale(1);
    }
    50% {
        transform:scale(0.9);
    }
    100% {
        transform:scale(1);
    }
}

添加DOM的样式


#cursor{


    background-image: url(../img/ui/鼠标.png);


    position:absolute;


    z-index:200;


    top:50%;


    left:50%;


    width:32px;


    height:32px;


    background-size: 100%;


    animation: size 1s  infinite;


}


 


@keyframes size {


    0% {


        transform:scale(1);


    }


    50% {


        transform:scale(0.9);


    }


    100% {


        transform:scale(1);


    }


}

JAVASCRIPT 代码复制

添加监听
 
LIM.cursor=document.getElementById("cursor")
/////光标
 
 
TouchInput._onMouseMove = function(event) {
    const x = Graphics.pageToCanvasX(event.pageX);
    const y = Graphics.pageToCanvasY(event.pageY);
    LIM.cursor.style.left =event.pageX + "px"
    LIM.cursor.style.top = event.pageY + "px"
 
    if (this._mousePressed) {
        this._onMove(x, y);
    } else if (Graphics.isInsideCanvas(x, y)) {
        this._onHover(x, y);
    }
};

添加监听


 


LIM.cursor=document.getElementById("cursor")


/////光标


 


 


TouchInput._onMouseMove = function(event) {


    const x = Graphics.pageToCanvasX(event.pageX);


    const y = Graphics.pageToCanvasY(event.pageY);


    LIM.cursor.style.left =event.pageX + "px"


    LIM.cursor.style.top = event.pageY + "px"


 


    if (this._mousePressed) {


        this._onMove(x, y);


    } else if (Graphics.isInsideCanvas(x, y)) {


        this._onHover(x, y);


    }


};

尝试过在Scene_Base创建时加一个鼠标精灵，这样就能让鼠标和游戏缩放同步，但是总有各种BUG。
有大佬有现成的方案吗

shiroin

只是替换光标的话，有一个推荐的插件…但它是用图片替换的，不知道能不能给你带来一些参考…

背棺走的骷髅

我刚接触基础不久，添加监听第十行的等于号后少了空对观察方便点，我不知道这样对后期的影响有多少
我是从VisualBasic那边转来的，对JS了解不深