KineticJS Events on dragging and dropping dynamicly made shapes

Question

I have JS object with 3 JSON entries, as JavaScript loops through the 3 it creates shapes on the canvas using KineticJS. I'm trying to make it so that when I pass a pixel threshold, in this case 400px, It creates an alert box with the JSON jstext tied to the shape. Here's the code

var tools = [{'title':'method', 'jstext':'function newMethod() {'},
                   {'title':'var', 'jstext':'var'},
                   {'title':'end', 'jstext':'}'},
                  ]

var startX = 20;
      var startY = 30;
      for (var i=0; i<tools.length; i++) {
            alert(tools[i].jstext)
            var x = new Kinetic.Rect({
            x: startX,
            y: startY,
            width: 100,
            height: 50,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 3,
            draggable: true,
            offset:10,
          });

          startY = startY + 65;
          layer.add(x);

x.on('dragend', function() {
        if (x.getAttr('x')>=400) {
          console.log(tools[i].jstext)
        };

      }

It creates the rectangles, it just only logs if the last shape is moved and I want it to pull that text if any shape is moved. Any Ideas? Thanks!

Answer 1

You can:

Create new rectangle inside a function,
Add .originalX and originalY properties so each rect saves its original XY position,
Add a dragend handler that calculates if .getX/.getY are further than 400 px from original XY.

The code would be something like this:

<!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://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

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

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

    var startX = 20;
    var startY = 30;

    // create 5 test rects
    for (var i=0; i<5; i++) {
        newRect(startX,startY,i);
        startY = startY + 65;
    }

    // function to create a new rect
    function newRect(x,y,id){

        var rect = new Kinetic.Rect({
            id:id,
            x: startX,
            y: startY,
            width: 100,
            height: 50,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 3,
            draggable: true,
            offset:10,
        });

        // have the rect save its original XY
        rect.originalX=x;
        rect.originalY=y;

        // on dragend, calc if the rect has moved >400px
        rect.on("dragend",function(){
            var dx=this.getX()-this.originalX;
            var dy=this.getY()-this.originalY;
            var id=this.getId();
            if(dx*dx+dy*dy>400*400){
                alert(id+" is currently beyond 400px of original XY");
            }else{
                console.log(id+" is currently inside 400px of original XY");
            }
        });

        layer.add(rect);
        layer.draw();
    }

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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

KineticJS Events on dragging and dropping dynamicly made shapes

Question

1 answers

solution1
1 ACCPTED 2013-11-01 16:47:15

KineticJS Events on dragging and dropping dynamicly made shapes

Question

1 answers

solution1 1 ACCPTED 2013-11-01 16:47:15

solution1
1 ACCPTED 2013-11-01 16:47:15