Question

我正在使用HTML5画布编写一个简单的图像处理/绘图工具。它目前适用于单个画布层。

我正在尝试添加“预览”功能，这样当光标在画布上移动时，不显示光标，而是显示在该位置单击鼠标的效果。例如，如果在主画布中加载了图像并且所选的globalCompositeOperation处于饱和状态，则可以通过将鼠标移动到不同的部分来预览图像的外观。预览是当前工具的大小，因此如果它是圆形工具，半径为5，您将看到为该圆覆盖的任何内容渲染的效果。如果您不点击，则只能看到预览。如果单击向下，效果将应用于预览中显示的区域中的画布。

我的主画布上有一个用于mousemove，mouseup和mousedown的事件监听器。这是我当前的代码（JS和CSS）。有两个画布标签（下面的代码中未显示）。一个是带有上下文ctx的主画布，另一个是鼠标预览画布，带有上下文mouseCtx。 CS指的是全局“Canvas State”对象。

代码现在正常运行，除了鼠标预览出现在主画布上的任何元素后面（我期望给定较低的z-index）。当我点击放置一个元素时，它会弹出所有内容。但是，如果我将鼠标悬停在更高的Z-index上，则根本不会在主画布上显示任何内容。

我错过了一些愚蠢的事情，还是我实施此功能的策略？非常感谢任何朝着正确方向的提示。

canvas.addEventListener('mousemove', mouseTrack);
canvas.addEventListener('mousedown', mouseTrack);
canvas.addEventListener('mouseup', mouseTrack);

function mouseTrack(e) {
  (e.type === 'mousedown') ? CS.isDrawing = true: 0;
  (e.type === 'mouseup') ? CS.isDrawing = false: 0;
  let mouseParams = {
    x: e.layerX,
    y: e.layerY,
    movArr: [e.movementX, e.movementY],
    windowArr: [e.clientX, e.clientY]
  };
  if (CS.isDrawing === false) {
    mouseCtx.clearRect(0, 0, mouseLayer.width, mouseLayer.height);
    mouseCtx.drawImage(canvas, 0, 0); //copy the current canvas
    console.log((CS.isDrawing === true) + " is drawing");
    mouseCtx.strokeStyle = CS.strokeS || randomRGBA();
    mouseCtx.fillStyle = CS.fillS || randomRGBA();
    mouseCtx.globalAlpha = CS.lOpacity;
    mouseCtx.beginPath(); //draw the thing on the current canvas
    switch (CS.tool) {
      case 'tBrush':
        drawBrush(mouseParams, mouseCtx, CS.brush, CS.brushSize);
        break;
      case 'tLine':
        drawLine(mouseParams, mouseCtx);
        break;
      case 'tCurve':
        drawBezier(mouseParams, mouseCtx);
        break;
      case 'tCircle':
        drawCircle(mouseParams, mouseCtx);
        break;
      case 'tSquare':
        drawSquare(mouseParams, mouseCtx);
        break;
    }
  } else {
    ctx.drawImage(mouseLayer, 0, 0);
  }
}

canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  border: 2px solid green;
  outline: none;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  cursor: none;
  z-index: 1;
}
canvas.mouseOverlay {
  position: absolute;
  left: 0px;
  top: 0px;
  border: 2px solid green;
  outline: none;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  cursor: none;
  z-index: 0;
}

Answer 1

可能发生的情况是，您的预览画布会阻止事件在主画布上被触发。您是否检查过主画布上的mousedown事件是否被触发？如果确实没有被解雇，请尝试将pointer-events:none;添加到canvas.mouseOver css（z-index更高）。

注意：如果您需要支持旧版本的IE

，这可能是一个糟糕的解决方案

HTML5 Canvas Layer Display

1 个答案: