如何在 Konva 阶段添加可滚动区域？

Question

我正在尝试创建一个 Web 应用程序，我正在为此使用 Konva，因为它可以更轻松地对对象进行分组和拖放。现在我想创建一个（或多个）可单独滚动的区域，就像将overflow: scroll 属性添加到div 的样式时发生的那样。

我尝试创建两个Konva.Stage 对象并设置overflow: scroll 属性，但我无法使其工作，只会出现第一阶段。

<div id="container"></div>
<div id="block"></div>

<style>
    div.container {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
    }

    div.block {
        margin: 0;
        padding: 0;
        overflow: scroll;
        background-color: #0000ff;
    }

</style>

var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height/2
});

var stage2 = new Konva.Stage({
    container: 'block',
    width: width,
    height: height/2
});

创建可滚动区域的解决方案是什么？

Answer 1

要创建一个可滚动的区域，您可以创建一个大舞台，但将其放在一个带有overflow: auto的较小容器中

// create large stage
const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth * 2,
  height: window.innerHeight * 2
});

const layer = new Konva.Layer();
stage.add(layer);

const circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 150,
  fill: 'green'
});
layer.add(circle);

layer.draw();

body {
  padding: 0;
  margin: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

<script src="https://unpkg.com/konva@^2/konva.min.js"></script>
<div id="container">
  <div id="stage"></div>
</div>