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

Question

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

点击画布左上角时记录的X和Y坐标是X:324,Y:483，但理论上应该是X:650,Y:587，点击右下角时记录的坐标是@ 987654323@，理论上应该是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>

Answer 1

我认为问题的出现是因为 offsetX 和 offsetY 与被点击的项目相关联。在这种情况下，无论“元素”是什么。如果单击事件直接绑定到画布，我认为您的代码会起作用。

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

Answer 2

• 首先通过从客户端坐标中减去元素的位置，使 x 和 y 相对于画布元素本身
• 然后减去调整后的xfrom宽度，yfrom高度
• 如果您需要绝对位置，请添加偏移量

示例修改：

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>