JavaScript - 在画布上绘画时，鼠标位置错误

Question

以下是问题的 JSFiddle 示例：

https://jsfiddle.net/y5cu0pxf/

我已经搜索和尝试了很多，但找不到问题所在。我只想让画笔在鼠标单击的位置准确地绘制，但由于某种原因而偏移。

有什么想法吗？

以下是代码：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){

  var reader = new FileReader();

  reader.onload = function(event){

    var img = new Image();

    img.onload = function(){

      canvas.width = window.innerWidth * 0.5;
      canvas.height = window.innerHeight;

      var hRatio = canvas.width / img.width;
      var vRatio =  canvas.height / img.height;
      var ratio = Math.min (hRatio, vRatio);
      var centerShift_x = (canvas.width - (img.width * ratio)) / 2;
      var centerShift_y = (canvas.height - (img.height * ratio)) / 2;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, img.width, img.height,
                    centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
    }

    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

var isDrawing;
var rect = canvas.getBoundingClientRect();
var offsetX = rect.left;
var offsetY = rect.top;

canvas.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX - offsetX, e.clientY - offsetY);
};
canvas.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.clientX - offsetX, e.clientY - offsetY);
    ctx.stroke();
  }
};
canvas.onmouseup = function() {
  isDrawing = false;
};

- numberjak

---

你算出来它偏移了多少了吗？ - Carcigenicate

事件对象不是给出相对于页面的位置吗？- offsetX 这一部分是否必要？尝试去掉它。 - Carcigenicate

Answer 1

Canvas和鼠标

Canvas和大小

Canvas有两个尺寸属性，一个表示像素分辨率，另一个指定CSS单位的显示尺寸。两者互相独立。

// HTML <canvas id = "myCan"><canvas>
// To set the resolution use the canvas width and height properties
myCan.width = 1024;
myCan.height = 1024;
// To set the display size use the style width and height
myCan.style.width = "100%"; // Note you must post fix the unit type %,px,em
myCan.style.height = "100%";

默认情况下，画布分辨率设置为300 x 150像素。画布的显示尺寸取决于布局和CSS规则。

当渲染到画布2D上下文时，您将使用像素坐标而不是样式坐标进行渲染。

要获取画布的位置

var canvasBounds = myCan.getBoundingClientRect();

鼠标

鼠标坐标以像素为单位。

使用一个事件处理程序来处理所有的鼠标输入输出。

const mouse = {
    x: 0, y: 0,                        // coordinates
    lastX: 0, lastY: 0,                // last frames mouse position 
    b1: false, b2: false, b3: false,   // buttons
    buttonNames: ["b1", "b2", "b3"],   // named buttons
}
function mouseEvent(event) {
    var bounds = myCan.getBoundingClientRect();
    // get the mouse coordinates, subtract the canvas top left and any scrolling
    mouse.x = event.pageX - bounds.left - scrollX;
    mouse.y = event.pageY - bounds.top - scrollY;

要得到正确的画布坐标，您需要将鼠标坐标缩放以匹配画布分辨率坐标。

// first normalize the mouse coordinates from 0 to 1 (0,0) top left
// off canvas and (1,1) bottom right by dividing by the bounds width and height
mouse.x /= bounds.width; 
mouse.y /= bounds.height; 

// then scale to canvas coordinates by multiplying the normalized coords with the canvas resolution

mouse.x *= myCan.width;
mouse.y *= myCan.height;

然后只需获取您感兴趣的其他信息即可。

    if (event.type === "mousedown") {
         mouse[mouse.buttonNames[event.which - 1]] = true;  // set the button as down
    } else if (event.type === "mouseup") {
         mouse[mouse.buttonNames[event.which - 1]] = false; // set the button up
    }
}

拖动时捕获鼠标（按下按钮）

当处理像使用画布的绘图应用程序的鼠标时，无法直接将事件侦听器添加到画布上。如果这样做，当用户移出画布时，您会失去鼠标控制权。如果在离开画布时用户释放鼠标，则您将不知道该按钮已松开。结果是按钮被卡在按下状态。（就像你代码示例中的情况）

要捕获鼠标并获取所有在按钮按下时发生的事件，即使用户已经移开了画布、页面或屏幕，您需要监听 document 的鼠标事件。

因此，为了添加上述鼠标事件监听器：

document.addEventListener("mousemove", mouseEvent);
document.addEventListener("mousedown", mouseEvent);
document.addEventListener("mouseup",   mouseEvent);

现在mouseEvent处理所有页面点击事件，并在按下按钮时独占鼠标以使其只对您的页面有效。

您可以通过检查event.target来确定鼠标事件是否开始在画布上。

// only start mouse down events if the users started on the canvas
if (event.type === "mousedown" && event.target.id === "myCan") {
     mouse[mouse.buttonNames[event.which - 1]] = true; 
}

事件不应该进行渲染

鼠标事件可以非常快地触发，有些设置每秒触发鼠标移动超过600次。如果您使用鼠标事件来渲染画布，则将浪费大量CPU时间，而且还会在DOM的同步合成和布局引擎之外进行渲染。

请通过requestAnimationFrame使用动画循环进行绘制。

function mainLoop(time) {
   if (mouse.b1) {  // is button 1 down?
       ctx.beginPath();
       ctx.moveTo(mouse.lastX,mouse.lastY);
       ctx.lineTo(mouse.x,mouse.y);
       ctx.stroke();
   }


   // save the last known mouse coordinate here not in the mouse event
   mouse.lastX = mouse.x;
   mouse.lastY = mouse.y;
   requestAnimationFrame(mainLoop); // get next frame
}
// start the app
requestAnimationFrame(mainLoop);

那应该能让你的绘画应用程序按照你的意愿工作。

- Blindman67

Answer 2

你正在使用CSS为画布设置静态宽度。这样做是可以的，但它会拉伸画布以适应大小。在将x和y值绘制到屏幕上之前，你需要找到它们的结果值。

示例的代码如下：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e) {

  var reader = new FileReader();

  reader.onload = function(event) {

    var img = new Image();

    img.onload = function() {

      canvas.width = window.innerWidth * 0.5;
      canvas.height = window.innerHeight;

      var hRatio = canvas.width / img.width;
      var vRatio = canvas.height / img.height;
      var ratio = Math.min(hRatio, vRatio);
      var centerShift_x = (canvas.width - (img.width * ratio)) / 2;
      var centerShift_y = (canvas.height - (img.height * ratio)) / 2;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, img.width, img.height,
        centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
    }

    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

var isDrawing;
var rect = canvas.getBoundingClientRect();
var offsetX = rect.left;
var offsetY = rect.top;

var temp = document.getElementById('imageCanvas');

canvas.onmousedown = function(e) {
  isDrawing = true;

  ctx.moveTo((e.clientX - offsetX)/(800/temp.width), (e.clientY - offsetY)/(400/temp.height));
};
canvas.onmousemove = function(e) {
  if (isDrawing) {

    ctx.lineTo((e.clientX - offsetX)/(800/temp.width), (e.clientY - offsetY)/(400/temp.height));
    ctx.stroke();
  }
};
canvas.onmouseup = function() {
  isDrawing = false;
};
window.addEventListener("scroll",function(){
 rect = canvas.getBoundingClientRect();
 offsetX = rect.left;
 offsetY = rect.top;
})

在这里，800和400是画布的计算宽度和高度，您可以使用jQuery轻松获取这些内容。

我相信我已经在这里编辑了fiddle: https://jsfiddle.net/y5cu0pxf/4/

- Donny Bridgen

---

如果你移动了屏幕，你需要更新偏移量。我已经更新了我的答案以包含这个。 - Donny Bridgen