将元素放在前台

Question

我想知道如何把盒子放在前景，图片放在背景。我在盒子上尝试 moveToTop()、setZIndex()，但是当我拖动它时，图像会转到前景。

  one(){

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

    var layer = new Konva.Layer();
    var imageObj = new Image();
    imageObj.onload = function() {

      var yoda = new Konva.Image({
        image: imageObj,
      });

      // yoda.setZIndex(2);
      layer.add(yoda);

    };
    imageObj.src = '/assets/images/vert.png';
    this.two(stage, layer)

  }

  two(stage: Konva.Stage, layer) {

    var box = new Konva.Rect({
      x: 20, y: 20,
      width: 100, height: 50,
      fill: '#00D2FF', stroke: 'black',
      strokeWidth: 4,
      draggable: true
  });
  // box.setZIndex(1); box.moveToTop()
  layer.add(box);
  stage.add(layer)
}

Answer 1

我使用了您的代码并制作了一个普通的 JS 工作片段，以便我可以进行试验。见下文。

你离台词很近

// yoda.setZIndex(2);
layer.add(yoda);

除了影响属性的 z-index 作用于图层中形状的位置。因此，形状必须在一个图层中才能使调用起作用。查看我使用

的代码

layer.add(yoda);
yoda.moveToBottom()

意味着层影响调用发生在将 yoda 添加到层之后。

如果您有许多形状需要位于一层或另一层上，您可能还希望考虑使用多层。

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

var layer = new Konva.Layer();
var imageObj = new Image();

imageObj.onload = function() {

  var yoda = new Konva.Image({
    width: 100, height: 100,
    image: imageObj,
  });

  layer.add(yoda);
  yoda.moveToBottom();   // <<<<  must add to the layer BEFORE setting the z-order.
  layer.draw();

};
imageObj.src = 'https://i.stack.imgur.com/WxBvk.png';
two(stage, layer)


function two(stage, layer) {

    var box = new Konva.Rect({
      x: 20, y: 20,
      width: 100, height: 50,
      fill: '#00D2FF', stroke: 'black',
      strokeWidth: 4,
      draggable: true
    });
  layer.add(box);
  }
  stage.add(layer)
  
  stage.draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div id='container' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>

将元素放在前台

Put element in foreground

konvajs