在dynamicJS中检测单个对象的掉落事件

Question

大意

在下面的练习中创建比赛，右边的点为拖动，左边的点为目标。

在此处输入图片说明

红点是可拖动的，将放置在蓝点上。

目标

每个点都具有与之关联的值，此外，一旦将红色点放置在蓝色点上，就不能再将其他红色点放置在同一蓝色点上。

途径

将每个蓝点的坐标存储在数组中，一旦将红点放置在蓝点附近，则与该点相关的信息将从数组中删除（因此使其不可见）。

问题

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

资源

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

Answer 1

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

定义每个蓝色圆圈时，分配name:'blue' （动态“名称”就像CSS“类”一样）：
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()-bx(); var dy=this.y()-by(); 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>

在dynamicJS中检测单个对象的掉落事件

问题描述

大意

目标

途径

问题

资源

1 个解决方案

解决方案1
1 已采纳 2014-08-09 16:00:52

在dynamicJS中检测单个对象的掉落事件

问题描述

大意

目标

途径

问题

资源

1 个解决方案

解决方案1 1 已采纳 2014-08-09 16:00:52

解决方案1
1 已采纳 2014-08-09 16:00:52