javascript - 如何将一棵树或多张 Canvas 叠放在一起？

Question

我想要三个或更多 Canvas 正确叠加。我发现了类似的主题( How to place two canvases on top of one another? )，只是无法将所有 3 或 4 个 Canvas 覆盖在一起。在第二个 Canvas 之后，所有其他 Canvas 都呈现在第二个 Canvas 下方。

我想要的是基础层的 Canvas 。颜色图的 Canvas 和信息的 Canvas ，我可以单击第三个 Canvas 并请求对象

我正在使用的代码:

<style>
     #wrapper{ position: relative; }
    .canvas { position: absolute; top: 0; left: 0; }
</style>

<div id="wrapper">
        <canvas class="canvas" id="canvast" style="z-index: -2;"></canvas>
        <canvas class="canvas" id="canvast1" style="z-index: 1;"></canvas>
        <canvas class="canvas" id="canvast2" style="z-index: -2;"> </canvas>
</div>

注意:fabric.js 库 Canvas 代码用于填充 Canvas

 canvas = new fabric.Canvas("canvast"); //(canvast1 etc.)
 canvas.renderOnAddRemove = false; // faster loading of canvas
 canvas.add(RectangleObject); //adding object
 canvas.renderAll(); //rendering canvas

Answer 1

我不了解fabric.js，所以我不知道我的回答有多大帮助。

我做了这个jsfiddle:https://jsfiddle.net/xn78jzg3/4/

你可以看到，即使你的大部分代码都分层三层也不是问题(我唯一改变的是canvast2上的z-index从-2到2并添加了一些样式:

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  border: #333 solid 2px;
  width: 200px;
  height: 200px;
}

)。

因此，无论第三个 Canvas 的渲染出现问题，错误都可能来自 Fabric.js。