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 を保持しません。新しいオブジェクトを作成し、この機能をオーバーライドしたいときはいつでも、オブジェクトの属性の 1 つを次のように設定する必要があります。

 "dragOnTop: false"

正確な実装については、jsfiddle を参照してください。

于 2013-01-24T14:14:33.703 に答える