WPF 中Canvas图像缩放和平移

实现功能：
图像上放一个图元，同时实现缩放和平移操作
缩放操作：使用滚轮实现缩放，缩放原点以鼠标为中心
平移操作：按住鼠标右键，随鼠标平移
缩放和平移时图元和图像的相对位置不变

使用控件介绍

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"/>