AS3 - 當它閉合循環時自動填充lineTo

Question

我一直在尋找Emanuele Feronato的字符串avoider代碼（下面的代碼和鏈接），並試圖修改它，以便當字符串相交時 - 使閉環填充該區域see image。我的數學很糟糕，我很難理解三角關係。有什麼建議麼？謝謝。

這裏有一個圖，以幫助澄清 - http://samtripp.com/eg.png

LINK：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); 

爲了解釋它是如何工作的，函數給出了要填充的線的點和碰撞的確切點，然後循環它們並繪製一個填充的polygo ñ。

（IM肯定有這樣做的更好的方式，但它的工作原理，很容易理解）