javascript - 如何为 Kinetic JS 舞台或图层添加背景颜色？

Question

我有一个 Kinetic JS 阶段和一个层

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

var layer = new Kinetic.Layer();

我已将页面颜色设置为#bbb。

body {
        background: #bbb;
    }

我想将画布颜色设置为白色。但我似乎无法找到一种方法或方式来为舞台本身或添加所有对象的图层添加背景颜色。

Answer 1

我有同样的问题，我想添加一个“背景”。我使用以下代码添加了一个高度和宽度为 100% 的矩形：

var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: stageDimensions.width, //full width
            height: stageDimensions.height, //full height
            fill: 'white', //background color
        });
layer.add(rect);

由于我希望能够删除“背景”，这就是我设法解决问题的方法。

希望它可以帮助你。

Answer 2

您还可以通过 CSS 设置容器元素的背景颜色。这与设置舞台的背景颜色基本相同。如果您想要图层级别的背景，您需要添加一个填充的矩形或类似的，如前所述。

Answer 3

您可以使用 JavaScript 更改背景颜色...

document.getElementById('container').style.background = '#fff';

Answer 4

There isn't an API method to add a background color.

Instead add a colored rectangle that covers the layer.

Of course, add the background rectangle before all other shapes.

Answer 5

老问题，但是您可以使用get舞台的属性，并填充一个完整的矩形，然后将其添加到图层中。示例代码：

var stage = new Kinetic.Stage({
  container: 'canvas-container',
  width: 900,
  height: 450
});

// create background
var stageBg = new Kinetic.Rect({
  x: 0,
  y: 0,
  width: stage.getWidth(),
  height: stage.getHeight(),
  fill: "rgb(40,40,40)"
});

layer.add(stageBg);
stage.add(layer);