Question

我在konva.js中使用Zindex时遇到问题。将所有内容添加到图层后我试图将属性分别分配给每个元素的节点。但这行不通。例如

for(let i = 0; i<=this.layer['children']; i++){
    this.layer['children'][i].setZIndex(someInt);
}

如何为图层中的所有元素设置zindex？

Answer 1

zIndex中的

Konva只是父元素的子元素数组中元素的索引。因此，您不能为其设置任何数字，并且它不能大于children.length - 1。

Answer 2

工作片段，说明了Kovajs.Shape对象的getZIndex（），setZIndex（），moveUp（）和moveDown（）方法。另请参见example at Konvajs site。

按钮允许您将绿色圆圈在z-index列表上上下移动1，然后尝试将+10上下移动-100。所得的z-index显示在圆圈下方的文本中。

// Create the stage
var stage = new Konva.Stage({
    container: 'container',
    width: $('#container').width(),
    height: $('#container').height()
});

// create the layer
var layer = new Konva.Layer();

var data = [ {x: 60, color: 'red'}, {x: 90, color: 'limegreen'}, {x: 120, color: 'gold'}]
var circles = [];

for (var i = 0; i < data.length; i = i + 1){
  // create some circles
  var circle = new Konva.Circle({
      x: data[i].x,
      y: 60,
      radius: 50,
      fill: data[i].color,
      stroke: 'black',
      strokeWidth: 2
  });
  layer.add(circle);
  circles.push(circle);
}

stage.add(layer);

var green = circles[1]; 
function sayIndex(){
$('#info').html("Green zIndex=" + circles[1].getZIndex());
}

$('#greenup').on('click', function(){
  green.moveUp();
  sayIndex();
  layer.draw();
})

$('#greendn').on('click', function(){
  green.moveDown();
  sayIndex();
  layer.draw();
})


$('#greenup10').on('click', function(){
  var ind = circles[1].getZIndex();
  green.setZIndex(ind + 10);
  sayIndex();
  layer.draw();
})

$('#greendn100').on('click', function(){
  var ind = circles[1].getZIndex();
  green.setZIndex(ind - 100);
  sayIndex();
  layer.draw();
})

#container
{
width: 200px;
height: 150px;
border: 1px solid #666;
float: left;
}
#buttons
{
width: 200px;
height: 150px;
border: 1px solid #666;
float: left;
}
#info
{
position: absolute;
left: 20px;
top: 135px;
}
p
{
margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div id="container"></div>
<div id="buttons">

<p><button id='greenup'>Move Green + 1</button></p>
<p><button id='greendn'>Move Green -1</button></p>
<p><button id='greenup10'>Move Green +10</button></p>
<p><button id='greendn100'>Move Green -100</button></p>

<span id='info'></span>

</div>

Answer 3

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Shape Layering Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
    #buttons {
        position: absolute;
        left: 10px;
        top: 0px;
    }
    button {
        margin-top: 10px;
        display: block;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div id="buttons">
      <button id="toTop">
yellow z-index -2
     </button>
      <button id="toBottom">
      yellow -9
      </button>
      <button id="up">
          yellow z-index 1
      </button>
      <button id="down">
          yellow z-index -5
      </button>
      <button id="zIndex">
          Set yellow box zIndex to 3
      </button>
  </div>
  <script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer();
    var offsetX = 0;
    var offsetY = 0;
    var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
    var yellowBox = null;

    for(var n = 0; n < 6; n++) {
        // anonymous function to induce scope
        (function() {
            var i = n;
            var box = new Konva.Rect({
                x: i * 30 + 210,
                y: i * 18 + 40,
                width: 100,
                height: 50,
                fill: colors[i],
                stroke: 'black',
                strokeWidth: 4,
                draggable: true,
                name: colors[i]
            });

            box.on('mouseover', function() {
                document.body.style.cursor = 'pointer';
            });
            box.on('mouseout', function() {
                document.body.style.cursor = 'default';
            });
            if(colors[i] === 'yellow') {
                yellowBox = box;
            }
            layer.add(box);
        })();
    }

    stage.add(layer);

    // add button event bindings
    document.getElementById('toTop').addEventListener('click', function() {
        yellowBox.setZIndex(-2);
        layer.draw();
    }, false);

    document.getElementById('toBottom').addEventListener('click', function() {
        yellowBox.setZIndex(-9);
        layer.draw();
    }, false);

    document.getElementById('up').addEventListener('click', function() {
        yellowBox.setZIndex(1);
        layer.draw();
    }, false);

    document.getElementById('down').addEventListener('click', function() {
        yellowBox.setZIndex(-5);
        layer.draw();
    }, false);

    document.getElementById('zIndex').addEventListener('click', function() {
        yellowBox.setZIndex(3);
        layer.draw();
    }, false);
  </script>

</body>
</html>
Last

有趣的ZIndex代码， setZIndex是您所需要的；它将使Konva.JS内部的z-index失效

如何在konva.js中设置zindex？

3 个答案: