鼠标光标与画布不匹配 [英] Mouse cursor doesn't match with canvas

问题描述

我有问题：当我在画布上绘制线条时，看起来鼠标位置与画布位置不匹配，因此每当绘制时，我的光标和绘制线之间都有一定距离..帮助我这个问题，这里是我的代码：

I have question: when I'm drawing a line in canvas, it seems the mouse position doesn't match with the canvas position, so whenever I draw, there is some distance between my cursor and the drawing line .. please help me with this problem, here is my code :

$(document).ready(function(){

        context = document.getElementById('canvasInAPerfectWorld').getContext("2d");


        $('#canvasInAPerfectWorld').mousedown(function(e){
          var mouseX = e.pageX - this.offsetLeft;
          var mouseY = e.pageY - this.offsetTop;

          paint = true;
          addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
          redraw();
        });

        $('#canvasInAPerfectWorld').mousemove(function(e){ 
          if(paint){
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
          }
        });


        $('#canvasInAPerfectWorld').mouseup(function(e){
          paint = false;
        });

        $('#canvasInAPerfectWorld').mouseleave(function(e){
          paint = false;
        });         

});


    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;

    function addClick(x, y, dragging)
    {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
    }   

    function clear_canvas(){
        //alert('masuk claear');
        context.clearRect(0,0,context.canvas.width,context.canvas.height);  

    }

    function redraw(){        

      context.strokeStyle = "#df4b26";
      context.lineJoin = "round";
      context.lineWidth = 5;

      for(var i=0; i < clickX.length; i++) {        
        context.beginPath();
        if(clickDrag[i] && i){
          context.moveTo(clickX[i-1], clickY[i-1]);
         }else{
           context.moveTo(clickX[i]-1, clickY[i]);
         }
         context.lineTo(clickX[i], clickY[i]);
         context.closePath();
         context.stroke();
      }
    } 

推荐答案

可以遵循markE答案中的解决方案（也会在 此处 中找到）。

You could follow the solution in markE's answer (also found here).

或者如果您的布局允许，您可以执行以下操作

Or you could do the following if your layout allows

• 将画布元素设置为


• 使用 layerX 和 layerY 读取鼠标位置

• Set canvas element to position relative
• Use layerX and layerY to read the mouse position

这种方法提供了更简单的代码。

This approach gives a little simpler code.

受填充和边框厚度的影响（如果使用任何值，则需要扣除）。

Both methods will be affected by padding and border thickness (they need to be subtracted if any is used). If you want border/padding it's better to wrap the canvas in a div and then style the div instead.

var c = document.querySelector("canvas"),
    ctx = c.getContext("2d");

ctx.font = "bold 16px sans-serif";

c.onmousemove = function(e) {
  
  var x = e.layerX,
      y = e.layerY;

  ctx.clearRect(0, 0, 300, 20);
  ctx.fillText("x: " + x + ", y: " + y, 10, 16);
};

div {padding:20px}
canvas {background:#eee; position:relative}

<div><div><canvas></canvas></div></div>

var c = document.querySelector("canvas"),
    ctx = c.getContext("2d");

ctx.font = "bold 16px sans-serif";

c.onmousemove = function(e) {
  
  var rect = this.getBoundingClientRect(),
      x = e.clientX - rect.left,
      y = e.clientY - rect.top;

  ctx.clearRect(0, 0, 300, 20);
  ctx.fillText("x: " + x + ", y: " + y, 10, 16);
};

div {padding:20px}
canvas {background:#eee; position:relative}

<div><div><canvas></canvas></div></div>

这篇关于鼠标光标与画布不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！