html5 canvas - JavaScript-将鼠标X和Y位置存储在变量中，并在鼠标移动时不断更新它们

html5 canvas - JavaScript- storing the mouse X and Y positions in variables, and continuously updating them as the mouse is moved

本文关键字：鼠标 移动 更新 变量 canvas JavaScript- html5 存储 位置      更新时间：2023-09-26

我有一个正在显示许多图像的HTML5画布。有些图像是可拖拽的，有些则不能。我使用KineticJS库的本地副本添加了可拖动功能(我使用本地副本，因为有一两个函数我想稍微编辑)。

我现在要做的是创建几个JS变量来存储光标的当前位置，无论它是"在"画布上。我希望能够做到这一点的原因是，这样我就可以检测光标在哪里，当用户拖动一个可拖动的图像，并检查他们是否已经拖动到正确的位置。

我写了下面的函数来做到这一点:

function getMousePosition(mouseX, mouseY){
    mouseX = e.clientX;
    mouseY = e.clientY;
    console.log("mouseX = " + mouseX);
    console.log("mouseY = " + mouseY);
}

我从KineticJS _mousemove函数中调用这个函数，所以这个函数现在看起来像这样:

_mousemove: function(evt) {
    this._setUserPosition(evt);
    var dd = Kinetic.DD;
    var obj = this.getIntersection(this.getUserPosition());
    getMousePostion(mouseX, mouseY);
    if(obj) {
        var shape = obj.shape;
        if(shape) {
            if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
                if(this.targetShape) {
                    this.targetShape._handleEvent('mouseout', evt, shape);
                    this.targetShape._handleEvent('mouseleave', evt, shape);
                }
                shape._handleEvent('mouseover', evt, this.targetShape);
                shape._handleEvent('mouseenter', evt, this.targetShape);
                this.targetShape = shape;
            }
            else {
                shape._handleEvent('mousemove', evt);
            }
        }
    }
    /*
     * if no shape was detected, clear target shape and try
     * to run mouseout from previous target shape
     */
    else if(this.targetShape && (!dd || !dd.moving)) {
        this.targetShape._handleEvent('mouseout', evt);
        this.targetShape._handleEvent('mouseleave', evt);
        this.targetShape = null;
    }
    // start drag and drop
    if(dd) {
        dd._startDrag(evt);
    }
}

我遇到的问题是，当我在浏览器中查看页面并将光标移动到画布上时，每次移动光标都会得到Firebug控制台错误:"getmouseposition未定义"。有些错误只是这样说，有些错误旁边还有一个小的"+"。

如果我展开旁边有"+"的错误之一，我得到以下附加信息:

_mousemove()kinetic.js (line 3443)
evt = mousemove clientX=15, clientY=229
(?)()kinetic.js (line 3417)
evt = mousemove clientX=15, clientY=229

每个可扩展的错误显示clientX和clientY的不同数字，这表明我的函数清楚地得到了x &光标在画布上移动时的Y坐标。所以我想知道的是，为什么我得到的错误告诉我，getMousePosition没有定义?

您正在尝试获取不存在的对象的属性，例如e。你应该传递一个事件对象，而不是传递mouseX和mouseY给函数。

//you're passing parameters that don't exist in _mousemove
function getMousePosition(mouseX, mouseY){
    mouseX = e.clientX; //and trying to use e, which doesn't exist
    mouseY = e.clientY;
    //also passed parameters aren't meant to be used as local variables like this
    console.log("mouseX = " + mouseX);
    console.log("mouseY = " + mouseY);
}

将您传递的参数更改为事件对象，并创建mouseX和mouseY作为局部变量，它应该可以工作。另一个非常大的问题是，在_mousemove你调用函数getMousePostion。注意拼写。你忘了一个"i"。

function getMousePosition(e){
    var mouseX = e.clientX;
    var mouseY = e.clientY;
    console.log("mouseX = " + mouseX);
    console.log("mouseY = " + mouseY);
}
_mousemove: function(evt) {
    ...
    getMousePosition(evt);
    ...
相关文章：