0

我正在尝试为我的应用程序获取 HTML 5 画布作为绘图板。我面临的问题是：

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

 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; 
      }
}

解决了

发现问题：

我使用字符串来设置画布的高度和宽度。类似的东西：canvas.height = "200px";

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

这样就解决了问题。

4

1 回答 1

1

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

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

A：你使用translate、transform 或 scale来改变画布的坐标系（但当你这样做时，你肯定会意识到这一点）

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

于 2013-01-18T12:31:47.210 回答