Geek Answers Handbook

KineticJS layer index when dragging

So my problem is that the dragged object is always drawn on top of other objects.

Give up the script .

and my code is :

<!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>

So, I tried to set the index using

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

Doesn't seem to work? Why is this? How to make circles draw along the entire line in all cases? This is basically the case when you drag a line.

Somewhere I install it differently somewhere else?

thanks for the help

+4
source share
1 answer

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

So the problem is that kineticjs (4.3.0) added a new drag and drop layer to improve drag performance. Each time you drag an object, it is placed in the drag layer, and when you stop the drag, it goes back to its own layer. This does not preserve the original z-index. Each time you create a new object and want to override this function, you will need to set one of the attributes of the object as:

  "dragOnTop: false"

see jsfiddle for an exact implementation.

+2
source

More articles:


All Articles