如何在Konva中设置初始阶段颜色？

Question

我刚刚开始使用Konva，我想知道是否有办法设置舞台颜色？默认情况下它是某种亮灰色，如果可能的话，我想改变它，而不必添加矩形并填充它。

Answer 1

Konvajs是在标准HTML5画布之上的函数实现。

如果你谷歌html5画布背景颜色，你会发现很多点击，包括例如在SO上的how-to-fill-the-whole-canvas-with-specific-color。摘要是：

• html5画布是透明的
• 要么通过CSS设置主机元素的颜色，
• 或者在自己的图层上生成矩形形状，矩形尺寸填充画布。

下面是使用容器div上的CSS颜色为舞台着色的示例。我还添加了一个舞台矩形，您可以通过在其定义中添加填充颜色来使用它。舞台矩形正在侦听点击并具有单击处理程序，以便您可以确认它覆盖整个舞台区域。该阶段有一个contentClick（）监听器，应该小心使用，因为无法停止冒泡。

var width = window.innerWidth;
var height = window.innerHeight;


var rectButtonClicked  = false;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var stageRect =  new Konva.Rect({ 
  x:0,
  y:0,
  width: width,
  height: height,
  listening: true  // listen for clicks on the stage rectangle
})
layer.add(stageRect);

stageRect.on('click', function() {
  console.log('Stage click');
});

stageRect.draw(); // draw so we can see canvas rect.

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

<div id="container" style="background-color: gold;"></div>