WPF Canvas 画区域
有时候需要实现类似于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 画区域的更多相关文章
- 撩妹技能 get,教你用 canvas 画一场流星雨
开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...
- Android利用canvas画各种图形
Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
随机推荐
- [ CodeVS冲杯之路 ] P1171
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1171/ 代码调了很久才调好啊,一开始题目都看错了(要是真的NOIP肯定没戏了QuQ) 后面发现CodeVS上的数据输入 ...
- 慕课网-安卓工程师初养成-3-8 Java中的条件运算符
来源:http://www.imooc.com/code/1306 条件运算符( ? : )也称为 “三元运算符”. 语法形式:布尔表达式 ? 表达式1 :表达式2 运算过程:如果布尔表达式的值为 t ...
- 慕课网-安卓工程师初养成-3-2 Java中的算术运算符
来源:http://www.imooc.com/code/1279 算术运算符主要用于进行基本的算术运算,如加法.减法.乘法.除法等. Java 中常用的算术运算符: 其中,++ 和 -- 既可以出现 ...
- 【PL/SQL】异常处理:
如果在PLSQL块中没有做异常处理,在执行PLSQL块时,出现异常,会传递到调用环境,导致程序运行出错! SCOTT@ prod> declare v_ename emp.ename%type; ...
- UVa11054 Gergovia的酒交易 Wine trading in Gergovia-递推
https://vjudge.net/problem/UVA-11054 As you may know from the comic “Asterix and the Chieftain’s Shi ...
- 在.net中序列化读写xml方法
收集XML的写法 XML是一种很常见的数据保存方式,我经常用它来保存一些数据,或者是一些配置参数. 使用C#,我们可以借助.net framework提供的很多API来读取或者创建修改这些XML, 然 ...
- 更改Pch配置
在Build Settings 里搜索prefix 在第一个AppleLLVM.7.0 有一个 PrefixHeader 属性 在属性里添加 $(SRCROOT)/加上pch文件名字 然后编 ...
- 使用SurfaceView播放RGB原始视频-2016.01.22
1 程序代码 使用Android中的SurfaceView播放RGB视频数据,SufaceView播放代码如下: package com.zhoulee.surfaceviewdemo; import ...
- HTML中解决双击会选中文本的问题
HTML中解决双击会选中文本的问题 <div unselectable="on" style="-moz-user-select:none;" onsel ...
- 对应键盘的ASCII码(备忘)
vbKeyLButton 1 鼠标左键 vbKeyRButton 2 鼠标右键 vbKeyCancel 3 CANCEL 键 vbKeyMButton 4 鼠标中键 vbKeyBack 8 Backs ...