实现功能:
图像上放一个图元,同时实现缩放和平移操作
缩放操作:使用滚轮实现缩放,缩放原点以鼠标为中心
平移操作:按住鼠标右键,随鼠标平移
缩放和平移时图元和图像的相对位置不变
使用控件介绍
Canvas 控件
主要功能
- 布局:Canvas控件本身也可以作为布局容器,允许在其内部放置其他布局控件(如Grid、StackPanel等)
- 绘图:Canvas控件不仅可以用于布局已有的UI元素,还可以直接在上面绘制图形。使用WPF的绘图API(如DrawingContext)在Canvas上直接绘制图形,如线条、矩形、圆形等。需要在Canvas的OnRender方法中使用DrawingContext对象进行绘图操作
- 事件处理:Canvas控件可以处理各种鼠标和键盘事件,如点击、拖动、键盘输入等。可以通过附加事件处理程序来响应用户的操作
常用属性
- Width和Height:指定Canvas控件的宽度和高度
- Background:指定Canvas控件的背景颜色或背景图像
- Children:Canvas控件的子控件集合,包含在其中的子控件将显示在Canvas控件中
- Left、Top、Right、Bottom:用于确定控件在Canvas容器中的位置
- RenderTransform:用于对控件进行变换操作,比如移动、旋转、缩放等
- AllowDrop:指示Canvas是否支持拖放操作
- ZIndex:用于确定控件的层次顺序,即控件的前后顺序。具有较大ZIndex值的控件将出现在具有较小ZIndex值的控件的前面。
- ClipToBounds:是否裁剪Canvas内部超出其边界的子元素或内容。如果超出了Canvas的边界,超出部分将不会被显示
常见应用场景
- 图形绘制:Canvas提供了一个坐标系,可以使用线、矩形、圆形、多边形等基本形状绘制各种图形
- 动画效果:Canvas可以与WPF的动画功能(Storyboard和DoubleAnimation)结合使用,实现复杂的动画效果
- 游戏开发:游戏通常需要绘制许多复杂的图形,并需要实现各种复杂的交互和动画效果
- 用户界面设计:Canvas可以用于实现自定义的用户界面控件,如自定义按钮、图标等
- 数据可视化:Canvas可以用于绘制各种图表,如折线图、柱状图等,用于展示数据
注意事项
- Canvas布局不会自动调整子元素的位置或大小,需要手动管理子元素的布局
Image 控件
基本功能
- 显示图像:支持的图像类型包括.bmp、.gif、.ico、.jpg、.png、.wdp 和 .tiff等。但请注意,对于多帧图像(如GIF动画),Image控件通常只显示第一个帧
常用属性
- Source:用于设置或获取图像的源。可以是本地文件、远程URL、资源文件或其他控件生成的图像
- Stretch:设置或获取在Image控件中图像的拉伸方式。决定图像如何适应控件的大小。例如,Stretch="Uniform"会使图像保持其原始纵横比,并尽量填充控件的大小
- Width/Height:设置Image控件的宽度和高度。当只设置其中之一时,图像会根据其原始纵横比进行缩放
- Opacity:用于设置图像的透明度,其值范围从0(完全透明)到1(完全不透明)。
- Visibility:控制Image控件的可见性,可以设置为Visible(可见)或Hidden(隐藏)。
注意事项
- 设置Image控件的Width和Height属性时,为了保持图像的原始纵横比,通常建议只设置其中一个属性
- 加载大图像时,可能会影响应用程序的性能。在这种情况下,可以考虑使用图像的缩略图或其他优化技术
WPF Ellipse 控件
基本功能
- 用于绘制圆形或椭圆形的图形元素的一个基本控件
常用属性
- Width和Height:宽度和高度。t相等时,绘制的是圆形;不相等时,绘制的是椭圆形
- Fill:设置填充颜色,Fill=“Transparent” 透明 Fill=“Red” 红色
- Stroke:设置Ellipse的边框颜色
- StrokeThickness:这个属性定义了Ellipse边框的宽度。
代码示例
xaml文件
<Grid x:Name="IMG">
<Grid.Resources>
<TransformGroup x:Key="Imageview">
<ScaleTransform />
<TranslateTransform/>
</TransformGroup>
</Grid.Resources>
<Canvas x:Name="ImageCanvas" Width="452" Height="640" ClipToBounds="true" Background="LightGray"
MouseRightButtonDown="MouseRightButtonDown_Canvas"
MouseRightButtonUp="MouseRightButtonUp_Canvas"
MouseWheel="MouseWheel_Canvas" MouseMove="MouseMove_Canvas">
<Image Name="image" Height="640" Stretch="Uniform" Source="image.jpeg" RenderTransform="{StaticResource Imageview}"/>
<Ellipse x:Name="ellipse0" Width="40" Height="40" Focusable ="True"
Fill="Red" Canvas.Left= "50" Canvas.Top= "250"
RenderTransform="{StaticResource Imageview}"
MouseLeftButtonDown="MouseLeftButtonDown_Ellipse"
MouseLeftButtonUp="MouseLeftButtonUp_Ellipse"
MouseMove="MouseMove_Ellipse"/>