0

我有带有 3 个 JSON 条目的 JS 对象，因为 JavaScript 循环通过 3 个它使用 KineticJS 在画布上创建形状。我试图做到这一点，以便当我通过像素阈值时，在本例中为 400px，它会创建一个警报框，其中 JSON jstext 绑定到形状。这是代码

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

      }

它创建矩形，它只记录最后一个形状是否移动，并且我希望它在移动任何形状时拉出该文本。有任何想法吗？谢谢！

4

1 回答 1

1

你可以：

  • 在函数内创建新矩形，
  • 添加 .originalX 和 originalY 属性，以便每个矩形保存其原始 XY 位置，
  • 添加一个计算 .getX/.getY 是否距离原始 XY 超过 400 px 的 dragend 处理程序。

代码将是这样的：

<!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>
于 2013-11-01T16:47:15.530 回答