2012-01-11 62 views
3

我目前正在玩blob代碼,並有一個小問題。as3動畫「blob」

問題是,有時blob會倒置,所以白色的顏色會進入blob本身,並在其中形成一個白洞,我不是很想要。

關於如何解決這個問題的任何建議,所以blob始終保持一個小小的一塊?

這是一個IM與玩弄: http://wonderfl.net/c/rYzh

class Blob extends Sprite 
{ 

    private var speed :Number = .01; 
    private var grav  :Number = .25; 
    private var dist  :Number = 27; 
    private var k  :Number = .55; 
    private var damp  :Number = .99; 
    private var cx  :Number = 370; 
    private var cy  :Number = 0; 
    private var points :Array = []; 
    private var mids  :Array = []; 
    private var numPoints:Number = 30; 
    private var oneSlice :Number = Math.PI * 2/numPoints; 
    private var radius :Number = 100; 

    public function Blob() 
    { 
     for (var i:Number = 0; i < numPoints; i++) 
     { 
      var angle:Number = oneSlice * i; 
      var obj:Object = {x:Math.cos(angle) * radius + cx, y:Math.sin(angle) * radius + cy, a:angle - Math.PI/2, wave:i*.08, vx:0, vy:0}; 
      points[i] = obj; 
     } 

     this.addEventListener(Event.ENTER_FRAME, update); 

    } 

    private function update(event:Event):void 
    { 
     this.graphics.clear(); 
     this.graphics.lineStyle(1, 0x666666, 50); 
     this.graphics.beginFill(0x000000, 100); 
     for (var i:Number = 0; i < numPoints-1; i++) 
     { 
      mids[i] = {x:(points[i].x + points[i + 1].x)/2, y:(points[i].y + points[i + 1].y)/2}; 
     } 
     mids[i] = {x:(points[i].x + points[0].x)/2, y:(points[i].y + points[0].y)/2}; 
     this.graphics.moveTo(mids[0].x, mids[0].y); 
     for (var j:Number = 0; j < numPoints - 1; j++) 
     { 
      this.graphics.curveTo(points[j+1].x, points[j+1].y, mids[j+1].x, mids[j+1].y); 
     } 
     this.graphics.curveTo(points[0].x, points[0].y, mids[0].x, mids[0].y); 
     this.graphics.endFill(); 

     var point:Object; 
     for (var k:Number = 0; k < numPoints - 1; k++) 
     { 
      point = points[k]; 
      spring(point, points[k + 1]); 
      mouseSpring(point); 
     } 
     spring(points[k], points[0]); 
     mouseSpring(points[k]); 

     for (var l:Number = 0; l < numPoints; l++) 
     { 
      point = points[l]; 
      point.vx *= damp; 
      point.vy *= damp; 
      point.vy += grav; 
      point.x += point.vx; 
      point.y += point.vy; 

      if (point.y > stage.stageHeight) 
      { 
       point.y = stage.stageHeight; 
       point.vy = 0; 
      } 
      if (point.x < 20) 
      { 
       point.x = 20; 
       point.vx = 0; 
      } 
      else if (point.x > stage.stageWidth) 
      { 
       point.x = stage.stageWidth; 
       point.vx = 0; 
      } 
     } 
    } 

    private function spring(p0:Object, p1:Object):void 
    { 
     var dx:Number = p0.x - p1.x; 
     var dy:Number = p0.y - p1.y; 
     var angle:Number = p0.a+Math.sin(p0.wave += speed)*2; 
     var tx:Number = p1.x + dist * Math.cos(angle); 
     var ty:Number = p1.y + dist * Math.sin(angle); 
     var ax:Number = (tx - p0.x) * k; 
     var ay:Number = (ty - p0.y) * k; 
     p0.vx += ax * .5; 
     p0.vy += ay * .5; 
     p1.vx -= ax * .5; 
     p1.vy -= ay * .5; 
    } 

    private function mouseSpring(p:Object):void 
    { 
     var dx:Number = p.x - stage.mouseX; 
     var dy:Number = p.y - stage.mouseY; 
     var dist:Number = Math.sqrt(dx * dx + dy * dy); 
     if (dist < 40) 
     { 
      var angle:Number = Math.atan2(dy, dx); 
      var tx:Number = stage.mouseX + Math.cos(angle) * 40; 
      var ty:Number = stage.mouseY + Math.sin(angle) * 40; 
      p.vx += (tx - p.x) * k; 
      p.vy += (ty - p.y) * k; 
     } 
    } 

} 

回答

1

默認情況下,圖形API使用EVENODD纏繞,這意味着如果填充路徑將自身重疊,它否定了填充。

您需要使用Graphics.drawPath函數,其值爲「nonZero」。這會導致它在路徑重疊時不會否定。看看這個little demo,形成一個自身重疊的形狀,並將繞組從evenOdd切換到nonZero,以查看它是如何工作的。

至於翻譯你的代碼,而不是在你的update()例程中使用graphics.moveTo()和.curveTo()調用,你需要建立一個描述你的路徑(aka,drawPath )並將它們傳遞到graphics.drawPath()最後。 Adobe展示了一個示例here