在HTML5画布上反转X和Y坐标

Invert X and Y coordinates on HTML5 canvas

本文关键字：坐标 HTML5      更新时间：2024-01-03

我正在开发一个有HTML5画布的界面，当你选择一个位置时，我需要反转X和Y坐标。我原以为从选定的X位置减去画布的宽度，从选定的Y位置减去画布高度会反转坐标，但这会做一些非常奇怪的事情。

在画布左上角单击时记录的X坐标和Y坐标是X:324,Y:483，但理论上它们应该是X:650,Y:587，在右下角单击时，记录的坐标为X:-325,Y:-103，而理论上它们应当是X:0,Y:0。顺便说一句，我知道当你点击时出现的点是使用倒置的坐标，这很好。

任何帮助都是感激的，尤其是当我做错了什么的时候。谢谢

JS:

window.fires.directive('fieldDirective', ['ScoutService', '$interval', function(ScoutService, $interval) {
    var $scope = this;
    $scope.sServ = ScoutService;
    $interval(function(){
        $scope.col = ScoutService.getAllianceColor();
    },1);
    return {
        restrict: "A",
        link: function(scope, element) {
            element.bind('mousedown', function(event) {
                var canvas = document.getElementById('field');
                var context = canvas.getContext('2d');
                if(event.offsetX !== undefined) {
                    $scope.xPos = 650 - event.offsetX;
                    $scope.yPos = 587 - event.offsetY;
                    $scope.sServ.sendLobCoords(xPos, yPos);
                } else {
                    $scope.xPos = 650 - event.layerX - event.currentTarget.offsetLeft;
                    $scope.yPos = 587 - event.layerY - event.currentTarget.offsetTop;
                    $scope.sServ.sendLobCoords(xPos, yPos);
                }
                console.log('red'+$scope.xPos + ' ' + $scope.yPos);
                canvas.width = canvas.width;
                context.arc($scope.xPos, $scope.yPos, 12, 0, Math.PI*2);
                context.fillStyle = '#FFFF00';
                context.fill();
                context.lineWidth = 3;
                context.strokeStyle = '#B2B200';
                context.stroke();
                context.closePath();
            });
        }
    };
}]);

HTML:

<canvas field-directive id="field" ng-class="{'field-red': sCtrl.fieldColor === 'red', 'field-blue': sCtrl.fieldColor === 'blue'}" width="650" height="587">Your browser does not support the HTML5 Canvas Element.  Please use a supported browser such as Google Chrome 4.0+ or FireFox 2.0+.</canvas>
  • 首先，通过从客户端坐标中减去元素的位置，使x和y相对于画布元素本身
  • 然后从宽度中减去调整后的x，从height中减去y
  • 如果您需要一个绝对位置，请添加回偏移

修改示例：

element.bind('mousedown', function(event) {
    var canvas = document.getElementById('field');
    var context = canvas.getContext('2d');
    // get element position
    var rect = canvas.getBoundingClientRect();
    // get inversed coordinates: enable code after comment if abs. pos.
    var ix = canvas.width - (event.clientX - rect.left); // + rect.left
    var iy = canvas.height - (event.clientY - rect.top); // + rect.top
    ...update $scope here etc...
});

现场演示：

var canvas = document.getElementById('field');
canvas.addEventListener('mousemove', function(event) {
  var canvas = document.getElementById('field');
  var context = canvas.getContext('2d');
  // get element position
  var rect = canvas.getBoundingClientRect();
  // get inversed coordinates: enable code after comment if abs. pos.
  var ix = canvas.width - (event.clientX - rect.left); // + rect.left
  var iy = canvas.height - (event.clientY - rect.top); // + rect.top
  // draw something
  context.clearRect(0, 0, 500, 180);
  context.fillRect(ix - 2, iy - 2, 4, 4);
});
canvas {border: 1px solid #007}
<canvas id="field" width=500 height=180></canvas>

我认为问题的出现是因为offsetX和offsetY与单击的项目绑定。在这种情况下，不管"元素"是什么。如果点击事件直接绑定到画布上，我认为你的代码会起作用。

尝试将事件绑定到画布本身，或者使用具有单击行为的元素的位置和画布的位置来进行校正计算。

相关文章：