1

新しい 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>
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アプリではお勧めしません）、SparkFlex4アプリのdisplayListに追加する方法が必要になります。Shapeは、メソッドが受け入れるIVisualElement唯一のインターフェースではありません。まさにこの目的を果たすSpriteVisualElementクラス を使用できます。mx（Flex 3）アプリケーションでは、メソッドを使用するだけなので、これは必要ないことに注意してください。（これは初心者にとって混乱を招く可能性があることを私は知っています：それは下位互換性の問題です。）addElement()
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 Application タグは、AddChild() メソッドを使用すると実行時エラーをスローする SkinnableComponent を拡張します。エラーを確認できるように、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 メソッドに渡すことができる階層チェーンの「最上位」コンポーネントであると思います。

于 2012-10-22T05:59:08.363 に答える