Прямоугольник рисования не может затенять мое изображение

Я пытаюсь нарисовать что-то поверх существующего объекта изображения с помощью Konvajs. поэтому я кодирую так:

var stage = new Konva.Stage({
    container: 'underground-map-container',
    width: window.innerWidth,
    height: 1121.6
});

var layer = new Konva.Layer();

var imageObj = new Image();
imageObj.onload = function () {
    var parking_img = new Konva.Image({
        image: imageObj,
        width: 1328,
        height: 878.6
    });
    layer.add(parking_img);
    stage.add(layer);
};
imageObj.src = "../static/img/underground-map.png";


var rect = new Konva.Rect({
    x: 700,
    y: 50,
    width: 200,
    height: 200,
    fill: 'blue',
    opacity:1
});
layer.add(rect);

var rect1 = new Konva.Rect({
    x: 800,
    y: 50,
    width: 200,
    height: 200,
    fill: 'red',
    opacity:1
});
layer.add(rect1);

rect1 может затенять прямоугольник, однако оба они не могут затенять мое изображение. Кто-нибудь знает, как это сделать, спасибо!

ниже приводится фактический результат


konvajs
person zhipeng wang    schedule 22.05.2018    source источник
comment
Вы хотите просто показать фигуры поверх изображения?   -  person lavrton    schedule 22.05.2018
comment
Точно. но мое фоновое изображение всегда отображается сверху, даже если я установил Zindex   -  person zhipeng wang    schedule 22.05.2018

Ответы (1)


arrow_upward
2
arrow_downward

Изображение добавляется к слою при загрузке. Это происходит ПОСЛЕ добавления прямоугольников, поэтому изображение размещается сверху. Для перемещения изображения вы можете использовать:

  1. parking_img.moveToBottom()
  2. or parking_img.setZIndex(0)

Важно: используйте эти методы только после того, как вы добавили изображение на такой слой, как:

var parking_img = new Konva.Image({
    image: imageObj,
    width: 1328,
    height: 878.6
});
layer.add(parking_img);
parking_img.moveToBottom();
layer.draw();
person lavrton    schedule 22.05.2018
comment
У меня это работает. Мне нужно выяснить порядок, в котором все происходит. (когда загружается изображение, когда добавляется прямоугольник) Спасибо. - person zhipeng wang; 22.05.2018