Question

我正在使用Konvajs库。我试图在主Konva.Stage元素周围放置一个边框，但似乎无法使它工作。 CSS仅适用于<div class="TSPKonvaStage" id="KonvaContainer"></div>，而var stage = new Konva.Stage({ container: 'KonvaContainer', // id of container <div> width: 600, height: 180 });元素似乎没有特定属性。

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

我的Konva容器

mGoogleMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {

           Toast.makeText(
                                YourActivity.this,
                                "Lat : " + latLng.latitude + " , "
                                        + "Long : " + latLng.longitude,
                                Toast.LENGTH_LONG).show();

            }
        });

        mGoogleMap.setOnInfoWindowClickListener(RegActivity.this);


    }

我的Konva宣言

----------------------------------------
title   |     description  |    location
----------------------------------------
abc               def             ghi

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>

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

2 个答案: