Question

我正在尝试创建一个Web应用程序，并且我正在使用Konva，因为它使对对象进行分组和拖放变得更加容易。现在，我想创建一个可单独滚动的区域（或多个区域），就像将extern "C" { // Hint to Hybrid laptop drivers that our app would really rather use the NVidia/AMD GPU that you've got sitting over there rather than Intel Graphics... _declspec(dllexport) DWORD NvOptimusEnablement = 0x00000001; _declspec(dllexport) int AmdPowerXpressRequestHighPerformance = 1; }属性添加到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>

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

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>

如何在Konva舞台中添加可滚动区域？

1 个答案: