Silverlight 控件裁剪图像

• 下载演示 - 轻量级 - 358.7 KB
• 下载演示 - 3.6 MB

引言   

我一直在 Silverlight 中寻找一个裁剪控件，我找到了这篇文章  Silverlight 扩展 Canvas 控件裁剪图像。  它描述的控件以其简单性和实用性给我留下了深刻的印象。因为我需要一个带有可移动边缘的裁剪控件，所以我开始编写我自己的版本。

主要功能包括： 

1. 可调整大小/可移动的裁剪区域 
2. 加载的图像适合容器控件的尺寸 
3. 裁剪功能裁剪原始图像，保留原始图像的分辨率 
4. 可以设置纵横比 
5. 可以设置最小裁剪区域大小   
6. 图像源和纵横比是依赖对象，它们是可绑定的。  

 

在这张图片中，纵横比设置为 4:3。  

工作原理    

在上述文章中，裁剪区域的尺寸保存在一个 Rectangle UI 元素中。 因为我需要指针来指示可以修改裁剪区域的位置，我决定将裁剪区域的尺寸存储在一个名为 ClipRect 的自定义对象中（它与 Rect 几乎相同，但是 Right 和 Bottom 属性不是只读的，并且包含一些附加功能），并添加了四个图像来可视化裁剪指针。最初，我使用了第五个图像来可视化裁剪区域的移动功能，但后来我决定使用 Cursor.Hand 指针来解决这个问题。为了突出显示要裁剪的图像部分，我将可裁剪图像的两个实例添加到控件中，一个作为背景的反向蒙版，另一个作为前景。然后我将前景图像的 Clip 的尺寸绑定以模拟裁剪行为。该控件也能够保持预定义的纵横比。在这种情况下，裁剪区域宽度的水平变化是根据光标的垂直偏移计算的。 

使用代码

只需将 CropControl 控件放置到您的 XAML 中： 

<c:CropControl x:Name="cropControl" Width="500" Height="390" MinimalCropSize="60.0" 
                       AspectRatio="None" />   

设置 source 属性（它也可以被绑定）：  

BitmapImage bmp = new BitmapImage();
FileStream fs = imgOpenFileDialog.File.OpenRead();
bmp.SetSource(fs);
cropControl.Source = LoadFromBitmapImage(bmp);

并裁剪图像：  

imgCropped.Source = cropControl.CropImage();

关注点

我找到了一篇关于 在标记中使值转换器更易于访问 的文章，我觉得非常有帮助。

我一直在 xaml 代码中使用数据绑定，遇到了很多麻烦。最后我意识到我错过的功能被称为 Multibinding，它存在于 WPF 中，但不存在于 Silverlight 中。 

我也遇到了很多问题，因为图像的 ActualWidth/Height  有时只有在 ImageOpened 事件之后才会计算，我需要这个值来定位裁剪指针，所以我决定从 codebehind 设置图像尺寸，而不是让框架计算它。

欢迎提出任何改进代码的建议。  

   

参考  

库中的两张图片来自维基百科
来自盖勒特山（Gellert Hill）的布达佩斯
布达佩斯蒙太奇 

历史 

• v. 1.1: 2012 年 4 月 27 日。将打开文件对话框添加到测试项目中  
• v. 1.0: 2012 年 4 月 27 日。