Windows Phone 7 Belling‘s课堂(十)InkPresenter 初探(画画)

简介:

InkPresenter 是 System.Windows.Controls 命名空间下的一个类,其主要是 实现  在界面上显示一个可以显示墨迹笔画的矩形图画。 

InkPresenter 是派生自Canvas 他可以显示一个或多个UI元素和 StrokeCollection.

InkPresenter 有两个重要属性,一个是Background可以设置图画的背景,一个是Children ,Children中的值将被呈现在InkPresenter图画上。

 

使用InkPresenter可以实现像绘图板的效果,非常好玩,我简单实现了一个写字板的简单功能。

功能如下:在界面上显示出一个画布,可以使用钢笔、标记笔、荧光笔在上面 写字画画什么的,

              而且还有两个橡皮擦 一个是点橡皮擦,一个是线条橡皮擦。效果就如下图这样:

要实现上面的功能首先要简单了解下面几个类:

    StylusPoint:表示在用户使用触笔或鼠标绘制墨迹笔画时收集的单个点。

    StylusPointCollection:表示StylusPoint的集合。

    Stroke:StylusPointCollection连续的点就可以表示为表示单个墨迹笔画,就是Stroke。

    StrokeCollection:表示一组Stroke。

下面就是实现过程:

1、首先绘制界面,最重要的是<InkPresenter/>标记,其他还有一些按钮和Textbox来触发事件、显示信息,xaml如下:

View Code

2、实现在界面上绘制线条,

     基本过程是,当鼠标左键按下的时候 记录下墨迹的点,并使用这些点 初始化一条笔画,然后将笔画绘制到InkPresenter 上,

                      当鼠标移动的时候,将所有经过的点加入到上面的笔画里。

                      当失去鼠标捕获的时候,将笔画对像清空,等待下一次鼠标按下。

如下:

鼠标按下事件 MouseLeftButtonDown:

View Code

上面的事件处理函数中有 Stroke对象有一个DrawingAttributes属性,该属性是对Stroke对象外观的描述,需要注意。

MouseMove事件中,将经过的点加到笔画中,并且使用StylusPoint的X、Y、PressureFactor获取操作的一些信息:

View Code

LostMouseCapture事件将 全局的笔画对象清空就行了。

这样就实现了线条的绘制了。

3、实现画笔的切换

画笔的切换主要就是修改Stroke的DrawingAttributes属性就可以了,我这里定义了三个按钮,单击时候修改他:

View Code

4、橡皮擦功能

    这个比较复杂 我设置了三种情况,为了区分画笔,我定义了一个 flag 用来标记是否是橡皮擦

     第一个是全部清空,只需将InkPresenter的Strokes   Clear以下就Ok了

     第二个是线条橡皮擦,主要原理是:在橡皮状态下当鼠标在InkPresenter中移动的时候如果与已经存在的笔画相交就将该笔画删除  判断是否相交是通过HitTest方法实现的,比较简单。在LeftMouseDown的时候 初始化一个StylusPointCollection对象erasePoints,在鼠标移动的时候记录下所有经过的点 并与已存在笔画进行HitTest 将相交的画线删除。

View Code

      第三个是点橡皮擦,这个是最复杂的一个了,初我想的是橡皮擦擦的时候 将移动的轨迹重新用背景色画下不就行了?

试了才知道这种方法可以,但是不太好,因为你再次选择笔画橡皮擦的时候即使线条已经被切断,还会将整条线擦除,因为整条线条根本就没改变。 基于此可以使用 当由某点经过画线时候将改点删除,并将改线切成两段,这样即实现了功能也不会出现上面的问题了。

过程是:在鼠标按下的时候,这里需要注意的是在鼠标按下的这个点也可能需要处理,因为可能正好按在了某条线上,所以可以先将这个点保存起来,让他也让后面的处理过程处理;在鼠标移动的时候不断收集这些经过的点,并进行HitTest检测,若两条线相交了,就将这条线段从改点截成两段显示。这里定义了一个ProcessPointErase方法,该方法线从被截这条线的起始点开始直到与橡皮相交的点 构成一条线,然后从被截这条线的末尾开始到与橡皮相交的点 构成一条线,然后将原来的线移除,将这两条线绘制到界面上,ProcessPointErase方法  如下:

View Code

程序代码在最下面。

不明白的话可以去MSDN上看看 http://msdn.microsoft.com/zh-cn/library/dd233088(v=VS.95).aspx 我就是参考着做的。

这样整个程序基本上就好了,然后就可以写写画画了,当然了放在Windows Phone上也很好玩,几乎不用改代码,看下图: 

程序代码:InkPresenter.rar

posted @ 2012-12-14 16:37  BellingWP  阅读(251)  评论(0编辑  收藏  举报