Question

无法弄清楚如何用kenetic js对这些对象进行分层，我希望圆圈位于circle2之上。我在写'circle.setZIndex（）;'不当？这打破了剧本。

jsfiddle与.setZIndex行注释掉：http://jsfiddle.net/ZfuDs/

  function writeMessage(messageLayer, message) {
    var context = messageLayer.getContext();
    messageLayer.clear();
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
  }
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var shapesLayer = new Kinetic.Layer();
  var messageLayer = new Kinetic.Layer();

var circle2 = new Kinetic.Circle({
    x: 360,
    y: stage.getHeight() / 2,
    radius: 90,
    fill: 'orange',
    stroke: 'black',
    strokeWidth: 4
  });
circle2.setZIndex(3);

  var circle = new Kinetic.Circle({
    x: 380,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
  });
   circle.setZIndex(2); 


  shapesLayer.add(circle);
  shapesLayer.add(circle2);

  stage.add(shapesLayer);
  stage.add(messageLayer);

Answer 1

您可以先尝试添加 circle2 形状，然后再添加圈形状

shapesLayer.add(circle2);
shapesLayer.add(circle);

而不是

shapesLayer.add(circle);
shapesLayer.add(circle2);

试试这个http://jsfiddle.net/ZfuDs/1/

Answer 2

在将对象添加到我得到的图层之前，您似乎无法调用z-index函数：

TypeError: this.parent is undefined
    this.parent.children.splice(index, 1);

我不会再出现错误，但setZIndex（）方法似乎不起作用，但是 circle.moveToTop（）确实有效，请检查http://jsfiddle.net/ZfuDs/3

动力学js zindex

2 个答案: