爲什麼這個ActionScript 3代碼不能畫出一條線？

Question

我想爲一個最小的程序，可以畫一條線，在一個新的Flex項目（使用Flash Builder 4.6）：

但是，當它在Web瀏覽器（Chrome或Firefox），並且按鈕運行myButton被點擊，沒有線被繪製 - 是否有人知道如何使它工作，以及如何使它可以繪製而不需要點擊按鈕？

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <fx:Script> 

     <![CDATA[ 

      public function drawLine():void 
      { 
       var canvas:Shape = new Shape(); 
       canvas.graphics.lineStyle(3, 0xff); 
       canvas.graphics.moveTo (0,0); 
       canvas.graphics.lineTo(300,300); 
       this.addChild(canvas); 
      } 

     ]]> 

    </fx:Script> 

    <s:Button label="myButton" click="drawLine()" /> 

</s:Application> 

Answer 1

在Flex應用程序中繪製簡單線條（或者更復雜的線條，如果願意的話）的更簡單的方法是使用FXG圖形。這個小片段應該在應用程序啓動時立即畫出與示例中相同的行：

<s:Path data="M 0 0 L 300 300 Z"> 
    <s:stroke> 
     <s:SolidColorStroke color="0xff" weight="3" /> 
    </s:stroke> 
</s:Path> 

完成！

現在，如果您絕對想堅持使用示例中的Shape類（我不建議在Flex應用程序中使用該類），則需要將其添加到Spark Flex 4應用程序的displayList中。 Shape不是IVisualElement，這是addElement()方法接受的唯一接口。
您可以使用SpriteVisualElement類，它完全適用於此目的。請注意，在mx（Flex 3）應用程序中，您不需要這樣做，因爲您可以簡單地使用addChild()方法。 （我知道這可能對新手來說是混亂的。它是向後兼容的問題）

private function drawLine():void { 
    var shape:Shape = new Shape(); 
    shape.graphics.lineStyle(3, 0xff); 
    shape.graphics.moveTo (0,0); 
    shape.graphics.lineTo(300,300); 

    var sve:SpriteVisualElement = new SpriteVisualElement(); 
    sve.addChild(shape); 

    addElement(sve); 
} 

現在，爲了避免點擊按鈕，只需調用drawLine()當應用程序的creationComplete事件觸發：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      minWidth="955" minHeight="600" 
      creationComplete="drawLine()"> 

Answer 2

的Spark應用標籤延伸SkinnableComponent使用addChild（）方法時將引發運行時錯誤。確保安裝了Flash Player的調試版本，以便您可以看到該錯誤。它會幫助你調試很多東西。

下面是一些代碼，工程：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <fx:Script> 

     <![CDATA[ 

      public function drawLine():void 
      { 
       drawingArea.graphics.lineStyle(3, 0x000000); 
       drawingArea.graphics.moveTo (0,0); 
       drawingArea.graphics.lineTo(300,300); 
      } 

     ]]> 

    </fx:Script> 

    <s:Button label="myButton" click="drawLine()" /> 


    <s:Group width="100%" height="100%" id="drawingArea"> 

    </s:Group> 

</s:WindowedApplication> 

我給應用程序它自己的繪圖區域，在MXML，並提請該區域。這是一個AIR應用程序;但相同的代碼應該在基於web的應用程序中工作。

這是另一個示例，它不會在MXML中創建繪圖區域;但是ActionSCript：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <fx:Script> 

     <![CDATA[ 
      import mx.core.UIComponent; 

      public function drawLine():void 
      { 
       var canvas :UIComponent = new UIComponent; 
       canvas.graphics.lineStyle(3, 0xff); 
       canvas.graphics.moveTo (0,0); 
       canvas.graphics.lineTo(300,300); 
       this.addElement(canvas); 

      } 

     ]]> 

    </fx:Script> 

    <s:Button label="myButton" click="drawLine()" /> 


</s:WindowedApplication> 

注意;我在這裏使用了UIComponent作爲繪圖元素。我相信UIComponent是實現IVisualElement的層次鏈上的「最高」組件，可以傳遞給addElement方法。