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

Question

这是问题的一个小提琴:

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

Answer 1

画布和鼠标.

画布和尺寸.

画布有两个大小属性,一个表示以像素为单位的分辨率,另一个以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();

老鼠.

鼠标坐标以像素为单位.

使用一个事件处理程序来处理所有鼠标IO

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's鼠标事件.

所以要添加上面的鼠标事件监听器

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

这应该让您的绘图应用程序按您的需要工作.

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 轻松获取。

我相信我已经在这里编辑了小提琴：https ://jsfiddle.net/y5cu0pxf/4/