KineticJS圖層索引拖動時

所以我的問題似乎是一個可拖動的對象總是繪製在其他對象上。KineticJS圖層索引拖動時

看看我的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(); 

}));

似乎沒有工作指標？爲什麼是這樣？在所有情況下，我如何讓圈子在線上劃線？主要是你拖動線條的情況。

是否有某處我在其他地方設置了不同的地方？

感謝您的幫助

來源

2013-01-24 AndyGable

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

所以問題是，kineticjs（4.3.0）增加了一個新的「拖拽」層，以改善拖性能。任何時候你拖動一個對象，它將被放入拖動層，當你停止拖動時，它會被放回到它自己的層中。這不會保留您的原始z-index。每當你創建一個新的對象，並要覆蓋此功能，您將不得不設置對象的屬性爲一體：

"dragOnTop: false"

看到的jsfiddle的具體實現。

來源

2013-01-24 14:14:33 SoluableNonagon

你怎麼知道這件事？非常感謝。 – AndyGable

我閱讀文檔。 http://kineticjs.com/docs/symbols/Kinetic.Node.php，它在更改日誌中https://github.com/ericdrowell/KineticJS/wiki/ChangeLog – SoluableNonagon

KineticJS圖層索引拖動時

回答

相關問題