Question

我正在使用 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>

Answer 1

圆心之间的距离将大于其半径之和。一些伪代码：

d = sqrt((x1 - x2)^2 + (y1 - y2)^2)
if(d > r1+r2)
    print("It is out!");
else
    print("It is inside!")

您的半径r1圆圈位于(x1, y1)，另一个半径为r2的圆圈位于(x2, y2)。

如何检测元素掉出一边的圆圈？

1 个答案: