Question

我正在尝试创建一种树形图，这样，如果你点击其中一个圆圈，它的子圆圈向外扩展，从原始圆圈开始有一定程度的随机性，用线连接。我有这个工作，但现在我想要做的是确保没有一个圆相互碰撞，没有任何线交叉。您可以查看当前正在发生的内容的屏幕截图。我的代码如下。如何更改此代码以便检查冲突并避免冲突？我已经阅读了flash的hitTestObject命令，但这只能在一个对象的上下文中工作。我想测试一个接触任何显示对象的对象。

import com.greensock.TweenMax;

var sw = stage.stageWidth;
var sh = stage.stageHeight;
var cr = 3; //circle radius
var moveRange = 25;
var circleColor = 0xcccccc;
var numCircles = 4;
var lineCanvas:Sprite = new Sprite();
addChild(lineCanvas);
var lineColor = 0xe9e9e9;
var lineWeight = 1;

function init(){
    firstCircle();
}

function firstCircle(){
    var xPos = randomRange(cr, sw-cr);
    var yPos = randomRange(cr, sh-cr);
    var newCircle:Shape = new Shape();
    newCircle.graphics.beginFill(circleColor);
    newCircle.graphics.drawCircle(0,0,cr);
    newCircle.graphics.endFill();

    var circleClip:MovieClip = new MovieClip();
    circleClip.childCircles = 2;
    circleClip.x = xPos;
    circleClip.y = yPos;
    circleClip.addChild(newCircle);

    addChild(circleClip);
    circleClip.addEventListener(MouseEvent.CLICK,clickCircle);
}

function clickCircle(e:MouseEvent):void {
    var thisCircle = e.target;
    for (var i=0; i<thisCircle.childCircles;i++){
        drawCircle(thisCircle);
    }
}

function drawCircle(parentCircle){
    var xPos = parentCircle.x;
    var yPos = parentCircle.y
    //var xPos = randomRange(cr, sw-cr);
    //var yPos = randomRange(cr, sh-cr);
    var newCircle:Shape = new Shape();
    newCircle.graphics.beginFill(circleColor);
    newCircle.graphics.drawCircle(0,0,cr);
    newCircle.graphics.endFill();

    var circleClip:MovieClip = new MovieClip();
    circleClip.childCircles = 2;
    circleClip.x = xPos;
    circleClip.y = yPos;
    circleClip.addChild(newCircle);
    addChild(circleClip);
    circleClip.addEventListener(MouseEvent.CLICK,clickCircle);
    moveCircle(circleClip,xPos,yPos);
}

function drawLine(childCircle,parentX,parentY){
        lineCanvas.graphics.lineStyle(lineWeight,lineColor);
        lineCanvas.graphics.moveTo(parentX,parentY);
        lineCanvas.graphics.lineTo(childCircle.x,childCircle.y);

//想要检查线条或圆圈是否在这里接触任何东西。如果是，我想杀死补间到圆圈（因此也停止绘制线）。

}

function moveCircle(childCircle,parentX,parentY){
    var curX = childCircle.x;
    var curY = childCircle.y;
    var moveX = randomRange(curX-moveRange,curX+moveRange);
    var moveY = randomRange(curY-moveRange-cr,curY+moveRange+cr);
    TweenMax.to(childCircle,.5, { x: moveX, y: moveY, onUpdate:drawLine, onUpdateParams:[childCircle,parentX,parentY]});
}

function randomRange(minNum:Number, maxNum:Number):Number {  
    return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);  
}

init();

Answer 1

有两种方法可以做到这一点：

重新调整代码以使用Actionscript Physics Library（即Box2D或您喜欢的任何一个）。然后，将您的“圆圈”和“线条”视为相互碰撞的物理对象，可能与您在此处尝试的效果相同。 PRO就是这个库带有各种扩展类来处理物理交互。 CON是实施中的开销。
这样做的手动/自定义方法是在舞台或初始圆上添加一个用于ENTER_FRAME的eventlistener，它将循环遍历它的子节点，并在每个“子”圆上调用hitTestObject方法，与其他方法进行比较“孩子”圈。这些行在子圈内，所以应该没问题。

我注意到你实际上并没有将childCircles添加到初始圈子，而是将它们添加到舞台上。您可能希望将这些圆圈推入数组，以便稍后引用此“collisionDetection”方法。

Answer 2

从根本上说，你需要保持屏幕上所有圆圈的列表，然后每当有东西移动（或每一帧）时，你需要检查移动圆圈对所有其他圆圈，看它们是否是碰撞。

Array可以很好地跟踪所有圈子。

然后，每当有东西移动时，只要它在移动，你就应该遍历数组并检查它是否已经击中了任何其他圆圈。使用类似的东西：

function drawLine (...) 
{

    // Your code here

    for (var i:int = 0; i < Array.length; i++)
    {  
        childCircle.hitTestObject(Array[i]);  
    }
}

或者，您可以指定onEnterFrame函数，该函数每帧检查每个圆圈与其他每个圆圈的对比，但这会使用更多资源。我猜你的资源在这一点上不是问题所在，所以请选择更简单的路线并在以后需要时进行优化。

在舞台上与多个物体进行碰撞测试

2 个答案: