我正在使用raphael.js库并在其中创建了一个圆圈和一个黑色的小圆圈。现在我想把那个小圆圈拖出大圆圈。如何检测圆圈是否落在圆圈之外？
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(function () {
var paper = new Raphael(0, 0, 150,150),
circle = paper.circle(75, 75, 15);
//circle2=false;
circle2=paper.circle(75, 75, 4);
circle2.hide();
circle.attr({
'stroke': '#f00',
'stroke-width': 4,
'fill': '#fff'
});
circle.hover(function(e) {
this.animate({ r: 30 }, 1000,'super_elastic');
circle2.show();
'fill': '#000'
});
}, function() {
this.animate({ r: 15 }, 1000, 'super_elastic');
circle2.hide();
});
circle2.hover(function(e) {
circle.animate({ r: 30 }, 1000,'super_elastic');
circle2.show();
}, function() {
});
/*******/
var p = paper.set(circle2);
circle2.set = p;
p.newTX=0,p.newTY=0,p.fDx=0,p.fDy=0,p.tAddX,p.tAddY,p.reInitialize=false;
start = function () {
},
move = function (dx, dy,x,y,cx) {
var a = this.set;$('#circle2').text(dx);
$('#circle3').text(dy);
$('#circlex').text(x);
$('#circley').text(y);
$('#circlez').text(cx);
a.tAddX=dx-a.fDx,a.tAddY=dy-a.fDy,a.fDx=dx,a.fDy=dy;
if(a.reInitialize)
{
a.tAddX=0,a.fDx=0,a.tAddY=0;a.fDy=0,a.reInitialize=false;
}
else
{
a.newTX+=a.tAddX,a.newTY+=a.tAddY;
a.attr({transform: "t"+a.newTX+","+a.newTY});
}
},
up = function () {
this.set.reInitialize=true;
};
p.drag(move, start, up);
/*******/
// modify this function
Raphael.easing_formulas.super_elastic = function(n) {
return Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI) / .3) + 1;
};
});
</script>
<body>
<div name='circle2' id='circle2' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circle3' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circlex' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circley$$' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circlez' style="
background: red;
width: 10px;
height: 10px;
"></div>
</body>