actionscript-3 - AS3 - 当它形成一个闭环时自动填充 lineTo

Question

我一直在查看 Emanuele Feronato 的字符串避免器代码(下面的代码和链接)并尝试对其进行调整，以便当字符串与自身相交时 - 形成一个闭环 - 它只填充该区域 see image .我的数学很糟糕，我正在努力理解三角函数。有什么建议？谢谢。

这是帮助澄清的图表 - http://samtripp.com/eg.png

友情链接:http://www.emanueleferonato.com/2011/10/13/develop-a-flash-game-like-string-avoider-as3-version-and-more/

package {
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
public class Main extends Sprite {
    private var tailLenght:Number=50;
    private var tailNodes:Number=10;
    private var head:headMc=new headMc();
    private var tailCanvas:Sprite=new Sprite();
    private var nodes:Vector.<Point>=new Vector.<Point>();
    public function Main() {
        addChild(head);
        head.x=320;
        head.y=240;
        addChild(tailCanvas);
        for (var i:int=0; i<tailNodes; i++) {
            nodes[i]=new Point(head.x,head.y);
        }
        addEventListener(Event.ENTER_FRAME,update);
    }
    private function update(e:Event):void {
        head.x=mouseX;
        head.y=mouseY;
        tailCanvas.graphics.clear();
        tailCanvas.graphics.lineStyle(2,0x00ff00);
        tailCanvas.graphics.moveTo(head.x,head.y);
        nodes[0]=new Point(head.x,head.y);
        for (var i:int=1; i<tailNodes-1; i++) {
            var nodeAngle:Number=Math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
            nodes[i]=new Point(nodes[i-1].x+tailLenght*Math.cos(nodeAngle),nodes[i-1].y+tailLenght*Math.sin(nodeAngle));
            if (i<tailNodes-2) {
                for (var j:int=i-1; j>=1; j--) {
                    var p:Point=lineIntersection(nodes[j],nodes[j-1],nodes[i],nodes[i+1]);
                    if (p!=null) {
                        tailCanvas.graphics.beginFill(0x000000);
                        tailCanvas.graphics.drawCircle(p.x,p.y,4);
                        tailCanvas.graphics.endFill();
                        tailCanvas.graphics.moveTo(nodes[i-1].x,nodes[i-1].y);
                    }
                }
            }
            tailCanvas.graphics.lineTo(nodes[i].x,nodes[i].y);
        }
    }
    private function lineIntersection(p1:Point,p2:Point,p3:Point,p4:Point):Point {
        var x1:Number=p1.x;
        var x2:Number=p2.x;
        var x3:Number=p3.x;
        var x4:Number=p4.x;
        var y1:Number=p1.y;
        var y2:Number=p2.y;
        var y3:Number=p3.y;
        var y4:Number=p4.y;
        var px:Number=((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
        var py:Number=((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
        var segment1Len:Number=Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2);
        var segment2Len:Number=Math.pow(p3.x-p4.x,2)+Math.pow(p3.y-p4.y,2);
        if (Math.pow(p1.x-px,2)+Math.pow(p1.y-py,2)>segment1Len) {
            return null;
        }
        if (Math.pow(p2.x-px,2)+Math.pow(p2.y-py,2)>segment1Len) {
            return null;
        }
        if (Math.pow(p3.x-px,2)+Math.pow(p3.y-py,2)>segment2Len) {
            return null;
        }
        if (Math.pow(p4.x-px,2)+Math.pow(p4.y-py,2)>segment2Len) {
            return null;
        }
        return new Point(px,py);
    }
}

}

Answer 1

在那个网站上可以找到很多好的教程，我推荐它。

刚刚编写了一个快速函数，它可以满足您的需求:

private function fillIntersection(p,startN,endN):void{
    tailCanvas.graphics.beginFill(0x0000FF,0.5);
    tailCanvas.graphics.moveTo(p.x,p.y);

    for (var i:int=endN; i<startN; i++) {
        tailCanvas.graphics.lineTo(nodes[i].x,nodes[i].y);
    }

    tailCanvas.graphics.lineTo(nodes[startN].x,nodes[startN].y);
    tailCanvas.graphics.endFill();
}

你应该在之后运行它: if (p!=null) { (第 34 行)

像这样:

if (p!=null) {
        fillIntersection(p,i,j);
        tailCanvas.graphics.beginFill(0x000000);

为了解释它是如何工作的，函数给出了要填充的线的点和碰撞的确切点，然后循环遍历它们并绘制一个填充的多边形。

(我相信有更好的方法可以做到，但它有效且易于理解)