WPF:使用鼠标在Canvas面板上画线

最新推荐文章于 2024-01-24 09:27:45 发布
最新推荐文章于 2024-01-24 09:27:45 发布
阅读量1.1w 收藏 12
点赞数 4
分类专栏： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duanzi_peng/article/details/48290667
版权
本文介绍了如何在WPF的Canvas面板上利用Line元素实现用户自由画线的功能，详细讲解了操作效果、代码实现以及如何修改线条的颜色和样式。通过前台XAML代码，展示了具体的实现方法。
摘要由CSDN通过智能技术生成

   使用Canvas+Line 任意画线
         主要使用布局面板Canvas作为背景，通过其属性Children添加Line 来实现画线。可以理解为 每一个Line 就是一个点。
         不清楚Canvas的用法可以参见：点击打开链接  Line的参见：点击打开链接


   操作效果
       
   
       按下鼠标左键任意画线，可以修改线的颜色（红色，绿色）修改线的样式（实线，虚线）。后期增加导出生成图片功能。

   代码解析

         线由点组成，当然我这里的点其实就是线。线由开始点与结束点构成，想必看到过msdn上line的解释就会一目了然。至于鼠标事件，会有鼠标左键按下以及移动，松开动作。 还需要有个一集合来存放点，取名为List<Point> 类型。  在鼠标按下事件中可以这样写：
         
/// <summar
最低0.47元/天 解锁文章
exception92
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Canvas详解（一）——线条的各种画法
Dev Blog
07-09 366
新增的标签，所以它是有兼容性问题的。并限定画布的大小（不设宽高的话，默认宽300px，高150px），由于有一部分浏览器并不支持canvas标签，所以在标签里加入的替换的内容，当浏览器不显示canvas标签时，会有替换的内容做提示用。getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。解释一下上面的位置坐标，现在我们设置的画布宽和高都是300，（0，0）就相当于画布的左上角，（300，300）就相当于画布的右下角。二、canvas的使用。
WPF用鼠标在Canvas画线
03-19
WPF用鼠标在Canvas画线，通过左击获得线的起点，通过移动并释放左键获得终点实现画线功能。
wpf canvas画线_WPF实现大数据分析
weixin_39616961的博客
12-12 1205
开头语 经过一段时间研究，终于实现CS和BS相同效果的大数据展示平台了。首先来看看实现的效果，超炫的效果，客户特别喜欢，个人也非常满意，分享给各位，同大家一起交流学习。大数据展示平台从上图可以看出，分为左中右三栏，左右主要是展示图标为主，中间部分展示地图，这种展示主要使用于物流行业，亮点是中间的地图，物流覆盖的地方和线路在地图中显示的淋漓尽致，效果非常炫，用WPF去现实的，...
WPF在画布（Canvas）上画虚线
m0_38036750的博客
01-06 1560
WPF中在Canvas动态画出一条虚线，参考WPF编程宝典发现没有虚线，只有直线，折线，点划线。 虚线可以通过点划线改成虚线，点划线在XAML中使用 <Polyline Stroke="Blue" StrokeThickness="14" StrokeDashArray="1 2" Points="1,1 2,2 3,3" /> 解释，Stroke是设置线的颜色， StrokeDashArray 是设置点划线比例，数值设置一样的就是虚线了，Points是坐标。 使用代码设置：
使用WPF与C#实现鼠标画线
庆喜
09-22 2108
鼠标点的读取 首先需要在WPF中的前端页面获取对鼠标的操作 在一个布局里(Grid)新建关于鼠标的相关“事件” //相关事件 MouseEnter="grid_MouseEnter" //鼠标进入 MouseLeave="grid_MouseLeave"//鼠标离开 MouseLeftButtonDown="grid_MouseLeftButtonDown"//鼠标左键按下 MouseLeftButtonUp="grid_M
WPF画线
weixin_46407807的博客
09-06 330
【代码】WPF画线。
WPF图像上画线
weixin_42975610的博客
02-09 2509
图上显示跟随鼠标的十字交叉线 我们在PageLight页面上实现该功能 第一步，PageLight.xaml添加以下代码 <Page ...> <Grid> ... <Grid Name="workspace" Grid.Row="2" Grid.Column="1" Background="Black" MouseLeftButtonDown="ImgMouseLeftButtonDown" MouseLeftBu
WPF Canvas可视化编程 类型VISIO功能
07-21
本项目聚焦于WPF中的Canvas控件，这是一个非常灵活的绘图区域，允许开发者直接在界面上进行像素级别的操作。Canvas控件在许多场景下被用作创建自定义图形、图表或流程图，其灵活性和可定制性与Microsoft Visio类似，...
WPF经典教程之Canvas、InkCanvas布局
10-05
- **StackPanel、WrapPanel、DockPanel布局**：这些都是WPF中的布局面板，它们有不同的排列子元素的方式，StackPanel按照垂直或水平顺序堆叠，WrapPanel会换行显示，而DockPanel则根据边缘（上、下、左、右）对齐子...
WPF中InkCanvas(墨水面板)用法
11-16
它允许用户通过鼠标或触摸设备在屏幕上自由绘制，模仿纸张上的书写体验。这个控件是WPF框架中支持自然输入和墨迹处理的核心组件。** 在描述中提到的“此demo拥有的功能”是指InkCanvas的常用操作和特性，让我们逐一...
wpf 画板绘图
08-16
与其他布局面板不同，`Canvas`允许我们在任何位置放置元素，并通过设置其`Top`、`Bottom`、`Left`和`Right`属性来确定元素的精确位置。这使得`Canvas`成为绘图应用的理想选择。 2. **绘图基础**： 在WPF中，绘图...
WPF画线控件源码，非常有用的控件
04-30
WPF画线控件源码，非常有用的控件，可作学习之用
WPF 画线测试
ajian11的专栏
01-09 217
1. Winformusing System;using System.Drawing;using System.Diagnostics;using System.Windows.Forms;using System.Threading;namespace MyNamespace{public class MyForm : Form{private static readonly Pen[] pe...
在C#的WPF程序使用XAML实现画线
weixin_41883890的博客
01-13 1191
使用X1、Y1两个属性可以设置直线的起点坐标，X2、Y2两个属性则可以设置直线的终点坐标。Stroke（笔触）属性的数据类型是Brush（花刷），凡是Brush的派生类均可用于给这个属性赋值。因为WPf提供了多种渐变色花刷，所以画直线也可以画出渐变效果。同时，Line的一些属性还帮助我们画出虚线以及控制线段终点的形状。[在这里插入图片描述](https://img-blog.csdnimg.cn/9f3a3f75a7bf464db5aa9c73d1e0cbf5.png)
WPF绘图(基础图形：直线、矩形和椭圆)
qq_30725967的博客
09-03 4706
与传统的.NET开发使用GDI+进行绘图不同，WPF拥有自己的一套图形API，绘图为矢量图。绘图可以在任何一种布局控件中完成，wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。基本图形包括以下几个，都是Shaper类的派生类。1、Line，直线段，可以设置Stroke2、Rectangle，有Stroke也有Fill3、Ellipse，椭圆，同上4、Polygon，多边形。由多条直线线段围成的闭合区域，同上。5、Polyline，折线，不闭合，由多条首尾相接的直线段组成。
WPF 图形绘制
热门推荐
lvxingzhe3的博客
02-15 1万+
WPF常用 图形绘制的四种方式，Shape,Path,Brush,DrawVisual
WPF自定义绘图，怎么通过跟随鼠标移动绘制一个任意的不规则图形
最新发布
一个专注于技术研究创新的程序员
01-24 491
WPF自定义绘图，怎么通过跟随鼠标移动绘制一个任意的不规则图形。
Canvas多边形的绘制与拖动处理12
编程是一门实践技术
05-19 575
canvas系列之12。
WPF图形学习笔记之Line
yasenRK的博客
02-16 7394
WPF图形学习笔记之Line WPF_Graphics之Line Line 创建一个Line <Canvas> <Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="1"/> &l...
WPF 鼠标拖动控件在Canvas上移动
05-27
在 WPF 中，可以使用鼠标事件和 Canvas.SetLeft / Canvas.SetTop 方法来实现拖动控件在 Canvas 上移动的效果。以下是一个示例： ```xaml <Canvas> <Button Content="Drag me!" Canvas.Left="50" Canvas.Top="50" MouseLeftButtonDown="Button_MouseLeftButtonDown" MouseMove="Button_MouseMove" MouseLeftButtonUp="Button_MouseLeftButtonUp"/> </Canvas> ``` 在代码中，我们为 Button 控件注册了三个鼠标事件：MouseLeftButtonDown、MouseMove 和 MouseLeftButtonUp。这三个事件将分别在鼠标按下、移动和松开时触发。 ```csharp private bool isDragging; private Point startPoint; private void Button_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { // 开始拖动 isDragging = true; startPoint = e.GetPosition(null); ((UIElement)sender).CaptureMouse(); } private void Button_MouseMove(object sender, MouseEventArgs e) { if (isDragging) { // 计算拖动距离 Point mousePos = e.GetPosition(null); Vector diff = startPoint - mousePos; // 移动控件 Button button = sender as Button; double left = Canvas.GetLeft(button); double top = Canvas.GetTop(button); Canvas.SetLeft(button, left - diff.X); Canvas.SetTop(button, top - diff.Y); // 更新起始点 startPoint = mousePos; } } private void Button_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { // 结束拖动 isDragging = false; ((UIElement)sender).ReleaseMouseCapture(); } ``` 在这个示例中，我们首先定义了两个变量：isDragging 和 startPoint。isDragging 变量表示当前是否正在拖动控件，startPoint 变量表示拖动开始时鼠标的位置。 在 MouseLeftButtonDown 事件中，我们将 isDragging 设为 true，并记录当前鼠标的位置。然后，我们调用 CaptureMouse 方法来捕获鼠标，以确保鼠标移动事件被正确处理。 在 MouseMove 事件中，我们首先判断当前是否正在拖动。如果是，就计算出当前鼠标位置和上一次鼠标位置的差值，然后使用 Canvas.SetLeft 和 Canvas.SetTop 方法更新控件的位置。最后，我们将当前鼠标位置保存到 startPoint 变量中，以便下一次计算差值。 在 MouseLeftButtonUp 事件中，我们将 isDragging 设为 false，并调用 ReleaseMouseCapture 方法来释放鼠标捕获。 通过这种方式，我们就可以实现在 Canvas 上拖动控件移动的效果。如果需要支持多个控件同时拖动，可以使用类似的方法为每个控件注册鼠标事件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值