Image实现鼠标的拖动（自己做的图片显示控件）

最新推荐文章于 2022-03-16 21:34:59 发布

原创

最新推荐文章于 2022-03-16 21:34:59 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#image #null #object #class

本文介绍了一个自定义的图片显示控件，该控件利用蒙版技术仅显示图片的一部分，并允许通过鼠标拖动来改变显示区域。在相片处理软件中使用，实现了水平方向的拖动，但存在控制不稳定的问题，尚未完善垂直方向的拖动。拖动功能依赖于RenderTransform属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个图片显示控件，这个控件用到了蒙版，图片只显示一部分，用鼠标拖动图片，可以转换显示的部分。这个控件是用在做相片处理的软件中的。我实现了相处部分显示，和拖动，但是在控件拖动的方面还不好（控制不能露出后面的背景，但是在拖动快的时候还是控件不住，所以我只控制了宽的拖动，等找到好方法再一起控制高的方向的拖动）

拖动是用的RenderTransform属性

页面代码：

<Grid x:Name="LayoutRoot" Background="White">
        <Grid Name="gidPanel" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="3" Grid.RowSpan="3" Margin="0" >
            <Canvas x:Name="panelDisplay">
                <Canvas.Clip>
                    <RectangleGeometry x:Name="RectangGeome" />
                </Canvas.Clip>
                <Image Name="imgPhoto" Height="auto" Width="auto" Canvas.ZIndex="0" MouseLeftButtonDown="imgPhoto_MouseLeftButtonDown" MouseLeftButtonUp="imgPhoto_MouseLeftButtonUp" MouseMove="imgPhoto_MouseMove">
                    <!--<Image.Clip>
      &n