javascript - 反转 HTML5 Canvas 上的 X 和 Y 坐标

Question

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

单击 Canvas 左上角时记录的 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>

Answer 1

• 首先通过从客户端坐标中减去元素的位置，使 x 和 y 相对于 Canvas 元素本身
• 然后从宽度中减去调整后的 x ，从 高度中减去调整后的 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>