如何为舞台设置背景图像

Question

我想为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();

无法正常工作。还有其他方法可以使同一事物以不同的方式进行吗？

Answer 1

尝试这种方式：

<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);