3

動的コンテンツでテキストエリアを手書きする人をシミュレートするアニメーションをFlexで開発する必要があります。フォントの実際の曲線に沿ったペンは気にしませんが、ペンの位置に沿ったマスクを使用して、テキストを1行ずつ表示するクリーンな方法が必要です。

このようなものですが、ネイティブのテキストエリアと私自身のフォントがあります。

http://activeden.net/item/handwriting-animation-tool-v25/11733

mxmlのtextareaにはマスクを1つしか含めることができないため、プログラムでマスクを作成する必要があると思います。誰かがこれをもうしましたか？

ありがとうございました

4

1 に答える 1

3

そのウェブサイトに表示されているもののように、真の効果を生み出すためのいくつかの異なるテクニックがあります。そして、それはかなり退屈な作業であることに注意してください。Flexでできることは、任意の形状のマスクを使用して文字を順番に表示するテキストの行を表示することです。簡単な例を次に示します。

<fx:Script>
    <![CDATA[
        import mx.graphics.SolidColor;

        import spark.components.Group;
        import spark.components.RichText;
        import spark.primitives.Rect;

        private function createMultilineMask():void
        {               
            var txt:RichText = new RichText();
            txt.x = 20;
            txt.width = 260;
            txt.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus, eros ac dignissim interdum...";
            txt.setStyle('fontFamily', 'Times');
            txt.setStyle('fontStyle', 'italic');
            txt.setStyle('fontSize', 16);
            txt.setStyle('color', 0xFF0000);                

            var textMask:Group = new Group();

            var ln1:Rect = new Rect();
            ln1.x = 0;
            ln1.y = 0;
            ln1.width = 0;
            ln1.height = 14;
            ln1.fill = new SolidColor(0x000000);
            textMask.addElement(ln1);

            var ln2:Rect = new Rect();
            ln2.x = 0;
            ln2.y = 20;
            ln2.width = 0;
            ln2.height = 14;
            ln2.fill = new SolidColor(0x000000);
            textMask.addElement(ln2);

            var ln3:Rect = new Rect();
            ln3.x = 0;
            ln3.y = 40;
            ln3.width = 0;
            ln3.height = 14;
            ln3.fill = new SolidColor(0x000000);
            textMask.addElement(ln3);

            var container:Group = new Group();
            container.x = 100;
            container.y = 100;
            container.mask = textMask;
            container.maskType = 'clip';
            container.addElement(txt);
            addElement(container);

            addEventListener(Event.ENTER_FRAME, drawLine);

            function drawLine(event:Event):void
            {
                if (ln1.width < 300)
                    ln1.width += 2;
                else if (ln2.width < 300)
                    ln2.width += 2;
                else if (ln3.width < 300)
                    ln3.width += 2;
                else
                    removeEventListener(Event.ENTER_FRAME, drawLine);
            }
        }
    ]]>
</fx:Script>

HTH FTQuest

于 2011-02-19T04:03:16.823 に答える