如何设置舞台背景图片

Posted 2023-03-25

【中文标题】如何设置舞台背景图片

【英文标题】：How to Set Background Image For Stage

【发布时间】：2020-04-17 06:02:16

【问题描述】：

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

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

【问题讨论】：

看看这里的一些演示：konvajs.org/docs/sandbox/Canvas_Background.html

【参考方案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);

【讨论】：

感谢您的回复。但是背景隐藏了舞台中的所有其他元素。

谢谢大哥！