HTML 5画布坐标和浏览器像素的相关性

HTML 5 Canvas Co-Ordinates and browser pixels correlation?

本文关键字：浏览器 像素 相关性 坐标 5画 布坐标 HTML      更新时间：2023-09-26

我正试图获得HTML 5画布为我的应用程序工作作为绘图板。我面临的问题是:

绘图发生在鼠标指针的某个偏移位置。我使用Jquery .offset方法来计算画布上事件的偏移量。我注意到的另一件奇怪的事情是，虽然画布标签的宽度是150px，但从(0,10)到(150,10)绘制的一条线正好到达画布区域的中间，甚至一条从(0,10)到(250,10)的线也可见。不是"像素"计算从事件对象映射直接到画布标签的"点坐标"?还有什么是错的呢?示例代码:

 if (event.pageX || event.pageY)
 {
    event._x = event.pageX;
    event._y = event.pageY;
}
else if (event.clientX || event.clientY)
{
    event._x = event.clientX + document.body.scrollLeft
                            + document.documentElement.scrollLeft;
    event._y = event.clientY + document.body.scrollTop
                            + document.documentElement.scrollTop;
}
var canvasElem = $('#' + canvasId);
canvasOffset = canvasElem.offset();
event._x -= Math.floor(canvasOffset.left);
event._y -= Math.floor(canvasOffset.top);
////////////// CODE STRIPPED //////////////////////////////

  this.mousedown = function (ev) { 
       context.beginPath(); 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
  }; 
  // This function is called every time you move the mouse. Obviously, it only  
  // draws if the tool.started state is set to true (when you are holding down  
  // the mouse button). 
 this.mousemove = function (ev) { 
      if (tool.started) { 
         context.lineTo(ev._x, ev._y); 
         context.stroke(); 
       } 
 }; 
// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
      if (tool.started) { 
         tool.mousemove(ev); 
         tool.started = false; 
      }
}

解决

发现问题:

我使用字符串来设置画布的高度和宽度。喜欢的东西:画布。

但是我们应该总是使用数字来设置画布的高度/宽度。画布。

问题解决了

可以使用jQuery .offset()函数获得画布左上角的坐标。从鼠标事件传递的坐标中减去这些，就得到了画布上的位置。

关于您遇到的缩放问题，有两种可能的解释:

A:你使用平移，变换或缩放来改变画布的坐标系统(但是当你这样做的时候，你肯定会意识到它)

B:你正在使用CSS样式属性来改变画布的大小。画布的分辨率由<canvas> HTML标签的width和height属性决定。当你使用CSS改变画布呈现的宽度或高度时，它首先以内部分辨率绘制，然后相应地缩放以在浏览器中显示。

相关文章：