4

所以我的问题似乎是一个可拖动的对象总是被绘制在其他对象上。

看看我的小提琴。

和我的代码：

    <!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta.js"></script>
        <script>
         window.onload = function() {

            var stage = new Kinetic.Stage({
            container: 'container',
            width: 578,
            height: 200
            });

            var cableLayer = new Kinetic.Layer();


// build cable
var cable = new Kinetic.Line({
  strokeWidth: 40,
  stroke: 'green',
  points: [{
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2
  }, {
    x: 100,
    y: 100
  }],
  draggable: true
});

// build center

var c1 = new Kinetic.Circle({
  radius: 60,
  fill: 'black',
  draggable: true,
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2
});



var c2 = new Kinetic.Circle({
  x: 100,
  y: 100,
  radius: 60,
  fill: 'black',
  draggable: true,
});

//add everything to the layer


cableLayer.add(cable);
cableLayer.add(c1);
cableLayer.add(c2);




//add all to stage
stage.add(cableLayer);



//What to do when something is changed...

cable.on('dragmove', (function () {
  c1.setPosition([cable.getPosition().x + cable.getPoints()[0].x, cable.getPosition().y + cable.getPoints()[0].y]);
  c2.setPosition([cable.getPosition().x + cable.getPoints()[1].x, cable.getPosition().y + cable.getPoints()[1].y]);  

  cableLayer.draw();

}));

c1.on('dragstart', (function () {
  c1.getLayer().afterDraw(function () {
    cable.attrs.points[0].x = c1.getX()-cable.getX();
    cable.attrs.points[0].y = c1.getY()-cable.getY();
    cableLayer.draw();

  });
}));

c2.on('dragstart', (function () {
  c2.getLayer().afterDraw(function () {
    cable.attrs.points[1].x = c2.getX()-cable.getX();
    cable.attrs.points[1].y = c2.getY()-cable.getY();
    cableLayer.draw();
  });
}));


}
        </script>
    </head>
    <body onmousedown="return false;">
        <div id="container"></div>
    </body>
</html>

所以，我尝试使用设置索引

 cable.on('dragmove', (function () {
  c1.setPosition([cable.getPosition().x + cable.getPoints()[0].x, cable.getPosition().y + cable.getPoints()[0].y]);
  c2.setPosition([cable.getPosition().x + cable.getPoints()[1].x, cable.getPosition().y + cable.getPoints()[1].y]);  
   c2.setIndex(1);
  c1.setIndex(1);
  cable.setIndex(2);
  cableLayer.draw();

}));

好像不行？为什么是这样？在所有情况下，如何让圆圈画在这条线上？主要是你拖线的情况。

有没有我在其他地方设置不同的地方？

谢谢你的帮助

4

1 回答 1

2

http://jsfiddle.net/nYHrg/3/

所以问题是 kineticjs (4.3.0) 添加了一个新的“拖动”层来提高拖动性能。任何时候你拖动一个对象，它都会被放在拖动层中，当你停止拖动时，它会被放回它自己的层中。这不会保留您的原始 z-index。每当您创建一个新对象并想要覆盖此功能时，您必须将对象的属性之一设置为：

 "dragOnTop: false"

请参阅 jsfiddle 以了解具体实现。

于 2013-01-24T14:14:33.703 回答