拍摄快照，缩放并重复

Question

我正在尝试将文本从 1 缩放到 5，这是一种放大类型的外观。我正在使用下面的代码：

<s:Scale target="myLabel" autoCenterTransform="true" 
         duration="2000" 
         scaleYFrom="1" scaleYTo="5" scaleXFrom="1" scaleXTo="5"
         >

文本缩放得非常厉害。所以我的目标是以大字体拍摄文本标签的快照，将其添加到显示列表中，将比例设置为 5，然后将比例设置为 1。之后我必须再次设置文本并执行一切重新来过。

这是一个 Flex 应用程序，这就是我的问题所在。我不知道如何拍摄快照，然后将其添加到（组？），然后如何删除它并重新开始？任何这方面的建议将不胜感激。

Answer 1

这是一种非常简单的方法，它可以为 fontSize 样式设置动画，而不是为缩放属性设置动画：

根据您的操作，这可能表现不佳 b/c 它如此频繁地设置新样式。此外，如果您慢慢播放此动画，看起来各个角色会“摇晃”（它们会移动或摇晃一点点）。

接下来我会发布一些关于拍摄快照和缩放的内容...

<?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>
        <s:Animate id="scaler" target="{scaledText}" >
            <s:MotionPath property="fontSize">
                <s:Keyframe time="0" value="12"/>
                <s:Keyframe time="1500" value="48"/>
            </s:MotionPath>
        </s:Animate>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

            protected function onLabelClick():void
            {
                scaler.play();
            }

        ]]>
    </fx:Script>

    <s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
</s:Application>

这是获取文本快照的方法。这与您的原始解决方案具有相同的问题，缩放后的文本非常参差不齐。但这确实展示了如何拍摄某物的快照并在另一个 Flex 对象中使用该快照：

<?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>
        <s:Scale id="scaler" target="{drawingTarget}" scaleXFrom="1" scaleXTo="5" scaleYFrom="1" scaleYTo="5"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import spark.core.SpriteVisualElement;

            protected function onLabelClick():void
            {
                var data:BitmapData = new BitmapData(200,200,true, 0xFFFFFF);
                data.draw(scaledText);

                var g:Graphics = drawingTarget.graphics;
                g.beginBitmapFill(data);
                g.drawRect(0,0, 200,200);
                g.endFill();
            }

            protected function onBitmapClick(event:MouseEvent):void
            {
                scaler.play();
            }

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
    <s:SpriteVisualElement id="drawingTarget" width="200" height="200" click="onBitmapClick(event)"/>
</s:Application>