帶有清除按鈕的動作腳本繪圖

Question

我在書中的腳本動畫教室中使用示例教程4，但是通過向舞臺添加CLEAR按鈕來修改它。

每當我測試所有的功能工作，但是，我能夠在我的按鈕的頂部繪製。理想情況下，當用戶繪製時，顏色應該在按鈕下方。

在時間軸中，我有背景，按鈕和動作的圖層。我在下面添加了編碼以幫助更快地解決問題。謝謝！

package { 

import flash.display.MovieClip; 

    public class Ellipse extends MovieClip { 

     // constructor 
     public function Ellipse(w:Number=40,h:Number=40,color:Number=0xff0000) { 
      graphics.beginFill(color); 
      graphics.drawEllipse(0, 0, w, h); 
      graphics.endFill(); 
     } 

    } // end class Ellipse 

} // end package 




import flash.events.MouseEvent; 

var color:Number; 
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing); 
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing); 

function startDrawing(e:MouseEvent):void { 
stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes); 
color = Math.random() * 0xFFFFFF; 
} 

function stopDrawing(e:MouseEvent):void { 
stage.removeEventListener(MouseEvent.MOUSE_MOVE, makeShapes); 
} 

function makeShapes(e:MouseEvent):void { 
var ellipse:Ellipse = new Ellipse(10, 10, color); 
stage.addChild(ellipse); 
ellipse.x = mouseX; 
ellipse.y = mouseY; 
} 


btnClear.addEventListener(MouseEvent.CLICK, clearBoard); 

function clearBoard(e:MouseEvent) 
{ 
    for (var i:int = stage.numChildren-1; i >= 1; i--) { 
    stage.removeChildAt (i); 
} 
} 

Answer 1

addChild添加項目到顯示列表的頂部，所以當你要添加的橢圓形舞臺，你在你的按鈕和電影的前面添加。也就是說，您的電影（使用按鈕）位於索引0處，但您的形狀將添加在索引1和更高處。一個解決辦法是將它們添加電影，而不是下面，用addChildAt：

var shapeIndex:uint = 0; 
function makeShapes(e:MouseEvent):void { 
    var ellipse:Ellipse = new Ellipse(10, 10, color); 
    stage.addChildAt(ellipse, shapeIndex); // add the shape starting at 0, and count up from there 
    // this will keep the movie at the top of the stage's display list 
    shapeIndex++; 
    ellipse.x = mouseX; 
    ellipse.y = mouseY; 
} 

另一種解決方案是，首先做一個容器夾，然後添加形狀的這種容器片段來代替。這使您可以輕鬆控制在形狀顯示：

var container : Sprite = new Sprite(); 
stage.addChildAt(container, 0); // add the container to the bottom of the stage 
// now we can just easily add our shapes to the container, and they will all be behind the main movie. 
function makeShapes(e:MouseEvent):void { 
    var ellipse:Ellipse = new Ellipse(10, 10, color); 
    container.addChild(ellipse); 
    shapeIndex++; 
    ellipse.x = mouseX; 
    ellipse.y = mouseY; 
} 

這實際上使其他的東西，如清除您的屏幕更容易。您可以簡單地刪除並重新創建容器剪輯：

function clearBoard(e:MouseEvent) 
{ 
    stage.removeChild(container); 
    container = new Sprite(); 
    stage.addChildAt(container, 0); 
}