0
点赞
收藏
分享

微信扫一扫

WPF 图形转换(旋转变换,缩放变换,倾斜变换,移动变换,变换组)

水沐由之 2022-02-15 阅读 211
wpfmicrosoft

WPF有五种基本变换,分别是RotateTransform:旋转变换、ScaleTransform:缩放变换、SkewTransform:倾斜变换、TranslateTransform:移动变换、TransformGroup:变换组.

 

RotateTransform:旋转变换
        使用方法:设置Angle属性为需要转换的角度,设置其中心点为CenterX、CentyY,这个是X、Y轴的二维平面旋转。
        下面我们来看一个Demo实例,可以设置让图标按照某一个角度旋转,其代码如下:

        <!--RotateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image11"        Stretch="Fill"  Width="50" Source="/SLTrans;component/iPhone_001.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image1"        Stretch="Fill"  Width="50" Source="/SLTrans;component/iPhone_001.png" >
            <Image.RenderTransform>
                <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
            </Image.RenderTransform>
        </Image>

 ScaleTransform:缩放变换
        使用方法:使用CenterX 和 CenterY属性指定一个中心点,然后设置ScaleX让对象在X轴进行缩放,设置ScaleY属性让对象在Y轴进行缩放。
        下面我们来看一个Demo实例,可以设置让图标按照某点缩放,其代码如下:

        <!--ScaleTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image21"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image2"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png">
            <Image.RenderTransform>
                <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"></ScaleTransform>
            </Image.RenderTransform>
        </Image>

 SkewTransform:倾斜变换
        使用方法:使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。
        下面我们来看一个Demo实例,可以设置让图标按照某点倾斜,其代码如下:

        <!--SkewTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image31"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image3"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" >
            <Image.RenderTransform>
                <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"></SkewTransform>
            </Image.RenderTransform>
        </Image>

TranslateTransform:移动变换
        使用方法:X属性定义元素相对其原来位置偏移的X轴像素量。Y属性也是让元素相对原来位置偏移的Y轴像素量。
        下面我们来看一个Demo实例,可以设置让图标移动变换,其代码如下:

        <!--TranslateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image41"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image4"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" >
            <Image.RenderTransform>
                <TranslateTransform X="10" Y="50"></TranslateTransform>
            </Image.RenderTransform>
        </Image>

TransformGroup:变换组
        使用方法:在其内部可以应用多种变换规则,直接在其内添加其他变换方式即可。
        下面我们来看一个Demo实例,可以设置让图标变换多个组,其代码如下:

        <!--TransformGroup变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image51"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image5"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1"/>
                    <TranslateTransform Y="100"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>

原文地址:https://www.cnblogs.com/cqxfy/p/6117359.html

举报

相关推荐

0 条评论