Question

我想要三个或更多画布正确叠加。我找到了类似的主题（How to place two canvases on top of one another?），只是无法将所有3或4幅画布重叠在一起。在第二个画布之后，所有其他画布渲染在第二个画布下面。

我想要的是基础层的画布。用于颜色映射的画布和用于信息的画布，我可以在第三个画布上单击并请求对象

我正在使用的代码：

<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 = 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;
}

）。

因此，无论渲染第3幅画布出现什么问题，错误都可能来自fabric.js。

如何将树或更多画布放在彼此之上？

1 个答案: