在 html 中绘制 Konvajs 容器 Stage 的边框边缘答案

【问题标题】：Draw border edges of the Konvajs container Stage in html在 html 中绘制 Konvajs 容器 Stage 的边框边缘
【发布时间】：2018-03-21 09:43:31
【问题描述】：

我正在使用 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
     });

【问题讨论】：

标签： stage konvajs

【解决方案1】：

容器元素可以使用 CSS：

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

【讨论】：

这对舞台大小有何影响？因此，如果我有一个 100px 宽的元素，并且我将它作为舞台的主机，并且我使用上面设置了 10 px 的边框，那么我的舞台宽度是 100px 还是 80px？
这似乎只为整个 '
' 绘制边框，而不是实际的画布，它不像 '
' 那样狂野。目前看来可行的解决方案是使用 2 '
like ，并使用 CSS 来定义主
的宽度和样式

【解决方案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>

【讨论】：