Question

主要想法

创建匹配以下练习，右侧点为换向点，左侧点为目标。

enter image description here

红点可以拖动，并且要落在蓝点上。

目标

每个点都有一个相关的值，此外，一旦在蓝点上放下一个红点，就不能在同一个蓝点上放置其他红点。

方法

存储阵列中每个蓝点的坐标，一旦红点靠近蓝点放置，与该点相关的信息将从阵列中移除（因此使其不可见）。

问题

如何检测每个红点的丢弃事件，大多数在线提供的解决方案建议.on上都有shape。但是，我应该如何唯一地识别哪一个？

资源

JSFiddle：http://jsfiddle.net/wLcxchfv/1/

Answer 1

这是检测红色圆圈掉落事件并测试它们是否与蓝色圆圈相交的一种方法。

在定义每个蓝色圆圈时分配name:'blue'（kinetic＆＃39; name＆＃39;就像CSS＆＃39; class＆＃39;）：

name:'blue'
听取所有红色圆圈上的拖放声：

anyRedCircle.on('dragend',function(){});
获取所有蓝色圆圈：

stage.find(".blue")

测试这个红色圆圈是否掉落在其中一个蓝色圆圈上：

// fetch all circles with name=='blue' and feed them into a function 
stage.find(".blue").each(function(b){
    // b is a blue circle
    var dx=this.x()-b.x();
    var dy=this.y()-b.y();
    if(dx*dx+dy*dy<radius*radius){
        // this red circle was dropped on this blue circle
    }
});

}）;

示例代码和演示： http://jsfiddle.net/m1erickson/apdohmcm/

<!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-v5.0.1.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 radius=10;
    var $last=$("#lastHit");

    for(var i=0;i<5;i++){
        makeCirclePair(30,i*30+40,150,i*30+40,(i+1)*10);
    }


    function makeCirclePair(redX,redY,blueX,blueY,value){
        var blue=makeCircle(blueX,blueY,'blue',false,value);
        var red=makeCircle(redX,redY,'red',true,0);
        red.on('dragend',function(){
            var red=this;
            var rx=this.x();
            var ry=this.y();
            stage.find(".blue").each(function(b){
                var dx=rx-b.x();
                var dy=ry-b.y();
                if(dx*dx+dy*dy<radius*radius){
                    b.name('gold');
                    b.fill('gold');
                    red.hide();
                    $last.text("Last covered circle had value="+b.value);
                }
            });
            layer.draw();
        });
        red.target=blue;
        var text=new Kinetic.Text({
            x:blueX+20,
            y:blueY-5,
            text:value,
            fill:'black',
        });
        layer.add(text);
        layer.draw();
    }


    function makeCircle(x,y,color,isDraggable,value){
        var circle = new Kinetic.Circle({
            name:color,
            x:x,
            y:y,
            radius:radius,
            fill:color,
            stroke: 'black',
            strokeWidth:2,
            draggable:isDraggable
        });
        circle.value=value;
        layer.add(circle);
        return(circle);
    }


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

</script>       
</head>
<body>
    <h4 id=lastHit>Drag red to blue.</h4>
    <div id="container"></div>
</body>
</html>

检测kineticJS中各个对象的丢弃事件

主要想法

目标

方法

问题

资源

1 个答案: