如何将画布的原点更改为中心？ [英] How to change the origin of the canvas to the center?

问题描述

我是html和JavaScript的新手，我正在编写一个处理坐标系中的点和线的程序，但是您知道html5的画布的起源位于上角，我想要构建一个坐标系统，它的原点位于画布中心，我尝试了翻译方法并使用以下方法打印鼠标的位置（理想情况下，当鼠标位于画布中心时，我希望它显示0：0） ，但它似乎并不奏效：

  var mousePos = getMousePos（canvas1，evt）; 
 mouseX = mousePos.x; 
 mouseY = mousePos.y; 
 var message ='鼠标位置：'+ mousePos.x +'，'+ mousePos.y; 
 writeMessage（document.getElementById（canvas_prime_coor），message）; 
 
函数writeMessage（canvas，message）{
 var context = canvas.getContext（'2d'）; 
 context.clearRect（0，0，canvas.width，canvas.height）; 
 context.font ='18pt Calibri'; 
 context.fillStyle ='red'; 
 context.fillText（message，10，25）; 
 
 
函数getMousePos（canvas，evt）{
 var rect = canvas.getBoundingClientRect（）; 
 return {
 x：evt.clientX  -  rect.left，
 y：evt.clientY  -  rect.top}; 
 
  

解决方案

坐标系统，你可以使用 translate（）方法。但是，上下文的转换不会影响与元素本身绑定的鼠标坐标，因此您需要分别跟踪它。

您必须手动跟踪翻译并补偿鼠标坐标：

  var transX = canvas.width * 0.5，
 transY = canvas.height * 0.5; 
 
 context.translate（transX，transY）; 
  

现在的问题是您处理两个不同的头寸：

相对于元素的实际鼠标位置

b）所需的坐标对于上下文

如果您翻译并使用鼠标位置，并且转换为中心，则会发生以下情况：

可以说你的鼠标坐标是30,30。如果您在翻译的上下文中使用此坐标，图形将以transX + 30，transY + 30结尾，这不是您想要的。

为了弥补这一点，您需要以跟踪当前的转换并将其减去鼠标坐标：

  function getMousePos（canvas，evt）{
 var rect = canvas.getBoundingClientRect（）; 
 return {
 x：evt.clientX  -  rect.left  -  transX，
 y：evt.clientY  -  rect.top  -  transY 
}; 
} 
  

FIDDLE

希望这有助于您！

I'm new to html and JavaScript, I am writing a program dealing with points and lines in a coordinate system, but as you know the origin of a canvas for html5 is at the upper corner, I want to build a coordinate system with its origin at the center of the canvas, I have tried the translate method and use the following method to print where my mouse is (ideally, I want it to display 0 : 0 when the mouse is at the center of the canvas), but it does not seem to work:

var mousePos = getMousePos(canvas1, evt);
mouseX = mousePos.x;
mouseY = mousePos.y;
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(document.getElementById("canvas_prime_coor"), message);

function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'red';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top};
}

解决方案

To change the coordinate system you can use the translate() method. However, transformation of the context does not affect the mouse coordinates which are bounded to the element itself so you need to keep track of this separately.

You will have to manually track the translation and compensate for the mouse coordinates:

var transX = canvas.width * 0.5,
    transY = canvas.height * 0.5;

context.translate(transX, transY);

The problem now is that you deal with two different positions:

a) The actual mouse position relative to element
b) The coordinate needed to be correct for the context

If you translate and then use the mouse position, and you translate to center the following would happen:

Lets say your mouse coordinate was 30,30. If you use this coordinate on a translated context the graphics would end up at transX + 30, transY + 30 which is not what you want.

To compensate for this you need to keep track of current translation and subtract that to the mouse coordinates:

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left - transX,
        y: evt.clientY - rect.top - transY
    };
}

FIDDLE

Hope this helps!

这篇关于如何将画布的原点更改为中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！