在wpf中自定义一个inkwpf canvas 画线怎样实现毛笔和荧光笔效果

WPF InkCanvas 基础使用教程
编辑:www.fx114.net
本篇文章主要介绍了"WPF InkCanvas 基础使用教程",主要涉及到WPF InkCanvas 基础使用教程方面的内容,对于WPF InkCanvas 基础使用教程感兴趣的同学可以参考一下。
大家好,由于很多原因,我有很长一段时间没有在 CSDN 上分享我的学习成果了,如今终于可以回归分享之路了。
之前在做一个项目的时候,想在一个区域里绘制自己的图形,于是上网搜索资料,无意中找到了 InkCanvas ,但我们最终并没有在项目里使用它,不过它的强大确深深地印在了我的脑海中。之后学院年级会举办一个比赛,本来没打算参加,不过一觉醒来被告知室友已经给我报上名了,无奈之下只得借助 WPF 中的 InkCanvas 来赶出一个作品。
不过这次经历让我熟悉了 InkCanvas 的一些基本使用,之前在网上搜到的资料都不是很满意,于是这里给大家奉上我的学习成果。
首先来简单介绍一下什么是 InkCanvas 。顾名思义, InkCanvas 和 Canvas 有一定的联系,都是一种画布,我们可以在上面绘制我们的图形等等。
那么 InkCanvas 和 Canvas 有什么区别呢?那就是 InkCanvas 集成了一些很方便的功能,使我们不必再用代码去实现那些功能,下面将结合实例讲解如何使用这些功能。
现在先来创建一个 WPF 应用程序,然后创建一个 InkCanvas 标签。
&Window x:Class=&Blog_InkCanvas.MainWindow&
xmlns=&/winfx/2006/xaml/presentation&
xmlns:x=&/winfx/2006/xaml&
Title=&MainWindow& Height=&350& Width=&525&&
&InkCanvas x:Name=&inkCanvas&/&
运行程序并且按住鼠标左键即可自右绘制墨迹。
InkCanvas 提供的最基本的功能是自由笔,我们这里称显示出来的图形为墨迹,而绘制出来的墨迹实际上是 Stroke&类型,所以我们可以用 Stroke 类型的 DrawingAttributes 属性进行墨迹的一些设置,例如颜色,粗细等等。
那么既然如此,我们就先来改变一下墨迹的颜色,将前面的 XAML 文件对应的后置代码文件的内容修改为如下所示:
using System.Collections.G
using System.L
using System.T
using System.Threading.T
using System.W
using System.Windows.C
using System.Windows.D
using System.Windows.D
using System.Windows.I
using System.Windows.M
using System.Windows.Media.I
using System.Windows.N
using System.Windows.S
using System.Windows.I
namespace Blog_InkCanvas
/// &summary&
/// MainWindow.xaml 的交互逻辑
/// &/summary&
public partial class MainWindow : Window
//声明一个 DrawingAttributes 类型的变量
DrawingAttributes drawingA
public MainWindow()
InitializeComponent();
//创建 DrawingAttributes 类的一个实例
drawingAttributes = new DrawingAttributes();
//将 InkCanvas 的 DefaultDrawingAttributes 属性的值赋成创建的 DrawingAttributes 类的对象的引用
//InkCanvas 通过 DefaultDrawingAttributes 属性来获取墨迹的各种设置,该属性的类型为 DrawingAttributes 型
inkCanvas.DefaultDrawingAttributes = drawingA
//设置 DrawingAttributes 的 Color 属性设置颜色
drawingAttributes.Color = Colors.R
再次运行程序,会发现墨迹颜色变成了红色。
接下来我们同样是通过 DrawingAttributes 对象来改变墨迹的各项设置,在上面的代码后面添加如下代码:
//利用 DrawingAttributes 的 Width 和 Height 属性来设置墨迹的宽度和高度
//注意墨迹的宽度和高度是两个概念
//宽度在垂直方向上能显现出来,而高度在水平方向上能显现出来
drawingAttributes.Width = 20;
drawingAttributes.Height = 10;
//利用 DrawingAttributes 的StylusTip 属性可以设置墨迹触笔的形状,默认值是 StylusTip.Ellipse
//将墨迹的宽度和高度都设置为稍大一些可以清楚的看到差别,如果较小则不太容易看出差别
//这里宽度和高度都已经较大了,所以很容易看出差别,读者可以把下面一行代码反复注释或取消注释观察几次
drawingAttributes.StylusTip = StylusTip.R
继续运行程序。
InkCanvas 还提供了平滑处理功能。
//将 FitToCurve 属性设置为 true 会在你绘制完一次墨迹后自动利用贝塞尔曲线来对你的墨迹进行平滑处理
//为了使效果更明显,测试时请尽可能地使所绘制的墨迹显得杂乱无章,这样绘制完成后即可看到效果
//这个就不截图演示了
drawingAttributes.FitToCurve =
InkCanvas 还有两个属性,一个是 IsHeighlighter ,另一个是&IgnorePressure ,这两个属性都是布尔值,前者是判断墨迹是否有荧光笔效果,后者是判断墨迹的粗细是否随压力的增大而增大。
//设置 IsHighlighter 属性为 true ,则墨迹显示的时候看上去像是荧光笔
//官方文档上说这样做会使 Stroke 变的透明一些,可以显示覆盖住的墨迹,但是我感觉不太像透明,大家可以自己试试,也欢迎纠正
drawingAttributes.IsHighlighter =
//按照微软官方文档上的说法,设置 IgnorePressure 属性为 true墨迹粗细会随压力的增大而增大
//但同时也说了 XAML 一般不使用此属性,我也实在找不到如何利用鼠标来进行压力的变化
//所以这里我想大家做个了解应该就可以了
drawingAttributes.IgnorePressure =
前面介绍了 InkCanvas 墨迹的一些属性,但是 InkCanvas 的强大远远不止这些,它还有几个非常好用的功能。请看如下代码:
&Window x:Class=&Blog_InkCanvas.MainWindow&
xmlns=&/winfx/2006/xaml/presentation&
xmlns:x=&/winfx/2006/xaml&
Title=&MainWindow& Height=&350& Width=&525&&
&Grid.RowDefinitions&
&RowDefinition Height=&9*&/&
&RowDefinition/&
&/Grid.RowDefinitions&
&InkCanvas x:Name=&inkCanvas& Grid.Row=&0&/&
&Grid Grid.Row=&1&&
&Grid.ColumnDefinitions&
&ColumnDefinition/&
&ColumnDefinition/&
&ColumnDefinition/&
&ColumnDefinition/&
&ColumnDefinition/&
&/Grid.ColumnDefinitions&
&RadioButton Click=&RadioButton_Click& Grid.Column=&0&&绘制墨迹&/RadioButton&
&RadioButton Click=&RadioButton_Click& Grid.Column=&1&&按点擦除&/RadioButton&
&RadioButton Click=&RadioButton_Click& Grid.Column=&2&&按线擦除&/RadioButton&
&RadioButton Click=&RadioButton_Click& Grid.Column=&3&&选中墨迹&/RadioButton&
&RadioButton Click=&RadioButton_Click& Grid.Column=&4&&停止操作&/RadioButton&
将主页面 XAML 代码修改如上面,并在原来的后置 .cs 文件的构造函数之后添加如下方法:
//更改 InkCanvas 对象的 EditingMode 属性,可以改变要在 InkCanvas 上执行的操作
//该属性的值是一个 InkCanvasEditingMode 枚举,常见功能如下
private void RadioButton_Click(object sender, RoutedEventArgs e)
if((sender as RadioButton).Content.ToString() == &绘制墨迹&)
//绘制墨迹
inkCanvas.EditingMode = InkCanvasEditingMode.I
else if((sender as RadioButton).Content.ToString() == &按点擦除&)
//使用橡皮擦按点擦除墨迹
inkCanvas.EditingMode = InkCanvasEditingMode.EraseByP
else if ((sender as RadioButton).Content.ToString() == &按线擦除&)
//使用橡皮擦按绘制的墨迹将某一笔墨迹擦除掉,注意是某一笔,如果多次绘制但是有交叉也是不可以的
inkCanvas.EditingMode = InkCanvasEditingMode.EraseByS
else if ((sender as RadioButton).Content.ToString() == &选中墨迹&)
//选中某一笔墨迹,进行拖动和缩放以及按 Delete 键删除,注意是某一笔
inkCanvas.EditingMode = InkCanvasEditingMode.S
else if ((sender as RadioButton).Content.ToString() == &停止操作&)
//不做任何
inkCanvas.EditingMode = InkCanvasEditingMode.N
InkCanvas 的EditingMode 属性还有其他几个值,但是基本的就是这几个了,详细信息请参看 MSDN 。运行程序,并选择相应功能,即可看到效果。
利用 InkCanvas 不仅可以完成 Canvas 的功能,还可以非常方便地使用其他一些操作,对于绘图类功能开发来说非常好用。
另外有一点需要注意,在 InkCanvas 上绘制的 Stroke 墨迹并不是 InkCanvas 对象 Children 集合类型属性里的元素,所有用该属性的 Clear() 方法是不能清除已绘制上去的墨迹的。
本文就到此结束了,希望大家多多批评指正,谢谢!
Remember !You Make Luck !
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!
二、互相尊重,对自己的言论和行为负责。
本文标题:
本页链接:wpf 中的Canvas与Inkcanvas的属性说明 - CSDN博客
wpf 中的Canvas与Inkcanvas的属性说明
附加属性,canvas中的控件都会有一个附加属性,但是left的right与top 与buttom只能高设置一个,因为他们是相对Canvas的,定了一个就相对 的定了
顺序,里面的元素是可以重叠的,但是可以通过一个附加属性canvas.ZIndex=“”默认为0还没有提示,设置为比0大的整数就是显示在前观。两都之间的大小是相对对比的。
可以在后台代码设置就是Canvas.SetZIndex(参数一,参数二)一是控件的名子,二是对应的属性值。
Inkanvas元素,用于接收手写笔的输入,可也以用鼠标来进行操作
它与Canvas相比有一个特有的,Strokes,每次用户的输入都会变成一个Strokes对象。
Inkanvas在工具箱中是没有的,但是可以自己敲出来。
有一个EdidMode=”“有几个值可以参考一下查下msdn
GestureOnly只显示过程,不显示结果
InkAndGesture可以画笔画批注,也可以实别
Erase的两个属性是擦除
select是可以选择的对于活动的东西特别好用吧,一会试试。
里面包含的控件,与Canvas一样也有对应的附加属性。
forecah (InkCanvasEditingMonde mode in enum.GetValues((typeof)InkvansEditingMode)
this.EditingMode(combox).add(mode);
this.EditingMode.selectIndex=0;
combox选不同的EditingMode属性,进行不同的操作
对应的EditingMode_SelectionChanged的事件里面写具体的逻辑
this.InkCanvas(name).EditingMode=(InkCanvasEditingMode)combox.selectI
重点是InkCanvas的EditingMode的属性。
本文已收录于以下专栏:
相关文章推荐
1、问题以及解决办法
最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理。...
//清除canvas画布
DrawCanvas.Children.Clear();
//直线对象
Line mydrawline = new Line();
mydrawline.Stroke= Br...
Canvas为容器控件,用于定位
1.基本应用
可以把Canvas比作一个坐标系,所有的元素通过设置坐标来决定其在坐标系中的位置.这个坐标系的原点并不是在中央,而是位于它的左上角.见下图
用wpf来做毛笔书写效果,需要自定义inkcanvas,基本效果可以,就是连续画很长的笔触时会有卡顿现象。解决方法,做一个判断,当笔触超过一定长度则停止。
核心代码:
using S...
Canvas大概是最简单的面板了。在默认情况下,它什么都不做,你把控件放到它里面,然后通过具体的坐标来指定位置。
如果你之前使用过其他UI库如WinForms,Canvas会让你感觉很亲切。然而它趋...
申明:本人刚开始学习c# ,难免有些写的不好的地方,欢迎大家指出。
前几天,我忽然收到了一个新需求,要求做一个window的桌面应用程序,用于监控机器状态,说明文档不便公开,效果图如下:
Canvas中元素的定位 Canvas,DockPanel,Grid,StackPanel,WrapPanel是WPF中的5个布局控件.每个布局控件都有不同的应用场景.如果您要对元素进行精确的定位,那...
他的最新文章
讲师:宋宝华
讲师:何宇健
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)2017年9月 .NET技术大版内专家分月排行榜第三
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。所有回答(1)
InkCanvas有个EditingMode属性可以设置当前操作模式(画笔,荧光笔还有橡皮擦),还有DefaultDrawingAttributes属性用于设置颜色,粗细等.
可以参考下最近我写的一些列文章/andy1987/p/4346981.html
就是通过InkCanvas来实现一个完整的画板程序,支持多种画笔类型和橡皮擦以及图形对象
&&&您需要以后才能回答,未注册用户请先。匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。}

我要回帖

更多关于 wpf inkcanvas 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信