拖动时的 KineticJS 图层索引

Posted 2023-03-24

技术标签:

【中文标题】拖动时的 KineticJS 图层索引【英文标题】：KineticJS layer index when dragging 【发布时间】：2013-01-07 18:00:00 【问题描述】：

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

查看我的fiddle。

和我的代码：

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

));

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

我是否在其他地方设置了不同的设置？

感谢您的帮助

【问题讨论】：

【参考方案1】：

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

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