Question

在画布上获取鼠标坐标始终有效，除非我必须滚动然后出错。在画布上，y最终会成为负数。这是我的代码：

代码块创建画布：

var width = (document.getElementById('assessmentSectionForm' + platform).clientWidth);
        var height = Math.round(theSection.thePicture.ySize * (width / theSection.thePicture.xSize))
        var canvas = buildCanvas(Math.round(width), height, false, true);
        //var canvas = document.getElementById('assessmentImage');
        var ctx = canvas.getContext("2d");
        _context = ctx;
        _canvas = canvas;
        canvas.addEventListener("mousedown", relMouseCoords, false);

函数获取坐标：

function relMouseCoords(event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var sect = _currentSection;
    var currentElement = this;

    do {
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    } while (currentElement = currentElement.offsetParent)

    if (event.pageX || event.pageY) { 
        canvasX = event.pageX - totalOffsetX;
        canvasY = event.pageY - totalOffsetY;
    }

    //alert( 'x: ' + canvasX + '         y: ' + canvasY);
    for (var x = 0; x < _currentSection.allHotSpots.length; x++) {
        if (_currentSection.allHotSpots[x].myPicZoom === _currentPicZoomCode) {
            scaleTheHotSpot(_currentSection.allHotSpots[x], _currentSection.thePicture);
        }
    }

    for (var i = 0; i < _currentSection.allHotSpots.length; i++) {
        if (canvasX > _currentSection.allHotSpots[i].topLeft[0] &&
            canvasX < _currentSection.allHotSpots[i].bottomRight[0] &&
            canvasY > _currentSection.allHotSpots[i].topLeft[1] &&
            canvasY < _currentSection.allHotSpots[i].bottomRight[1] &&
            _currentSection.allHotSpots[i].myPicZoom === _currentPicZoomCode) {...

其余的relMouseCoords是无关紧要的，因为在我到达切断位置之前鼠标坐标应该是正确的。为什么这段代码不能用于滚动？看起来应该如此。我是从This stack overflow answer.得到的。值得一提的是我正在构建一个Telerik Mobile应用程序，但是我发现大多数时候javascript的工作方式与在网页中的工作方式相同。如果此代码中没有明显的错误原因，我可能最好询问Telerik论坛。

Answer 1

您可以使用event.pageX而不是event.layerX来返回事件发生的元素的坐标值。这样你就不必担心偏移以及窗口可能发生的任何其他事情。

请注意，不建议将pageX / Y和layerX / Y用于制作，因为此时没有人知道它们会发生什么。

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent.layerX

＆＃13;

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.addEventListener('mousedown', function(e) {
  alert("X: " + e.layerX + ' Y: ' + e.layerY);
  })

＆＃13;

canvas {
  border: 1px solid;
  }

＆＃13;

滚动会弄乱我的画布鼠标坐标 - Javascript Telerik Mobile

1 个答案: