如何在HTML canvas元素之外绘制？

Question

我有一个HTML Canvas元素,并实施捕获的刷子mousedown,mousemove和mouseupcanvas元素的事件.这一切都适用于在画布上绘图.但是,如果你的鼠标在画笔中间离开,我不认为我不喜欢你不能继续绘画.它只是削减它.这个人非常不宽容,在我看来并不是非常人性化.

如果打开Microsoft Paint并开始使用画笔或椭圆或其他东西进行绘制,只要在画布中开始,就可以将鼠标拖动到屏幕上的任何位置,并在任何地方重新进入画布.例如,它还可以轻松地在角落中绘制四分圆,因为您可以将椭圆工具拖离屏幕.我希望这是有道理的.

无论如何,我想知道是否有办法用HTML5画布实现这一点,或者我将如何实现这种事情.用户永远不必真正看到那边的任何东西; 它主要只是一个可用性功能.

编辑:很多这些解决方案的问题是如何处理坐标.目前我的画布位于屏幕中间,画布的左上角是(0, 0)右下角(500, 500).还必须考虑坐标的翻译工作.

编辑2:我发现显然你可以画出画布边界就好了.例如,您可以提供负宽度,高度和坐标,canvas元素可以很好地处理它.所以基本上解决方案可能只涉及捕捉文件的mousemove和mouseup,只是平移x,并y在画布的左上角开始.

Answer 1

这是一个非常粗略的初稿，说明如何侦听窗口而不是画布上的鼠标事件以便能够连续绘制：

var logger = document.getElementById("logger"),
  mState = document.getElementById("mState"),
  mX = document.getElementById("mX"),
  mY = document.getElementById("mY"),
  cX = document.getElementById("cX"),
  cY = document.getElementById("cY"),
  c = document.getElementById("canvas"),
  ctx = c.getContext("2d");

var mouse = {
  x: 0,
  y: 0,
  state: ""
};

function printCanvasLocation() {
  var b = c.getBoundingClientRect();
  cX.innerHTML = b.top;
  cY.innerHTML = b.left;
}

function setState(mouseE, state) {
  mouse.x = mouseE.clientX;
  mouse.y = mouseE.clientY;

  mX.innerHTML = mouseE.clientX;
  mY.innerHTML = mouseE.clientY;
  if (state) {
    mState.innerHTML = state;
    mouse.state = state;
  }
}

window.addEventListener("mousedown", function(mouseE) {
  setState(mouseE, "down");
});

window.addEventListener("mouseup", function(mouseE) {
  setState(mouseE, "up");
});

window.addEventListener("mousemove", function(mouseE) {
  var offset = c.getBoundingClientRect();

  var fix = {
    x1: (mouse.x - offset.left),
    y1: (mouse.y - offset.top),
    x2: (mouseE.clientX - offset.left),
    y2: (mouseE.clientY - offset.top)
  };

  if (mouse.state === "down") {
    ctx.moveTo(fix.x1, fix.y1);
    ctx.lineTo(fix.x2, fix.y2);
    ctx.strokeStyle = "#000";
    ctx.stroke();
  }
  setState(mouseE);
});

window.addEventListener("resize", function() {
  printCanvasLocation();
});

printCanvasLocation();

            .center {

              text-align: center;

            }

            canvas {

              background-color: lightblue;

            }

<main>
  <div class="center">
    <canvas id="canvas" width="128" height="128">If you can see me, you should update your browser</canvas>
  </div>
  <div id="logger" role="log">
    <span>State: </span><span id="mState">Unknown</span>
    <span>X: </span><span id="mX">Unknown</span>
    <span>Y: </span><span id="mY">Unknown</span>
    <span>Canvas X: </span><span id="cX">Unknown</span>
    <span>Canvas Y: </span><span id="cY">Unknown</span>
  </div>
</main>