最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to set initial stage color in Konva? - Stack Overflow

programmeradmin6浏览0评论

I'm just starting with Konva and I wonder if there is a way to set the stage color? It is some kind of bright grey by default and I would like to change that, if possible, without having to add a rectangle and fill it.

I'm just starting with Konva and I wonder if there is a way to set the stage color? It is some kind of bright grey by default and I would like to change that, if possible, without having to add a rectangle and fill it.

Share Improve this question asked Nov 8, 2017 at 6:15 RobRob 11.8k15 gold badges65 silver badges96 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

Konvajs is an implementation of functions on top of the standard HTML5 canvas.

If you google html5 canvas background color you will find many hits including for example how-to-fill-the-whole-canvas-with-specific-color on SO. The summary is:

  • html5 canvas is transparent
  • either set the colour on the host element via CSS,
  • or generate a rectangle shape on its own layer with the rectangle dimensions filling the canvas.

Here is an example of using the CSS colour on the container div to colour the stage. I also added a stage rectangle which you could use instead by adding a fill colour to its definition. The stage rectangle is listening for clicks and has a click handler so that you can confirm it covers the entire stage area. The stage has a contentClick() listener that should be used with care because bubbling cannot be stopped.

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./konvajs/konva/1.7.6/konva.min.js"></script>

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

发布评论

评论列表(0)

  1. 暂无评论