如何通过在组合框中选择另一个选项来删除AS3中的图形

Question

当我单击组合框中的另一个备选方案时，我需要帮助清除我在组合框中单击的上一个图形

编码可能看起来很长而且没有必要，但我似乎找不到更简单的方法来编写它。这个项目是关于制作一个条形图，内容涉及酒后驾驶和超速驾驶等事故。因此，我使用组合框来选择显示超速图或酒后驾驶图。

cmpVelg.addItem({label:"Promillekjøring"});
cmpVelg.addItem({label:"Ulovelig hastighet"});
cmpVelg.addEventListener(Event.CHANGE, klikk);
function klikk(evt:Event):void
{
    if (cmpVelg.selectedItem.label == "Promillekjøring")
    {
        {
        var proen:Shape = new Shape();
        proen.graphics.lineStyle(2,0x660000,1);
        proen.graphics.beginFill(0x660000);
        proen.graphics.drawRect(90,170,30,180);
        proen.graphics.endFill();
        this.addChild(proen);
        var proto:Shape = new Shape();
        proto.graphics.lineStyle(2,0x660000,1);
        proto.graphics.beginFill(0x660000);
        proto.graphics.drawRect(160,270,30,80);
        proto.graphics.endFill();
        this.addChild(proto);
        var protre:Shape = new Shape();
        protre.graphics.lineStyle(2,0x660000,1);
        protre.graphics.beginFill(0x660000);
        protre.graphics.drawRect(230,300,30,50);
        protre.graphics.endFill();
        this.addChild(protre);
        var profire:Shape = new Shape();
        profire.graphics.lineStyle(2,0x660000,1);
        profire.graphics.beginFill(0x660000);
        profire.graphics.drawRect(300,320,30,30)
        profire.graphics.endFill();
        this.addChild(profire);
        var profem:Shape = new Shape();
        profem.graphics.lineStyle(2,0x660000,1);
        profem.graphics.beginFill(0x660000);
        profem.graphics.drawRect(370,280,30,70)
        profem.graphics.endFill();
        this.addChild(profem);
        var proseks:Shape = new Shape();
        proseks.graphics.lineStyle(2,0x660000,1);
        proseks.graphics.beginFill(0x660000);
        proseks.graphics.drawRect(440,280,30,70);
        proseks.graphics.endFill();
        this.addChild(proseks);
        }
    }
    if (cmpVelg.selectedItem.label == "Ulovelig hastighet")
    {
        {   
        var has1:Shape = new Shape();
        has1.graphics.lineStyle(2,0x660000,1);
        has1.graphics.beginFill(0x660000);
        has1.graphics.drawRect(90,310,30,40);
        has1.graphics.endFill();
        this.addChild(has1);
        var has2:Shape = new Shape();
        has2.graphics.lineStyle(2,0x660000,1);
        has2.graphics.beginFill(0x660000);
        has2.graphics.drawRect(160,270,30,80);
        has2.graphics.endFill();
        this.addChild(has2);
        var has3:Shape = new Shape();
        has3.graphics.lineStyle(2,0x660000,1);
        has3.graphics.beginFill(0x660000);
        has3.graphics.drawRect(230,210,30,140);
        has3.graphics.endFill();
        this.addChild(has3);
        var has4:Shape = new Shape();
        has4.graphics.lineStyle(2,0x660000,1);
        has4.graphics.beginFill(0x660000);
        has4.graphics.drawRect(300,210,30,140);
        has4.graphics.endFill();
        this.addChild(has4);
        var has5:Shape = new Shape();
        has5.graphics.lineStyle(2,0x660000,1);
        has5.graphics.beginFill(0x660000);
        has5.graphics.drawRect(370,200,30,150);
        has5.graphics.endFill();
        this.addChild(has5);
        var has6:Shape = new Shape();
        has6.graphics.lineStyle(2,0x660000,1);
        has6.graphics.beginFill(0x660000);
        has6.graphics.drawRect(440,150,30,200);
        has6.graphics.endFill();
        this.addChild(has6);
        }
    }
}

Answer 1

您创建了两个图，但还没有addChild()它们。此外，您只需要创建一次图形，而不是每次单击都创建新的形状。像这样：

var promilleGraph:Sprite; // object wide variables! Important!
var uloveligGraph:Sprite;
function init(e:Event=null):void {
    // or into the constructor of your main
    promilleGraph=new Sprite(); // creating promille graph
    var proen:Shape = new Shape();
    proen.graphics.lineStyle(2,0x660000,1);
    proen.graphics.beginFill(0x660000);
    proen.graphics.drawRect(90,170,30,180);
    proen.graphics.endFill();
    promilleGraph.addChild(proen);
    var proto:Shape = new Shape();
    proto.graphics.lineStyle(2,0x660000,1);
    proto.graphics.beginFill(0x660000);
    proto.graphics.drawRect(160,270,30,80);
    proto.graphics.endFill();
    promilleGraph.addChild(proto);
    var protre:Shape = new Shape();
    protre.graphics.lineStyle(2,0x660000,1);
    protre.graphics.beginFill(0x660000);
    protre.graphics.drawRect(230,300,30,50);
    protre.graphics.endFill();
    promilleGraph.addChild(protre);
    var profire:Shape = new Shape();
    profire.graphics.lineStyle(2,0x660000,1);
    profire.graphics.beginFill(0x660000);
    profire.graphics.drawRect(300,320,30,30)
    profire.graphics.endFill();
    promilleGraph.addChild(profire);
    var profem:Shape = new Shape();
    profem.graphics.lineStyle(2,0x660000,1);
    profem.graphics.beginFill(0x660000);
    profem.graphics.drawRect(370,280,30,70)
    profem.graphics.endFill();
    promilleGraph.addChild(profem);
    var proseks:Shape = new Shape();
    proseks.graphics.lineStyle(2,0x660000,1);
    proseks.graphics.beginFill(0x660000);
    proseks.graphics.drawRect(440,280,30,70);
    proseks.graphics.endFill();
    promilleGraph.addChild(proseks);
    // creating speeding graph
    uloveligGraph=new Sprite();
    var has1:Shape = new Shape();
    has1.graphics.lineStyle(2,0x660000,1);
    has1.graphics.beginFill(0x660000);
    has1.graphics.drawRect(90,310,30,40);
    has1.graphics.endFill();
    uloveligGraph.addChild(has1);
    var has2:Shape = new Shape();
    has2.graphics.lineStyle(2,0x660000,1);
    has2.graphics.beginFill(0x660000);
    has2.graphics.drawRect(160,270,30,80);
    has2.graphics.endFill();
    uloveligGraph.addChild(has2);
    var has3:Shape = new Shape();
    has3.graphics.lineStyle(2,0x660000,1);
    has3.graphics.beginFill(0x660000);
    has3.graphics.drawRect(230,210,30,140);
    has3.graphics.endFill();
    uloveligGraph.addChild(has3);
    var has4:Shape = new Shape();
    has4.graphics.lineStyle(2,0x660000,1);
    has4.graphics.beginFill(0x660000);
    has4.graphics.drawRect(300,210,30,140);
    has4.graphics.endFill();
    uloveligGraph.addChild(has4);
    var has5:Shape = new Shape();
    has5.graphics.lineStyle(2,0x660000,1);
    has5.graphics.beginFill(0x660000);
    has5.graphics.drawRect(370,200,30,150);
    has5.graphics.endFill();
    uloveligGraph.addChild(has5);
    var has6:Shape = new Shape();
    has6.graphics.lineStyle(2,0x660000,1);
    has6.graphics.beginFill(0x660000);
    has6.graphics.drawRect(440,150,30,200);
    has6.graphics.endFill();
    uloveligGraph.addChild(has6);
    // rest of code follows as before
}

然后，它将非常简单，只需删除一个图并添加另一个图。

function klikk(evt:Event):void
{
    if (cmpVelg.selectedItem.label == "Promillekjøring")
    {
        if (uloveligGraph.parent) uloveligGraph.parent.removeChild(uloveligGraph);
        this.addChild(promilleGraph);
    }
    if (cmpVelg.selectedItem.label == "Ulovelig hastighet")
    {
        if (promilleGraph.parent) promilleGraph.parent.removeChild(promilleGraph);
        this.addChild(uloveligGraph);
    }
}

Answer 2

您永远不会删除您创建的子级，请使用while (mySprite.numChildren > 0) mySprite.removeChildAt(0);来删除Sprite中的所有子级（如果是SpriteVisualElement，则为numElements和removeElementAt）。

你可以很容易地让它使用起来更舒适。创建一个函数来绘制你的形状，如下所示：

function drawShape(lineThickness:Number, lineColor:uint, lineAlpha:Number, fillColor:uint, fillAlpha:Number, x:Number, y:Number, w:Number, h:Number):Shape 
 {
   var sh:Shape = new Shape();
   sh.graphics.lineStyle(lineThickness,lineColor,lineAlpha);
   sh.graphics.beginFill(fillColor, fillAlpha);
   sh.graphics.drawRect(x,y,w,h);
   sh.graphics.endFill();
   return sh;
}

然后创建这样的形状：

var proen:Shape = drawShape(2,0x660000,1,0x660000.90,170,30,180);

正如Vesper已经回答的那样，您可以将这些形状存储在全局变量中（如果它们不会更改，请使用const，这样会更快）。