昨天朋友建议我在游戏引擎中实现缩放控件的功能，于是自己花了两天的时间
研究了以鼠标为中心缩放控件的底层代码，代码的实现并不依赖于任何语言，也就是说
可以在任何语言中使用，以下是代码实现的思想：
分析：

     先来分析一下效果，这种以鼠标为中心坐标的缩放功能是通过Flash研究得出
的，它的思想是这样， 当使用放大镜时，鼠标点击画布它就会以鼠标坐标为中心等比
例缩放对象，现在通过下面步骤去研究这种效果是怎么样实现的。
注意：下面是以横坐标为例

1.获取鼠标坐标，通过计算 MousePosFormTopLeft = 鼠标坐标 - 对象坐标

2.通过MousePosFormTopLeft 与 控件的宽比较计算出鼠标坐标到对象最近边沿的距离

然后对边沿距离进行缩放，然后再计算对象缩放后的新坐标

    
非代码设计，exml直接操作


设计模式下选中对象，之后[源码]，会直接定位到该对象在exml源码中的位置
width.down = "100%" 表示当按钮按下的时候宽度为 100%，其他情况下宽度90%
horizontalCenter="0" verticalCenter="0" 表示让图片以中心放大
实现按钮的点击缩放效果
TypeScript入门教程 https://ts.xcatliu.com/engineering/lint.html

转载于:https://www.cnblogs.com/allyh/p/10534418.html

13）Zoom缩放效果
Zoom效果可以以指定点为中心按比例缩放对象。与Resize效果不同的是，Resize改变目标对象的长宽属性，而Zoom改变的目标对象的缩放比例。在下面的例子中，当鼠标移动到图片上时开始播放Zoom效果，鼠标移出时还原。
代码清单 ZoomSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
      <![CDATA[       
          import flash.events.MouseEvent;       
          //鼠标事件处理函数
          public function doZoom(event:MouseEvent):void {
               //如果已经在播放效果了, 则反向播放效果
               if (zoom.isPlaying) {
                   zoom.reverse();
               }
               //否则播放效果
else {
zoom.play([event.target],event.type==MouseEvent.ROLL_OUT?true:false);
               }
          }
      ]]>   
</mx:Script>
<mx:Zoom id="zoom" originX="{0}" originY="{0}"
    zoomWidthTo="2"zoomHeightTo="2"zoomWidthFrom=".5"zoomHeightFrom=".5
    "/>   
<mx:Paneltitle="ZoomEffect"width="90%"height="90%"layout="absolute"
paddingTop="5"paddingLeft="10"paddingRight="10"paddingBottom="5">       
    <mx:Imageid="img"x="100"y="100"source="@Embed(source='assets/car.pn
    g')"
    scaleX=".5"scaleY=".5"rollOver="doZoom(event)"rollOut="doZoom(event
    )"/>
</mx:Panel>
</mx:Application>
9.1.3  复合效果组件
很多时候需要同时执行或按顺序执行多个动画效果，此时可以用Parallel和Sequence效果。
1）Parallel平行播放效果
Parallel效果可以同时播放多个子效果，下面例子中的Parallel效果包含了Move和Resize效果，单击“Expend”按钮时图片将放大并发生位移，单击“Contract”按钮则返回原位置，并逐渐缩小为初始大小。
代码清单 ParallelSample.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--在Parallel效果中包含Move和Resize效果-->
<mx:Parallel id="expand" target="{img}">
      <mx:Move xTo="{canvas.width/2 - 50}" yTo="{canvas.height/2-
100}"/>
      <mx:Resize widthTo="100" heightTo="200"/>
</mx:Parallel>
<mx:Parallel id="contract" target="{img}">
      <mx:Move xTo="20" yTo="20"/>
      <mx:Resize widthTo="30" heightTo="60"/>
</mx:Parallel>
<mx:Panel title="Parallel Effect" width="500" height="300">
      <mx:Canvas id="canvas" width="100%" height="100%">
          <mx:Image id="img" x="20" y="20" width="30" height="60"
               source="@Embed(source='assets/icon1.png')"/>
      </mx:Canvas>
      <!--使用ControlBar中的按钮控制效果播放-->
      <mx:ControlBar>
      <mx:Buttonlabel="Expand"click="expand.end();expand.play();"/>
<mx:Buttonlabel="Contract"click="contract.end();contract.play();"/>
      </mx:ControlBar>
</mx:Panel>   
</mx:Application>
这个例子中同时使用了Move和Resize效果，如图9-3所示。

图9-3  Parallel效果
2）Sequence顺序播放效果
Sequence效果中可以顺序添加多个子效果，并以子效果的添加顺序依次播放。下面的代码演示了Sequence效果的使用方式：
<mx:Sequence id="sequenceEffect">
<mx:Move xBy="150" duration="1000"/>
<mx:Pause duration="2000"/>
<mx:Move xBy="-150" duration="1000"/>
</mx:Sequence>
  <mx:Canvaswidth="100%"height="100%"mouseDownEffect="{sequenceEffect}
  ">
<mx:Image source="assets/plane.png"/>   
</mx:Canvas>
在这个例子里，当用户在Canvas中按下鼠标时，会依次调用Sequence中的各个子效果，首先Image对象会右移一段距离，然后暂停2秒，再左移回到原来位置。

四、WPF图形的变形

       RenderTransform：呈现变形，

TranslateTransform：偏移变形，能够使某对象的位置发生平移变化。
	
RotateTransform：旋转变化，以给定的点为旋转中心，以角度为单位进行旋转变形。
	
ScaleTransform：缩放变化，调整被变形的对象的坐标系，有缩放效果。
	
SkewTransform：扭曲变化，可以横向和纵向对元素进行扭曲。
看下面一个例子：  

 <Grid Height="969" VerticalAlignment="Bottom">

        <Grid.RowDefinitions>

            <RowDefinition Height="160*"/>

            <RowDefinition Height="163*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="601*"/>

            <ColumnDefinition Width="592*"/>

        </Grid.ColumnDefinitions>

        <!--平移变化：以原来的对象为坐标原点，然后向X轴，Y轴进行平移-->

        <Canvas Grid.Row="0" Grid.Column="0">

            <Image Width="280" Canvas.Top="50" Canvas.Left="50" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="50" Canvas.Left="50" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <TranslateTransform X="120" Y="120"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

        <!--旋转变化：Angle(旋转角度)，CenterX、CenterY(旋转体的中心)-->

        <Canvas Grid.Row="0" Grid.Column="1">

            <Image Width="280" Canvas.Top="50" Canvas.Left="200" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="50" Canvas.Left="200" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <RotateTransform Angle="45" CenterX="0" CenterY="0"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

        <!--缩放变化：CenterX、CenterY(指定的点)，ScaleX、ScaleY(X轴、Y轴缩放的倍数)-->

        <Canvas Grid.Row="1" Grid.Column="0">

            <Image Width="280" Canvas.Top="50" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="50" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

        <!--扭曲变化：CenterX、CenterY(指定的点)，AngleX、AngleY是让元素围绕X轴Y轴倾斜的角度-->

        <Canvas Grid.Row="1" Grid.Column="1">

            <Image Width="280" Canvas.Top="30" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="30" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <SkewTransform CenterX="0" CenterY="0"  AngleX="30" AngleY="30"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

</Grid>

效果图如下：



5）TransformGroup：实现多种效果的叠加，就要使用到TransformGroup，否则会报错，TransformGroup的作用类似于在控件不居中的StackPanel内嵌的作用，把多种元素组合成一种变化的容器

看下面一个例子：

<Grid>

        <Button Width="80" Height="80" Content="smile" FontSize="25" HorizontalAlignment="Left" VerticalAlignment="Top" >

            <Button.RenderTransform>

                <TransformGroup>

                    <RotateTransform Angle="45" CenterX="0" CenterY="0"/>

                    <TranslateTransform X="200" Y="200"/>

                </TransformGroup>

            </Button.RenderTransform>

        </Button>

</Grid>

效果图如下：



6）MatrixTransform：通过一种矩形算法来进行运算得到相应的效果的。