为什么这个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方法。