Question

我正在尝试在一个新的Flex项目（使用Flash Builder 4.6）中创建一个可以绘制线的最小程序：

但是当它在网络浏览器（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);
}

现在，为避免点击按钮，只需在应用程序的creationComplete事件触发时调用drawLine()：

<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 Application标记扩展了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方法。

为什么这个ActionScript 3代码没有画线？

2 个答案: