Konva中如何设置初始阶段颜色?
How to set initial stage color in Konva?
我刚开始使用 Konva,我想知道是否有办法设置舞台颜色?默认情况下它是某种亮灰色,如果可能的话,我想更改它,而不必添加矩形并填充它。
Konvajs 是在标准 HTML5 canvas.
之上的函数实现
如果你 google html5 canvas 背景 颜色你会发现很多命中,例如 on SO。总结是:
- html5canvas透明
- 通过 CSS、
设置宿主元素的颜色
- 或者在其自己的图层上生成一个矩形形状,矩形尺寸填充 canvas。
这里是使用容器 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>
我刚开始使用 Konva,我想知道是否有办法设置舞台颜色?默认情况下它是某种亮灰色,如果可能的话,我想更改它,而不必添加矩形并填充它。
Konvajs 是在标准 HTML5 canvas.
之上的函数实现如果你 google html5 canvas 背景 颜色你会发现很多命中,例如
- html5canvas透明
- 通过 CSS、 设置宿主元素的颜色
- 或者在其自己的图层上生成一个矩形形状,矩形尺寸填充 canvas。
这里是使用容器 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>