Canvas 如何为舞台设置背景图像

我想为

Konva.Stage

设置一个不能移动或调整大小并适合Konva.Stage的背景图像

var stage = new Konva.Stage({
   container: "container",
   width: 500,
   height: 500
});

var layer = new Konva.Layer();

var imageObj = new Image();
imageObj.onload = function() {
    var yoda = new Konva.Image({
        x: 0,
        y: 0,
        image: imageObj,
        width: 500,
        height: 500
    });
    // add the shape to the layer
    layer.add(yoda);
    layer.batchDraw();
};

imageObj.src =
"https://cdn.pixabay.com/photo/2017/11/01/20/12/background-2909232__340.jpg";

// add the layer to the stage
stage.add(layer);

// draw the image
layer.draw();

它没有按预期工作。有没有其他方法可以用不同的方法做同样的事情

试着这样做：

<div id="container"></div>


// Set the stage
var width = 1054;
var height = 779;

var startFill = '#FF0';
var mouseoverFill = '#FFF';
var newFill = '#F00';

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

var layer = new Konva.Layer();

var imageObj = new Image();
imageObj.src = 'https://cdn3.vectorstock.com/i/1000x1000/12/57/a-simple-nature-scene-vector-23891257.jpg';
imageObj.onload = function() {
    var map = new Konva.Image({
        x: 0,
        y: 0,
        image: imageObj,
        width: width,
        height: height
    });
    // add the image to the layer
    layer.add(imageObj);
    // add the layer to the stage
    stage.add(layer);
};

var rect = new Konva.Rect({
    x: 0,
    y: 0,
    width: width,
    height: height,
    fillPatternImage: imageObj,
    //fillPatternOffset: { x : -220, y : 70},
    stroke: 'black',
    strokeWidth: 4,
    zIndex: -1 //doesn't work here or in Image object
});

// add the shape to the layer
layer.add(rect);

// add the layer to the stage
stage.add(layer);

var poly0 = new Konva.Line({
    name: 'DrawLine',
    points: [5, 70, 140, 23, 250, 60, 300, 20],
    fill: startFill,
    stroke: 'red',
    strokeWidth: 2,
    lineJoin: 'round',
    lineCap: 'round',        
    closed : true
});
//mouse over event
poly0.on('mouseover', function() {
    if (this.fill() == startFill) {
        this.fill(mouseoverFill);
        layer.draw();
    }
});
poly0.on('mouseout', function() {
    if (this.fill() == mouseoverFill) {
        this.fill(startFill);
        layer.draw();
    }
});
poly0.on('mousedown', function() {
    this.fill(newFill);
    layer.draw();
});

var poly1 = new Konva.Line({
    name: 'Poly1',
    points: [5, 70, 140, 23, 250, 60, 300, 20],
    stroke: 'blue',
    strokeWidth: 10,
    lineCap: 'round',
    lineJoin: 'round'    
})
// mouse over events
poly1.on('mouseover', function() {
    if (this.fill() == startFill) {
        this.fill(mouseoverFill);
        layer.draw();
    }
});
poly1.on('mouseout', function() {
    if (this.fill() == mouseoverFill) {
        this.fill(startFill);
        layer.draw();
    }
});
poly1.on('mousedown', function() {
    this.fill(newFill);
    layer.draw();
});

// add everything to the layer
layer.add(poly0);
layer.add(poly1);    

// add the layer to the stage
stage.add(layer);

//上演
var宽度=1054；
var高度=779；
var startFill='#FF0'；
var mouseoverFill='#FFF'；
var newFill='#F00'；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度：高度
});
var layer=新Konva.layer（）；
var imageObj=新图像（）；
imageObj.src=https://cdn3.vectorstock.com/i/1000x1000/12/57/a-simple-nature-scene-vector-23891257.jpg';
imageObj.onload=函数（）{
var map=新Konva.Image({
x:0,，
y:0，
图片：imageObj，
宽度：宽度，
高度：高度
});
//将图像添加到图层
添加图层（imageObj）；
//将层添加到舞台
阶段。添加（层）；
};
var rect=新Konva.rect({
x:0,，
y:0，
宽度：宽度，
高度:高度,，
fillPatternImage:imageObj，
//fillPatternOffset:{x:-220，y:70}，
笔画：“黑色”，
冲程宽度：4，
zIndex:-1//在此处或图像对象中不起作用
});
//将形状添加到层中
层。添加（rect）；
//将层添加到舞台
阶段。添加（层）；
var poly0=新Konva.线({
名称：'抽绳'，
分数：[5,70,140,23250,60300,20]，
填充：startFill，
笔划：“红色”，
冲程宽度：2，
lineJoin:'圆形'，
线头：“圆形”，
关闭：正确
});
//鼠标悬停事件
poly0.on（'mouseover'，function（）{
if（this.fill（）==startFill）{
此。填充（鼠标溢出）；
layer.draw（）；
}
});
poly0.on（'mouseout'，function（）{
if（this.fill（）==mouseoverFill）{
这个。填充（开始填充）；
layer.draw（）；
}
});
poly0.on（'mousedown'，function（）{
这个。填充（newFill）；
layer.draw（）；
});
var poly1=新Konva.线({
名称：'Poly1'，
分数：[5,70,140,23250,60300,20]，
笔划：“蓝色”，
冲程宽度：10，
线头：“圆形”，
lineJoin:'圆形'
})
//鼠标悬停事件
poly1.on（'mouseover'，function（）{
if（this.fill（）==startFill）{
此。填充（鼠标溢出）；
layer.draw（）；
}
});
poly1.on（'mouseout'，function（）{
if（this.fill（）==mouseoverFill）{
这个。填充（开始填充）；
layer.draw（）；
}
});
poly1.on（'mousedown'，function（）{
这个。填充（newFill）；
layer.draw（）；
});
//将所有内容添加到图层
层。添加（0）；
层。添加（poly1）；
//将层添加到舞台
阶段。添加（层）；

谢谢您的回复。但是背景隐藏了舞台上所有的其他元素。谢谢兄弟！在这里查看一些演示：