背景
机缘巧合吧,当时在全网寻找图像剪裁工具,但大都不能满足需求,于是决定动手写。当然如果只是为了完成这么一个功能就没有必要记录了,主要是不依赖与第三方图像库,且实现方式简单,自我感觉很有纪念意义。
技术栈
- C#
- .NET6 可无缝升级后续版本
- WPF
- 无第三方库依赖
实现思路
- 使用 Canvas 绘制选区,监听鼠标Down、Move事件,在事件中获取鼠标位置处理选框绘制
- 获取鼠标左键 Down 时的屏幕坐标,记录为画框起始位置
- 在鼠标左键并且移动的过程中获取鼠标的屏幕位置,记录为画框结束位置
- Move 的过程中需要不断清除之前的画框,并重新绘制出新的画框,直到左键松开,绘制出最新的画框
- 根据最新的画框位置,将屏幕位置转换成图像位置,从而获取到真实的图像选择区域
- 通过 CroppedBitmap 取出备选区域的图像内容
核心代码
界面布局
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="WhiteSmoke" CornerRadius="4">
<Canvas
x:Name="MainCanvas"
MouseDown="Canvas_MouseDown"
MouseMove="Canvas_MouseMove">
<Image x:Name="MainImage" Stretch="Uniform" />
</Canvas>
</Border>
<Grid Grid.Column="1" Margin="5,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Button
Width="100"
Height="30"
Margin="10,0"
Background="DarkGreen"
Click="Browse_Click"
Content="浏览" />
<Button
Width="100"
Height="30"
Margin="10,0"
Background="DarkBlue"
Click="Save_Click"
Content="另存" />
</StackPanel>
<Border
Grid.Row="1"
Background="WhiteSmoke"
CornerRadius="4">
<Image
x:Name="ResultImage"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform"