1

我正在尝试在一个新的 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>
4

2 回答 2

4

在 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()">
于 2012-10-22T07:03:26.317 回答
1

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 中创建绘图区域；但动作脚本：

<?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 方法。

于 2012-10-22T05:59:08.363 回答