图片浏览器功能的实现(一)——图片放大与缩小功能实现

图片浏览在应用中是一种比较常用的功能，主要包括图片的放大、缩小、旋转、上下左右移动图片。LZ花了一天时间实现了一下这些功能，希望能够帮到阅读此博客的码农们。

先把前期工作准备一下，创建一个UWP项目。页面代码如下(PS：很简单就不啰嗦了，直接把代码贴出来)：

<Page
    x:Class="PicViewer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PicViewer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <Grid x:Name="PicShow"  Grid.Row="0"  RightTapped="StackPanel_RightTapped" PointerPressed="StackPanel_PointerPressed" PointerReleased="PicShow_PointerReleased">
            <Image x:Name="PicImage"  Source="Assets/123.jpg" Margin="20" Stretch="Uniform" PointerMoved="Image_PointerMoved"  >
            </Image>
        </Grid>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="放大" Click="BtnEnlarge_Click"></Button>
            <Button Content="缩小" Click="BtnNarrow_Click"></Button>
            <Button Content="顺时针90°" Click="BtnClockwise90_Click"></Button>
            <Button Content="逆时针90°" Click="BtnEastern90_Click"></Button>
            <RelativePanel Margin="20,0,0,0">
                <Button Content="上" x:Name="btnUp" RelativePanel.AlignHorizontalCenterWithPanel="True" Click="btnRmUp_Click"/>
                <StackPanel x:Name="btnLeftOrRight" Orientation="Horizontal" RelativePanel.Below="btnUp">
                    <Button Content="左" Click="btnRmLeft_Click"/>
                    <Button Content="右" Click="btnRmRight_Click"/>
                </StackPanel>
                <Button Content="下" x:Name="btnDown" Click="btnRmDown_Click" RelativePanel.Below="btnLeftOrRight" RelativePanel.AlignHorizontalCenterWithPanel="True"/>
            </RelativePanel>
        </StackPanel>
    </Grid>
</Page>

运行效果如下：

下面就一一实现各按钮的功能(PS:图片上的美女是少女时代的徐珠贤，怎么样很漂亮吧！！！嘿嘿)。

图片放大、缩小功能

图片的缩放需要用到ScaleTransform类，通过这个类可以将对象以某个中心点为基准进行放大与缩小的操作。CenterX和CenterY可以指定这个中心点。具体实现看一下代码。

图片放大源码

ScaleTransform temp = new ScaleTransform();
/// <summary>
/// 放大图片
/// </summary>
private void BtnEnlarge_Click(object sender, RoutedEventArgs e)
{
    temp.CenterX = PicShow.ActualWidth / 2;
    temp.CenterY = PicShow.ActualHeight / 2;
    if (temp.ScaleX<6d)
    {
        temp.ScaleX += 0.5d;
    }
    if (temp.ScaleY < 6d)
    {
        temp.ScaleY += 0.5d;
    }
    PicShow.RenderTransform = temp;
}

图片放大实现效果

图片缩小源码

ScaleTransform temp = new ScaleTransform();
/// <summary>
/// 放大图片
/// </summary>
/// <summary>
/// 缩小图片
 /// </summary>
 private void BtnNarrow_Click(object sender, RoutedEventArgs e)
 {
     temp.CenterX = PicShow.ActualWidth / 2;
     temp.CenterY = PicShow.ActualHeight / 2;
     if (temp.ScaleX >0)
     {
         temp.ScaleX -= 0.5d;
     }
     if (temp.ScaleY > 0)
     {
         temp.ScaleY -= 0.5d;
     }
     PicShow.RenderTransform = temp;
 }

图片缩小实现效果

OK，图片放大缩小就实现了，很简单吧。下一篇将讲一下如何旋转图片。