0

私は kineticjs を使用して、小さな四角形を大きな四角形にドラッグして、所定の位置にスナップさせます。ただし、使用しようとするとエラーが発生します。

stage.getUserPosition()

私がやろうとしていたことのフィドル。

誰かが私が間違っていることを教えてくれますか、またはドラッグとスナップを機能させるためのより良い方法を示すことができますか? ps html5canvastutorials の動物のスナップの例へのリンクを送信しないでください。これは、画像を処理し、形状を処理しているためです。

4

1 に答える 1

1

box2.setX と box2.setY を実行した後、レイヤーも再描画する必要があります --layer.draw()。

box2.on("dragend",function(){
    if(isInside(this)){
        box2.setX(box.getX());
        box2.setY(box.getY());
        layer.draw();
    }
});

設計は非常に単純なので、長方形の境界チェックを使用して、box2 がボックス内にあるかどうかを確認します。

var dropLeft=box.getX();
var dropRight=dropLeft+box.getWidth();
var dropTop=box.getY();
var dropBottom=dropTop+box.getHeight();

function isInside(shape){
    var x=box2.getX();
    var y=box2.getY();
    var w=box2.getWidth();
    var h=box2.getHeight();
    return(x>=dropLeft && x+w<=dropRight && y>=dropTop && y+h<=dropBottom);
}

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/ymhfM/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // I use a helper function to build Kinetic rectangles
    // You can do it manually if you want to
    var box=kRect(50,100,100,100,"white","green",6,layer);
    var box2=kRect(10,10,30,30,"lightgray","skyblue",3,layer);

    var dropLeft=box.getX();
    var dropRight=dropLeft+box.getWidth();
    var dropTop=box.getY();
    var dropBottom=dropTop+box.getHeight();

    function isInside(shape){
        var x=box2.getX();
        var y=box2.getY();
        var w=box2.getWidth();
        var h=box2.getHeight();
        return(x>=dropLeft && x+w<=dropRight && y>=dropTop && y+h<=dropBottom);
    }

    box2.on("dragmove",function(){
        if(isInside(this)){
            this.setStroke("red");
        }else{
            this.setStroke("skyblue");
        }
    });

    box2.on("dragend",function(){
        if(isInside(this)){
            box2.setX(box.getX());
            box2.setY(box.getY());
            layer.draw();
        }
    });


    // build the specified KineticJS Rectangle and add it to the stage
    function kRect(x,y,width,height,fill,stroke,strokewidth,layer){
      var rect = new Kinetic.Rect({
        x: x,
        y: y,
        width: width,
        height: height,
        fill: fill,
        stroke: stroke,
        strokeWidth: strokewidth,
        draggable:true
      });    
      layer.add(rect);
      stage.draw();
      return(rect);
    }

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-05-18T17:20:01.127 に答える