Рисунок чертежа w/clear button

Question

Я следую примеру урока 4 из класса ActionScript в книге, но изменяя его, добавив кнопку 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); 
}