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索引的属性在图层中的形状位置起作用。因此，该形状必须处于图层中才能调用。在我使用的地方查看代码

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>

将元素放在前景中

1 个答案: