vs2010 学习Silverlight学习笔记(24):TransForm处理图片

概要：

       Transform控制图片效果：旋转RotateTransform，缩放ScaleTransform，倾斜SkewTransform，移动TranslateTransform

 

内容：

       旋转RotateTransform：

        <Image.RenderTransform>

         <RotateTransform Angle="45" CenterX="120" CenterY="68"></RotateTransform>

        </Image.RenderTransform>

    缩放ScaleTransform:

        <Image.RenderTransform>

            <ScaleTransform ScaleX="0.5" ScaleY="0.5"

            CenterX="120" CenterY="68"></ScaleTransform>

        </Image.RenderTransform>

    倾斜SkewTransform：

        <Image.RenderTransform>

            <SkewTransform AngleX="30" AngleY="30"></SkewTransform>

        </Image.RenderTransform>

    移动变换TranslateTransform：

               <TextBlock.RenderTransform>

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

        </TextBlock.RenderTransform>

组合：

<Canvas Background="#CDFCAE">

    <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50" Opacity="0.3">

    </Image>

    <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50" Opacity="0.5">

        <Image.RenderTransform>

            <TransformGroup>

                <RotateTransform Angle="5"></RotateTransform>

                <SkewTransform AngleX="5" AngleY="5"></SkewTransform>

            </TransformGroup>

        </Image.RenderTransform>

    </Image>

    <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50">

        <Image.RenderTransform>

            <TransformGroup>

                <RotateTransform Angle="10"></RotateTransform>

                <SkewTransform AngleX="10" AngleY="10"></SkewTransform>

            </TransformGroup>

        </Image.RenderTransform>

    </Image>

</Canvas>

 

 

概要：

       通过transform实现图片特效，这是两种复杂变换的学习：变换组（TransformGroup）、矩阵变换（MatrixTransform ）。可以用于图片或其他控件的特效。

内容：

MatrixTransform矩阵变换：

       <ImageSource="/SLDemo30Transform2;component/img3.PNG"

               Canvas.Left="120"Canvas.Top="50" Opacity="0.5">

           <Image.RenderTransform>

                <MatrixTransform>

                   <MatrixTransform.Matrix>

                        <MatrixOffsetX="0" OffsetY="0"M12="0.2"></Matrix>

                   </MatrixTransform.Matrix>

                </MatrixTransform>

            </Image.RenderTransform>

       </Image>

 

Transform与sl中storyboard组合实现动画效果：

              <Canvasx:Name="LayoutRoot" Background="#cdfcae">

       <Canvas.Resources>

           <Storyboard x:Name="myStoryboard">

                <DoubleAnimation

                   Storyboard.TargetName="myTransform"

                    Storyboard.TargetProperty="Angle"

                    From="0"To="180" Duration="0:0:5"

                   RepeatBehavior="Forever"></DoubleAnimation>

           </Storyboard>

       </Canvas.Resources>

       <Image x:Name="imgTarget"

 Source="/SLDemo30Transform2-2;component/img.PNG"

               Canvas.Left="180"Canvas.Top="80"

              MouseEnter="imgTarget_MouseEnter"

              MouseLeave="imgTarget_MouseLeave">

           <Image.RenderTransform>

                <RotateTransformx:Name="myTransform" Angle="15"

                                CenterX="120"CenterY="68"></RotateTransform>

           </Image.RenderTransform>

       </Image>

   </Canvas>

 

代码控制的变换：

              <ImageSource="/SLDemo30Transform2-2;component/img.PNG"

               Canvas.Left="20"Canvas.Top="400"

 MouseLeftButtonDown="img_MouseLeftButtonDown">

           <Image.RenderTransform>

                <RotateTransformx:Name="imgA" Angle="0" CenterX="40"

CenterY="50"></RotateTransform>

           </Image.RenderTransform>

       </Image>

       代码：

       myTransform.Angle = myTransform.Angle + 15