Draw border edges of the Konvajs container Stage in html

Question

I am using the Konvajs library. Am trying to put a border box around the main Stage element, but can't seem to make it work. The CSS only apply to the <div> and the Konva.Stage element does not seem to have specific properties for this.

Is the only way to add line shapes on the 4 borders of the Stage Layer?

My Konva container

<div class="TSPKonvaStage" id="KonvaContainer"></div>

My Konva Declaration below

var stage = new Konva.Stage({
        container: 'KonvaContainer',   // id of container <div>
        width: 600,
        height: 180
     });

score 4 · Answer 1 · answered Mar 22 '18 at 01:40

4

You can use CSS for container element:

stage.getContainer().style.border = '1px solid black'.

answered Mar 22 '18 at 01:40

lavrton

18,973
4
30
63

How does that affect stage size? So if I have a 100px wide element and I make that the host for the stage, and I use the above to set a 10 px border, is my stage width 100px or 80px? – Vanquished Wombat Mar 22 '18 at 06:43
This seems to only draw the border to the whole '
', not the actual canvas which is not as wild as the '
'. The solution that seems to workf for now is to use 2 '
like , and use CSS to define the width and style of the main
– Frens Mar 22 '18 at 13:46

score 0 · Answer 2 · answered Mar 22 '18 at 19:28

This is an experiment with @lavrton's answer. I was curious if the stage was resized by the border. The answer appears to be no - at least on Chrome.

// Set up the stage
var stage1 = new Konva.Stage({container: 'container1', width: 300, height: 100});

// add a layer.
var layer1 = new Konva.Layer();
stage1.add(layer1);

console.log('Stage size before border=' + stage1.width() + ' x ' + stage1.height());

stage1.getContainer().style.border = '5px solid black';

console.log('Stage size after border=' + stage1.width() + ' x ' + stage1.height());

var rect1 = new Konva.Rect({x:0, y: 0, width: 50, height: 40, strokeWidth: 10, stroke: 'lime'});
layer1.add(rect1)

stage1.draw()

p
{
  padding: 4px;
  
}
#container1
{
  display: inline-block;
  width: 500px; 
  height: 200px; 
  background-color: silver;
  overflow: hidden; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>

<p>This answers the question 'does the border reduce the size of the stage?'. Answer is no. The green rect appears with its left and top edges under the border - at least on Chrome. </p>

<div id='container1'></div>

Draw border edges of the Konvajs container Stage in html

2 Answers2

Linked