在html中绘制Konvajs容器舞台的边框边缘

Question

我正在使用 Konvajs 库。我试图在主

Stage

元素周围放置一个边框框，但似乎无法使其工作。 CSS 仅适用于

<div>

，而

Konva.Stage

元素似乎没有这方面的特定属性。

在舞台层的 4 个边框上添加线条形状是唯一的方法吗？

我的 Konva 容器

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

下面是我的 Konva 宣言

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

Answer 1

您可以使用 CSS 作为容器元素：

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

Answer 2

这是对@lavrton 答案的实验。我很好奇舞台的大小是否被边界调整了。答案似乎是否定的——至少在 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>

Answer 3

var containerId = 'drawContainer'; var 容器 = document.getElementById(containerId); var width = 容器.offsetWidth; var height = 容器.offsetHeight; var stage = new Konva.Stage({ 容器：容器ID， 宽度：宽度， 高度： 高度 });