如何爲Kinetic JS舞臺或圖層添加背景顏色？

我有一個JS動力學階段和層如何爲Kinetic JS舞臺或圖層添加背景顏色？

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

var layer = new Kinetic.Layer();

我設置的頁面顏色進行#bbb。

body { 
     background: #bbb; 
    }

我想將畫布顏色設置爲白色。但我似乎無法找到一種方法或一種方法爲舞臺本身或添加所有對象的圖層添加背景顏色。

來源

2013-03-29 devcoder

沒有添加背景顏色的API方法。

而是添加一個覆蓋圖層的彩色矩形。

當然，在所有其他形狀之前添加背景矩形。

來源

2013-03-30 00:12:15 markE

您能否指出API方法的鏈接？ – ihsan

您還可以通過CSS設置容器元素的背景顏色。這與設置舞臺的背景顏色基本相同。如果您想在圖層級別使用背景，則需要添加填充矩形或類似物，如前所述。

來源

2013-03-30 06:26:30 drwestco

+1這是推薦的方法，因爲在容器DOM級別不需要畫布 –

還值得注意的是，您可以訪問內容DOM元素，該元素由KineticJS創建並直接嵌套在容器內。此內容節點包含所有圖層畫布。你可以像這樣訪問這個元素 - var contentDiv = stage.getContent（） –

我嘗試在背景和背景顏色屬性中設置CSS背景，但沒有什麼區別。我的畫布具有爲CSS中的指定的相同顏色。 – devcoder

你可以改變背景顏色用JavaScript ...

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

來源

2013-11-06 12:06:11 Alexis

我有同樣的問題，我想補充一個「背景」。我加了一個rectagle與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);

因爲我希望能夠刪除的「背景」，這是我如何管理解決我的問題。

希望它可以幫助你。

來源

2014-08-07 01:05:02

老問題，但您可以使用舞臺的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);

來源

2014-11-02 09:41:16

如何爲Kinetic JS舞臺或圖層添加背景顏色？

回答

相關問題