3

不太清楚如何用 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);
4

2 回答 2

4

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

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

代替

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

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

于 2012-12-14T06:45:25.260 回答
3

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

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

我不再收到错误消息，但即使这样 setZIndex() 方法似乎也不起作用，但 circle.moveToTop() 确实有效，请检查http://jsfiddle.net/ZfuDs/3

于 2012-12-14T16:50:55.523 回答