带有清除按钮的动作脚本绘图

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); 
}