这个绘图应用程序可以在我的笔记本电脑上完美运行。在不同的屏幕尺寸上进行测试,绘制的线条与光标不对齐。我认为我将不得不应用一些缩放机制。

// DRAWING FUNCTIONALITY
var canvas, ctx, painting = false,
    previousMousePos;

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    }
  };
  // Sender drawing function.
  function drawLineImmed(x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = 'white';
    ctx.stroke();
  };
  // Receiver drawing function.
  function drawLineTwo(data) {
    ctx.beginPath();
    ctx.moveTo(data.px, data.py);
    ctx.lineTo(data.mx, data.my);
    ctx.strokeStyle = 'white';
    ctx.stroke();
  };
  // Get draw data. Pass to receiver drawing function.
  socket.on('draw', function(data) {
    drawLineTwo(data);
  });
  // Sender emit drawing data.
  function mouseMove(evt) {
    var mousePos = getMousePos(canvas, evt);
    if (painting) {
      drawLineImmed(previousMousePos.x, previousMousePos.y, mousePos.x, mousePos.y);
      socket.emit('draw', {px:previousMousePos.x, py:previousMousePos.y, mx:mousePos.x, my:mousePos.y}, page);
      previousMousePos = mousePos;
    };
  };
  function clicked(evt) {
    previousMousePos = getMousePos(canvas, evt);
    painting = true;
  };
  function release(evt) {
    painting = false;
  };
  function leave(evt) {
    painting = false;
  };
  $(document).ready(function() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    painting = false;
    canvas.addEventListener('mousemove', mouseMove, false);
    canvas.addEventListener('mousedown', clicked);
    canvas.addEventListener('mouseup', release);
    canvas.addEventListener('mouseleave', leave);
  });


// CSS

#canvas {
  border-radius: 2px;
  background-color: rgb(33,37,43);
  position: fixed;
  left: 1.7%;
  top: 3%;
  border-radius: 8px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  width: 80%;
}


相对于什么必须缩放?

最佳答案

正如Blindman67指出的,画布有2种尺寸。定义画布中像素数的大小(canvas.widthcanvas.height)以及由CSS设置的显示画布的大小。

我调整大小的正常方式是这样的

function resizeCanvasToMatchDisplaySize(canvas) {

  // look up the size the canvas is displayed
  var desiredWidth = canvas.clientWidth;
  var desiredHeight = canvas.clientHeight;

  // if the number of pixels in the canvas doesn't match
  // update the canvas's content size.
  if (canvas.width != desiredWidth || canvas.height != desiredHeight) {
    canvas.width = desiredWidth;
    canvas.height = desiredHeight;
  }
}


然后在绘图之前调用它(例如可以在mouseMove中)。这样,仅在尺寸更改时才清除画布。

您也可以使用canvas.getBoundingClientRect()it is technically more correct,但它也会生成垃圾,对我而言,这通常是不好的。对于我来说,对您来说,这没关系。

每当您设置/更改画布的大小时,有关它的所有内容都会重置并清除。这意味着,更改大小时,其他设置(例如fillStylelineWidth等)都将重置为默认值。如果您希望某些内容在调整大小之前保持不变,则需要以某种方式进行记录。想法包括跟踪到目前为止绘制的所有内容,并在调整大小后再次绘制。另一个想法是使用类似的方法将当前画布复制到另一个屏幕外画布

 // make a new canvas if we haven't already
 offscreenCanvas = offscreenCanvas || document.createElement("canvas");

 // make the offscreen canvas match the size of the onscreen canvas
 offscreenCanvas.width = onscreenCanvas.width;
 offscreenCanvas.height = onscreenCanvas.height;

 // get a context for a offscreen canvas
 offscreenCanvasContext = offscreenCanvas.getContext("2d");

 // clear it just in case it's old and the size didn't change.
 offscreenCanvasContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

 // copy the onscreen canvas to the offscreen canvas
 offscreenCanvasContext.drawImage(onscreenCanvas, 0, 0);

 // resize the onscreen canvas
 reiszeCanvasToMatchDisplaySize(onscreenCanvas);

 // copy back the old content
 onscreenCanvasContext.drawImage(offscreenCanvas, 0, 0);

 // free the memory used by the offscreen canvas
 offscreenCanvas.width = 0;
 offscreenCanvas.height = 0;


当然,如果旧的画布尺寸较大,您将最终裁剪内容。

另外,如果画布的drawingBuffer大小(像素数)与显示大小you can do the math to make the mouse position still match不匹配

关于javascript - HTML canvas绘图应用程序在不同的屏幕尺寸上中断,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39419013/

10-12 12:47
查看更多