WPF纯手工两步打造图片切割工具（一）

一、功能说明
1、四种图片切割方式：缩放:指定宽高(可能变形)、缩放:指定宽(高按比例)、缩放:指定高(宽按比例)、裁减:指定宽高。
2、批量图片切割。
3、目标存储区同名文件处理：直接覆盖、重新命名。
4、支持水印文字添加(图片右下角10px)。
5、动画效果。
6、支持自设定插补模式和呈现质量。

本文分两部分：
（一）界面布局及数据初始化
（二）编码实现

效果预览：

上周末无聊至极出去溜达，顺便带着相机抓了一些有趣的东西，回来本来打算共享的网上，可是当从相机把照片导到电脑上时，几十张的高像素图片最小的也有5M！如果原图上传到网上，即使有网站给充足的空间，但网速也会影响上传及浏览效果。没办法就用Photoshop一张张修改，还没处理10张就烦的头顶！图像->图像大小-> 宽高->确定！重复！并且PS加载高像素图也很慢。所以干脆用WPF拖几个控件，造一个方便的图片切割小工具，对图像质量要求不很高的话足够用了。

二、布局

1、窗体布局
窗口上最上方是操作区，包括一些设置和启动转换等操作，中间区域是图片预览区域，每一张要处理的图片都会显示在中间区域，最下方是缩略图列表，每一张处理的图片都会添加到这里。当鼠标移动到缩略图列表图像上时，在中间区域也会显示该图的放大版。通过XAML可以很清楚的看出整个窗口分上、中、下三部分：
 
XAML布局：
第一个Grid行里放置操作项的相关控件：

1 <GroupBox x:Name="gpSet" Header="设置" Height="116" HorizontalAlignment="Left" VerticalAlignment="Top" Width="794" Foreground="White">
2 <Grid>
3
4  </Grid>
5 </GroupBox>

第二个Grid行里放置动画处理所用到的Image和进度条：

<Canvas Grid.Row="1" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Height="334" Width="778">
<Image Name="imgMain" Opacity="0" Canvas.Left="1" Canvas.Top="-114" Height="557" Stretch="Fill" Width="778">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform CenterX="400" CenterY="300"/>
<RotateTransform CenterX="400" CenterY="300"/>
<TranslateTransform Y="0"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Effect>
<DropShadowEffect Color="Black" BlurRadius="5" Direction="-45" ShadowDepth="5"/>
</Image.Effect>
</Image>
</Canvas>
<my:UcProgressBar Grid.Row="1" HorizontalAlignment="Left" Margin="0,314,0,0" x:Name="ucProgressBar1" VerticalAlignment="Top" Width="794"/>

第三个Grid行里放置缩略图列表控件：

<ScrollViewer x:Name="scrolls" Margin="0,0,0,0" Grid.Row="2" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Height="110" Width="794" MouseLeave="scrolls_MouseLeave">
<ScrollViewer.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#55F3F384" Offset="0.408"/>
<GradientStop Color="#AA056012" Offset="1"/>
<GradientStop Color="#AA056012"/>
</LinearGradientBrush>
</ScrollViewer.Background>
<StackPanel x:Name="spnlView" Margin="0,0,0,0" Height="90" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Hidden"/>
</ScrollViewer>

其中为了方便使缩略图列表在有限的宽度内全部显示，必须用横向滚动条处理，外面放置ScrollViewer指定宽度：788px，并让其显示横向滚动条。内置的StackPanel不设置宽度，使其根据内容自适应宽，如此以来便可以借助ScrollViewer的横向滚动条浏览所有的缩略图。
2、逻辑处理
当图片处理操作启动后，每个待处理的图片都会从主区域以动画从无到有地移动到最下方的缩略图列表中：动画开始——移动(透明度、大小，位置)——处理图片切割——添加到缩略图列表——下一个动画开始。。。如此反复所有被选中的图片。

3、数据初始化
处理选项设置了多个自定义，为了方便方便窗体选择操作，所以构造了枚举的集合以填充下拉列表，这里要进行选项列表与枚举的转。
（1）插补模式(InterpolationModeData)：System.Drawing.Drawing2D.InterpolationMode 枚举指定在缩放或旋转图像时使用的算法。

View Code

（2）呈现质量(SmoothingModeData)：System.Drawing.Drawing2D. SmoothingMode 枚举指定是否将平滑处理（抗锯齿）应用于直线、曲线和已填充区域的边缘。

View Code

（3）图片处理方式(TailorTypeData)：缩放:指定宽高(可能变形)、缩放:指定宽(高按比例)、缩放:指定高(宽按比例)、裁减:指定宽高。根据处理方式的不同决定是否必须填写宽或高。

View Code

（4）选择图片资源
由于要支持批量处理，所以在选择待处理图片的时候应该可以多选，并且设定在打开目录窗口时只显示图片资源：*.jpg *.gif *.png。

1 System.Windows.Forms.OpenFileDialog ofd =new System.Windows.Forms.OpenFileDialog();
2 ofd.Multiselect =true;
3 ofd.Filter ="图片文件(*.jpg *.gif *.png)|*.jpg;*.gif;*.png|All Files (*.*)|*.*";

这一节就到这里，下一节主要描述逻辑编码部分，争取达到尽量详尽明了！

试用下载 谢谢您能提出改善意见！