z-index - 动态 js zindex

Question

不太清楚如何使用 kenetic js 对这些对象进行分层，我希望 circle 位于 circle2 之上。我在写“circle.setZIndex();”吗不当？这破坏了脚本。

带有 .setZIndex 行的 jsfiddle 被注释掉: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 形状，然后再添加circle 形状

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

代替

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

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