有时候需要实现类似于QQ截图那样的选择区域功能,这里的区域可以是一条线,圆,矩形等等

实现原理就是一个Canvas做蒙板,然后canvas的三个事件,MouseLeftButtonDown,MouseMove,MouseLeftButtonUp。非常easy!

首先,你要有个canvas

<Canvas Name="videocanvas" Height="" Width="" Background="Transparent" MouseMove="image_MouseMove" MouseLeftButtonDown="Mask_MouseLeftButtonDown" MouseLeftButtonUp="Mask_MouseLeftButtonUp"/>

然后实现他的事件,在之前我们先决定一下到底是什么形状的区域。

 public static Shape CreateShape()
{
//矩形区域
return new System.Windows.Shapes.Rectangle() { Fill = null, Stroke = System.Windows.Media.Brushes.Red, StrokeThickness = };
//圆形区域
//return new System.Windows.Shapes.Ellipse() { Fill = null, Stroke = System.Windows.Media.Brushes.Red, StrokeThickness = 1 }; }

然后实现三个事件

bool drawFlag = false;
Shape insertShape;
System.Windows.Point startPosition; private void Mask_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
insertShape = CreateShape();
if (insertShape != null)
{
drawFlag = true;
Canvas board = sender as Canvas;
board.Children.Clear();
startPosition = e.GetPosition(board);
insertShape.Opacity = ;
Canvas.SetLeft(insertShape, e.GetPosition(board).X);
Canvas.SetTop(insertShape, e.GetPosition(board).Y);
board.Children.Add(insertShape);
}
} private void image_MouseMove(object sender, MouseEventArgs e)
{
Canvas board = sender as Canvas;
if (drawFlag && insertShape != null)
{
if (e.GetPosition(board).X > startPosition.X)
{
insertShape.Width = e.GetPosition(board).X - startPosition.X; }
else
{
insertShape.Width = startPosition.X - e.GetPosition(board).X;
Canvas.SetLeft(insertShape, e.GetPosition(board).X);
}
if (e.GetPosition(board).Y > startPosition.Y)
{
insertShape.Height = e.GetPosition(board).Y - startPosition.Y;
}
else
{
insertShape.Height = startPosition.Y - e.GetPosition(board).Y;
Canvas.SetTop(insertShape, e.GetPosition(board).Y);
}
}
} private void Mask_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
drawFlag = false;
if (insertShape != null)
{
insertShape.Opacity = ;
System.Windows.Point p = e.GetPosition(sender as Canvas);
Canvas.SetLeft(insertShape, e.GetPosition(board).X);
Canvas.SetTop(insertShape, e.GetPosition(board).Y);
}
}

本来还想做个多边形的例子,水平有限,没达到我想要的效果。研究研究再发。

WPF Canvas 画区域的更多相关文章

  1. 撩妹技能 get,教你用 canvas 画一场流星雨

    开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...

  2. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  3. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  4. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  5. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  7. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  9. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

随机推荐

  1. CODESOFT中怎样打印数据库中的特定数据?

      CODESOFT可用于打印.标记和跟踪的零售库存标签软件,每种产品的售卖都代表着需要打印大量的条码标签.通常我们采用的方法就是在CODESOFT连接数据库批量打 印.但是如果数据量很大,该如何选择 ...

  2. 【Unity Shaders】学习笔记——渲染管线

    [Unity Shaders]学习笔记——Shader和渲染管线 转载请注明出处:http://www.cnblogs.com/-867259206/p/5595924.html 写作本系列文章时使用 ...

  3. html5标签css3的常用样式

    <meta name=''> name:有如下6个值:application-name:文档名或者应用名,整个文档只能包含一个值.author:文档作者description:文档描述ge ...

  4. Drupal8开发教程:认识.info.yml文件

    YAML 文件是新引入的重要项目文件,在 Drupal 8 中,无论是模块.主题还是安装配置文件,都需要 .info.yml 文件来为其存储项目相关的基础信息. 在 Drupal 中,.info.ym ...

  5. struts2拦截器拦截成功后每次请求都出现拦截时的错误信息

    action中验证方法 在执行execute之前执行 @Override    public void validate() {        // TODO Auto-generated metho ...

  6. 华为OJ平台——字符串分隔

    题目描述: 连续输入字符串,请按长度为8拆分每个字符创 后输出到新的字符串数组: 长度不是8整数倍的字符串请在后面补数字0,空字符串不处理 输入 连续输入字符串(输入两次,每个字符长长度小于100)输 ...

  7. 完成《Java编程入门》初稿

    Java编程入门 现在的运维工程师不但要懂得集合网络.系统管理而且要和开发人员一起调试系统,社会上也需要"复合性"的运维人员,所以需要做运维的也要懂一些开发,知道软件系统接口的调试 ...

  8. Python 编程规范-----转载

    Python编程规范及性能优化 Ptyhon编程规范 编码 所有的 Python 脚本文件都应在文件头标上 # -*- coding:utf-8 -*- .设置编辑器,默认保存为 utf-8 格式. ...

  9. linux设备分类

    网络设备:常见的有以太网卡.CAN总线.WIFI.蓝牙 重要的结构体: net_device:用于描述网络设备的属性,为上层提供一个统一的操作接口.网络设备的驱动实际上就是填充此结构体,实现其中的各种 ...

  10. fluentd正则表达式

    一: 匹配上则取否则不取 匹配规则为 \[sv=(?<sv>[^\]]*?)\].*?\[os=(?<os>[^\]]*?)\].*?\[net=(?<net>[^ ...