您的位置：首页 > 编程技术 > csharp  >  WPF 在image控件用鼠标拖拽出矩形的实现方法

WPF 在image控件用鼠标拖拽出矩形的实现方法

 更新时间：2020年6月25日 11:16  点击：1734

今天有小伙伴问我一个问题，在image控件用鼠标拖拽出矩形，本文告诉大家如何使用鼠标画出矩形

做出来的效果先请大家看一下

最简单的方法是在 Down 的时候记录按下的点，在 移动的时候重新计算所在的宽度

先在界面使用一个图片和一个矩形

<Grid x:Name="Grid">
    <Image Source="TIM截图20180811150831.png"></Image>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">欢迎访问我博客 http://lindexi.oschina.io </TextBlock>
    <Rectangle x:Name="Rectangle" StrokeThickness="2" Stroke="Black" HorizontalAlignment="Left" VerticalAlignment="Top"></Rectangle>
  </Grid>

需要注意，图片的位置需要修改为自己需要的图片

这里的 Rectangle 需要做一些设置，主要 HorizontalAlignment 和 VerticalAlignment 必须设置为左上角

现在打开 cs 代码，在按下和移动修改矩形

MouseDown += MainWindow_MouseDown;
      MouseMove += MainWindow_MouseMove;
      MouseUp += MainWindow_MouseUp;

需要两个字段来记录当前是否按下和第一次按下所在的坐标

刚才给 Grid 的命名就是为了拿到相对 Grid 的坐标

private void MainWindow_MouseDown(object sender, MouseButtonEventArgs e)
    {
      _started = true;

      _downPoint = e.GetPosition(Grid);
    }

    private bool _started;

    private Point _downPoint;

在鼠标按下时拿到按下的坐标，通过这个坐标就可以计算出矩形所在的位置

private void MainWindow_MouseUp(object sender, MouseButtonEventArgs e)
    {
      _started = false;
    }

    private void MainWindow_MouseMove(object sender, MouseEventArgs e)
    {
      if (_started)
      {
        var point = e.GetPosition(Grid);

        var rect = new Rect(_downPoint, point);
        Rectangle.Margin = new Thickness(rect.Left, rect.Top, 0, 0);
        Rectangle.Width = rect.Width;
        Rectangle.Height = rect.Height;
      }
    }

代码就是这么简单，通过修改 Margin 的方法修改矩形

如果对于高手，我建议使用 RenderTransform 的方式而不是使用 Margin 这里使用这个方法只是看起来简单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09

  • 写得不错的jquery table鼠标经过变色代码

    代码如下:$(&#39;#<%=AllEvent.ClientID%> tr:not(:has("th"))&#39;).hover(function () { $bg = $(this).css(&#39;background-color&#39;); $(this).css(&#39;background-...2013-10-03

  • c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)

    这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)，帮助大家更好的理解和学习使用c#，感兴趣的朋友可以了解下...2021-03-03

  • 鼠标划过实现延迟加载并隐藏层的js代码

    鼠标划过实现延迟加载并隐藏层的js代码...2013-10-13

  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25

  • C#模拟window操作鼠标的方法

    这篇文章主要介绍了C#模拟window操作鼠标的方法,可实现模拟鼠标移动到固定位置后点击右键的功能,涉及鼠标常用事件的操作技巧,需要的朋友可以参考下...2020-06-25

  • element表格行列拖拽的实现示例

    本文主要介绍了element表格行列拖拽的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-02

  • 基于JavaScript获取鼠标位置的各种方法

    这篇文章主要介绍了基于JavaScript获取鼠标位置的各种方法 ,需要的朋友可以参考下...2015-12-18

  • C#获取鼠标在listview右键点击单元格的内容方法

    下面小编就为大家带来一篇C#获取鼠标在listview右键点击单元格的内容方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • javascript轻量级库createjs使用Easel实现拖拽效果

    这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下...2016-02-21

  • JS实现网页游戏中滑块响应鼠标点击移动效果

    本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果。分享给大家供大家参考，具体如下：这是网页游戏中的一个有趣效果，可以完成以下几个动作：滚动、scroll 8个方向、鼠标坐标获娶对象上下左右位置获取，大家可以自己添...2015-10-21

  • 一百多行代码实现react拖拽hooks

    这篇文章主要介绍了一百多行代码实现react拖拽hooks，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-21

  • C#控件Picturebox实现鼠标拖拽功能

    这篇文章主要为大家详细介绍了C#控件Picturebox实现鼠标拖拽功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • WPF仿三星手机充电界面实现代码

    这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • Photoshop鼠标绘制一颗一星龙珠教程

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下用鼠标绘制一颗一星龙珠的教程，各位想知道具体绘制方法的使用者们，那么下面就快来跟着小编一起看一看吧。...2016-09-14

  • C# WPF 通过委托实现多窗口间的传值的方法

    这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • vue element el-transfer增加拖拽功能

    这篇文章主要介绍了vue element el-transfer增加拖拽功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-16

  • vue实现可拖拽的dialog弹框

    element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验，本文实现了vue可拖拽的dialog弹框，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-05-14

  • unity 如何判断鼠标是否在哪个UI上(两种方法)

    这篇文章主要介绍了unity 判断鼠标是否在哪个UI上的两种实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-10

  • vue实现滑块拖拽校验功能的全过程

    vue验证滑块功能,在生活中很多地方都可以见到,使用起来非常方便,这篇文章主要给大家介绍了关于vue实现滑块拖拽校验功能的相关资料,需要的朋友可以参考下...2021-08-04