Question

我正在将HTML5 Canvas与JavaScript结合使用。在HTML布局中，画布上方有一个动态表。表的大小不是静态的，并且在运行时会根据给定的参数而变化。我的问题是，当桌子变长时，它会将画布向下推，并且绘制的图像不再显示。我知道绘制的图像在那里，因为当我应用以下样式代码时：

canvas {
  position: absolute;
  top: 0px;
  left: 0px
}

画布移动到顶部，并且显示绘制的图像。另外，当桌子较短时，画布也可以正常工作。

我尝试在表格和画布元素上使用绝对和相对定位，但这无济于事。我尝试过获取桌子的高度，并在运行时将边距顶部应用于画布，但这没有用。我尝试过补偿，但它们也不起作用。我不知道该如何做才能使绘制的图像与canvas元素保持一致。

//declare variables
var canvas, context, flag = false;
var offsetX, offsetY;
var prevX; //initial position of mouse along x-axis
var currX; //new position of mouse along x-axis, initially set to 0
var prevY; //initial position of mouse along y axis
var currY; //new position of mouse along y axis, initially set to 0
var dot_draw = false;
var font_color = "black";


function startSignaturePad() {
  canvas = document.getElementById('signaturepad'); //get the canvas element
  if (canvas) {
    context = canvas.getContext("2d"); //get the 2d drawing context
    canvas.width = 400;
    canvas.height = 150;
    width = canvas.width;
    height = canvas.height;
  }


  function reOffset() {
    var BB = canvas.getBoundingClientRect();
    offsetX = BB.left;
    offsetY = BB.top;
  }


  reOffset();
  window.onscroll = function(e) {
    reOffset();
  }
  window.onresize = function(e) {
    reOffset();
  }


  //bind the event listeners to the canvas
  canvas.addEventListener("mousemove", function onMouseMove(e) {
    getPositionXY('move', e)
  }, false);
  canvas.addEventListener("mousedown", function onMouseDown(e) {
    getPositionXY('down', e)
  }, false);
  canvas.addEventListener("mouseup", function onMouseUp(e) {
    getPositionXY('up', e)
  }, false);
  canvas.addEventListener("mouseout", function onMouseOut(e) {
    getPositionXY('out', e)
  }, false);

}


function draw() { //function to draw a dot at a specific position - grabs and then draws the position of x and y
  context.beginPath();
  context.moveTo(prevX, prevY);
  context.lineTo(currX, currY);
  context.strokeStyle = font_color;
  context.lineWidth = font_size;
  context.stroke();
  context.closePath();
}


function erase() { //erase what is on the canvas
  var erase = confirm("Are you sure you want to erase?");
  if (erase) {
    context.clearRect(0, 0, width, height);
  }
}


function getPositionXY(mouse, e) {
  if (mouse == 'down') {
    prevX = currX; //reset previous position of x and y
    prevY = currY;
    currX = (e.clientX - canvas.offsetLeft) < (e.clientX - canvas.offsetX) ? e.clientX - canvas.offsetX : e.clientX - canvas.offsetLeft; //set new position of x and y
    currY = (e.clientY - canvas.offsetTop) < (e.clientY - canvas.offsetY) ? e.clientY - canvas.offsetY : e.clientY - canvas.offsetTop;

    flag = true;
    dot_draw = true;
    if (dot_draw) { //draw path while mouse is pressed down
      context.textBaseline = "hanging";
      context.beginPath();
      context.fillStyle = font_color;
      context.arc(currX, currY, 2, 0, 2 * Math.PI);
      context.closePath();
      dot_draw = false;
    }
  }
  if (mouse == 'up' || mouse == "out") {
    flag = false; //when mouse is released do nothing
  }
  if (mouse == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = (e.clientX - canvas.offsetLeft) < (e.clientX - canvas.offsetX) ? e.clientX - canvas.offsetX : e.clientX - canvas.offsetLeft;
      currY = (e.clientY - canvas.offsetTop) < (e.clientY - canvas.offsetY) ? e.clientY - canvas.offsetY : e.clientY - canvas.offsetTop;
      draw();
    }
  }
}

canvas {
  position: absolute;
  top: 0px;
  left: 0px
}

<div>
  <table>
    <!-- some code -->
  </table>
</div>
<div id="sigCanvas">
  <canvas id="signaturepad" style="border:1px solid;"></canvas>
</div>

Answer 1

由于您的画布可以移动，因此您需要最新的位置，因此请在尽可能快的时刻获取它。

由于您的代码在画布处于（0,0）时有效，因此只需添加调用reOffset（）和getPositionXY（）的开始可能会解决问题。

如果没有，这是我相对于画布定位鼠标单击的方式：

function locateMouse(evnt)
{
 var x = evnt.pageX;
 var y = evnt.pageY;
 var c = canvas.getBoundingClientRect();
 x = Math.floor(x) - c.left;
 y = Math.floor(y) - c.top;
 /// then use x and y however you want
}

HTML5 Canvas-动态表格将画布向下推，现在绘制/图像未显示

1 个答案: