反转HTML5画布上的X和Y坐标 [英] Invert X and Y coordinates on HTML5 canvas
问题描述
我正在使用上面有HTML5画布的界面，选择位置时需要反转X和Y坐标。我以为从选定的X位置减去画布的宽度，从选定的Y位置减去画布的高度会反转坐标，但是这样做确实很奇怪。
I am working on an interface that has a HTML5 canvas on it, and I need to invert the X and Y coordinates when you select a position. I thought that subtracting the width of the canvas from the selected X position, and subtracting the height of the canvas from the selected Y position would invert the coordinates, but it is doing some very weird things.
单击画布左上角时记录的X和Y坐标是 X：324，Y：483 ，但从理论上讲，它们应该为 X：650，Y：587 ，然后单击右下角的，记录的坐标为 X：-325，Y：- 103 ，理论上它们应为 X：0，Y：0 。附带说明一下，我确实知道单击鼠标时出现的点使用的是倒置坐标，这很好。
The X and Y coords that log when you click in the top left corner of the canvas are X:324,Y:483 but theoretically, they should be X:650,Y:587, and when you click in the bottom right corner, the logged coordinates are X:-325,Y:-103 when they theoretically should be X:0,Y:0. As a side note, I do know that the dot that appears when you click is using the inverted coordinates, and that is fine.
任何帮助，尤其是在我做错了什么谢谢！
Any help is appreciated especially if I am doing something horribly wrong. Thanks!
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 宽度y height
- 如果需要绝对位置，请重新添加偏移量
- First make the x and y relative to the canvas element itself by subtracting the position of the element from the client coordinates
- Then subtract the adjusted x from width, y from height
- If you need an absolute position, add back the offsets
修改示例：
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...
});
现场演示：
Live demo:
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>
这篇关于反转HTML5画布上的X和Y坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
