konvajs - 可以将 KonvaJS 舞台/ Canvas 放在另一个 Canvas 之上吗？

Question

也许是新手问题。

HTML:

<div id="myDiv">
    <canvas id="myCanvas" style="display:inline; border: 1px solid #000000;"> </canvas>
 </div>

我想要做的是将 KonvaJS Stage 放置在上面的 myCanvas 之上(即 z 轴更高的位置)。

如果我使用默认代码:

var stage = new Konva.Stage({
      container: 'myDiv',
       width: window.innerWidth,
       height: window.innerHeight
});

舞台内联放置在 myCanvas 之后。

有没有办法告诉 Konva 将其 Canvas 分层？

Answer 1

您可以将舞台容器添加到 myDiv 中:

<div id="myDiv">
  <canvas id="myCanvas" style="display:inline; border: 1px solid #000000;"></canvas>
  <div id="container"></div>
</div>

然后创建一个舞台并将其放置在绝对位置的顶部。

const myCanvas = document.getElementById('myCanvas');

const stage = new Konva.Stage({
  container: 'container',
  width: myCanvas.width,
  height: myCanvas.height
});

stage.container().style.position = 'absolute';
stage.container().style.top = '0';
stage.container().style.left = '0';
// add z-index if you need it