时间戳

首页 > 解决方案 > Html5 Canvas - 动态表格将画布向下推，现在绘图/图像未显示

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

问题描述

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

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

画布移动到顶部并出现绘制的图像。此外，当桌子很短时，画布可以正常工作。

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

//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>

标签： javascripthtmlcanvashtml5-canvas

解决方案

由于您的画布可以四处移动，因此您需要最新的位置，因此请尽可能在最后一刻获取。

由于您的代码在画布位于 (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
}

推荐阅读