WPF Canvas 画区域

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

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

首先,你要有个canvas

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

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

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

然后实现三个事件

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 = 1;
        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 = 1;
        System.Windows.Point p = e.GetPosition(sender as Canvas);
        Canvas.SetLeft(insertShape, e.GetPosition(board).X);
        Canvas.SetTop(insertShape, e.GetPosition(board).Y);
    }
}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法channel

Python-GUI|Tk类,属性文档使用指南

这是一篇tkinter相关API的介绍性地帮助文档,包括常用的包,类结构图,属性取值等,可以作为一个工具文档,供大家查阅。 01Tk中的包 __main...

3497
来自专栏互联网杂技

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

4016
来自专栏一“技”之长

iOS开发CoreAnimation解读之三——几种常用Layer的使用解析

        CAEmitterLayer是CoreAnimation框架中的粒子发射层,在以前的一片博客中有详细的介绍和范例,这里不再重复,地址如下:

772
来自专栏小灰灰

Java 实现图片合成

图片合成 利用Java的绘图方法,实现图片合成 在开始之前,先定一个小目标,我们希望通过图片合成的方式,创建一个类似下面样式的图片 ? I. 设计思路 首先...

1.5K10
来自专栏everhad

[BOT] 一种android中实现“圆角矩形”的方法

内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角。思路是利用“Xfermode ...

3387
来自专栏潇涧技术专栏

Android Heroes Reading Notes 3

《Android群英传》读书笔记 (3) 第六章 Android绘图机制与处理技巧 + 第七章 Android动画机制与使用技巧

772
来自专栏前端儿

Windows下编程--模拟时钟的实现

(4)   编写显示数字时钟函数。注意要自己用矩形填充(FillRect)擦除背景。

1391
来自专栏小灰灰

Java 实现长图文生成

长图文生成 很久很久以前,就觉得微博的长图文实现得非常有意思,将排版直接以最终的图片输出,收藏查看分享都很方便,现在则自己动手实现一个简单版本的 目标 首先定...

3927
来自专栏前端知识分享

第157天:canvas基础知识详解

    github地址: https://github.com/malun666/AndyJS2

2892
来自专栏向治洪

React Native仿美团下拉菜单

在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: ? 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使...

8195

扫码关注云+社区

领取腾讯云代金券