拖动时的 KineticJS 图层索引

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

看看我的小提琴。

和我的代码：

    <!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();
}));

似乎不起作用？这是为什么呢？如何在所有情况下让圆圈画在线上？主要是你拖线的情况。

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

感谢您的帮助

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

所以问题是kineticjs（4.3.0）添加了一个新的"拖动"层来提高拖动性能。每次拖动对象时，它都会放入拖动图层中，当您停止拖动时，它会被放回自己的图层中。这不会保留原始 z 索引。每当创建新对象并希望覆盖此功能时，都必须将对象的属性之一设置为：

 "dragOnTop: false"

请参阅 JSFIDDLE 了解确切的实现。

相关内容

最新更新

热门标签：