コンバで初期段階の色を設定する方法は？

Question

私はちょうどKonvaで始まり、ステージの色を設定する方法があるのだろうか？デフォルトで明るいグレーのようなものです。可能であれば、矩形を追加して塗りつぶすことなく、変更したいと思います。

Answer 1

Konvajsは、標準HTML5キャンバスの上に関数を実装したものです。

Googleの場合html5キャンバスの背景の色は、たとえば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>