javascript - 在 Canvas 上绘图并在可内容编辑的 div 中写入，将绘图保持在 div 顶部

Question

我正在编写一种所见即所得的工具，我可以在其中同时书写和绘画。 我需要将绘图放在文字的“上方”。

书写元素是一个内容可编辑的div，绘图是一个canvas。要从绘图切换到发短信，反之亦然，有一个按钮，实际上可以切换两个元素的 zIndex。一切正常，但为了使其正常工作，我需要将绘图始终放在顶部，如果我切换 zIndex，则不会发生这种情况。如果我不将 zIndex 切换回 写入模式，我将无法再访问内容可编辑的 div(这将位于后面) canvas)，但如果我切换它，绘图就会变成背景(这一定不会发生)。如何解决这个问题？

当您按下绘图/打字按钮时我使用的代码是:

    function switchDrawingText(){

    var tempTextBox = document.getElementById("textBox");
    var tempCanvas = document.getElementById("toolCanvas");

    tempCanvas.style.zIndex *= -1;
    tempTextBox.style.zIndex *= -1;

}

我也尝试使用 pointer-events: none; 但没有运气。

在绘图模式下结果没问题:

但是当我切换回书写模式时，canvas会进入后台，这不是我需要的:

感谢您的帮助。

Answer 1

您可以将 Canvas 设置为pointer-events: none;然后，您必须在 Canvas 顶部放置一个与 Canvas 大小相同的div。该 div 将接收鼠标事件而不是 Canvas ，但您仍将绘制 Canvas 。因此，您将拥有带有 zIndex 1 的内容可编辑 div、用于接收鼠标事件的 div zIndex 2 以及带有 zIndex 3 的 Canvas 。

canvas.style.zIndex = 3;
divForWritting.style.zIndex = 1;
forMouseEvents.style.zIndex = 2;

现在用户可以绘制 Canvas 了。如果您想让用户在 contenteditable div 上书写，只需将 contenteditable div 的 zIndex 设置为 2，并将接收事件的 div 设置为 1 :

canvas.style.zIndex = 3;
divForWritting.style.zIndex = 2;
forMouseEvents.style.zIndex = 1;

这样 Canvas 始终保持在顶部。

查看我制作的快速演示:

https://jsfiddle.net/jyt1cy40/