在画布上绘制并写入内容可编辑的div，在div顶部绘制图形

Question

我正在编写一种WYSISYG工具，我可以同时编写和绘制。 我需要将图纸作为文字的“顶部”。

书写元素是内容可编辑的div，图纸是canvas。 要从绘图切换到短信，反之亦然，有一个按钮，实际上切换了两个元素的zIndex。一切正常，但要使其正常工作我需要将绘图始终置于顶部，如果我切换zIndex，这将不会发生。如果我没有为zIndex切换writing mode，我无法再访问内容可编辑的div（这将在canvas后面），但如果我切换它绘图去背景（这不可能发生）。怎么解决这个问题？

我按下Drawing/Typing按钮时使用的代码是：

    function switchDrawingText(){

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

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

}

我还尝试用pointer-events: none;玩一点，但没有运气。

在drawing mode中，结果没问题：

但当我切换回writing mode后，canvas会在后台进行，这不是我需要的：

感谢您的帮助。

Answer 1

您可以将画布设置为 pointer-events：none; 然后，您必须在画布顶部有一个与画布大小相同的div。此div 将接收鼠标事件而不是画布，但您仍将绘制画布。因此，您将获得具有 zIndex 1 的可信div，用于接收鼠标事件的div zIndex 2 ，以及带有 zIndex 3 的画布。

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

现在用户可以绘制画布。如果你想让用户在contenteditable div上写，你只需将contenteditable div的zIndex设置为2，将接收事件的div设置为1：

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

这样画布始终保持最佳状态。

查看我制作的快速演示：

https://jsfiddle.net/jyt1cy40/