Как добавить прокручиваемую область на этапе Konva? - PullRequest
Новая
       15

Как добавить прокручиваемую область на этапе Konva?

0 голосов
/ 18 июня 2019

Я пытаюсь создать веб-приложение и использую 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
});

Какое решение для создания прокручиваемой области?

1 Ответ

0 голосов
/ 19 июня 2019

Чтобы создать прокручиваемую область, вы можете просто создать большую сцену, но поместить ее в меньший контейнер с 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>
...