CODEWITHSUNDEEP
htmlscrollstagekonvajs
AN00
AN00

Reputation: 335

How to add a scrollable area in a Konva stage?

I am trying to create a web application and I am using Konva for this because it makes it easier with grouping objects and drag&drop. Now I want to create an area (or multiple) that is individually scrollable, like it happens when you add the overflow: scroll property to the style of a div.

I have tried to create two Konva.Stage objects and set the overflow: scroll property, but I couldn't make it work, only the first stage would appear.

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

What is the solution for creating a scrollable area?

Upvotes: 1

Views: 3852

Answers (1)

lavrton
lavrton

Reputation: 20288

To make a scrollable area you can just create a large stage, but put it inside a smaller container with 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>

Upvotes: 1

Related Questions