稳扎稳打Silverlight(14) - 2.0交互之InkPresenter(涂鸦板)

作者：webabcd

介绍
Silverlight 2.0 人机交互：InkPresenter(涂鸦板)
    InkPresenter - 涂鸦板，也就是在面板上呈现墨迹。InkPresenter 可以包含子控件
    Cursor - 鼠标移动到 InkPresenter 上面时，鼠标指针的样式
    Background - 涂鸦板背景
    Opacity - 面板上墨迹的不透明度
    Clip - InkPresenter 的剪辑区域
    Stroke.DrawingAttributes - Stroke（笔划）的外观属性
    UIElement.CaptureMouse() - 为 UIElement 对象启用鼠标捕捉
    UIElement.ReleaseMouseCapture() - 为 UIElement 对象释放鼠标捕捉

在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

示例
InkPresenter.xaml

<UserControl x:Class="Silverlight20.Interactive.InkPresenter"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

<!--

InkPresenter - 涂鸦板，也就是在面板上呈现墨迹

Cursor - 鼠标移动到 InkPresenter 上面时，鼠标指针的样式

Arrow - 箭头

Hand - 手形

Wait - 沙漏

IBeam - “I”字形

Stylus - 点

Eraser - 橡皮

None - 无

Background - 涂鸦板背景。建议设置其为“Transparent”，需要的话可以使用其他控件来描绘背景

Opacity - 面板上墨迹的不透明度

Clip - InkPresenter 的剪辑区域。本例给 InkPresenter 做了一个圆角效果，其Clip值由 Blend 生成

-->

<InkPresenter x:Name="inkPresenter" Cursor="Stylus" Canvas.Top="10" Canvas.Left="10" Width="400" Height="300" Background="Transparent"

MouseLeftButtonDown="inkPresenter_MouseLeftButtonDown"

MouseLeftButtonUp="inkPresenter_MouseLeftButtonUp"

MouseMove="inkPresenter_MouseMove"

Clip="M0.5,25.5 C0.5,11.692882 11.692882,0.5 25.5,0.5 L374.5,0.5 C388.30713,0.5 399.5,11.692882 399.5,25.5 L399.5,274.5 C399.5,288.30713 388.30713,299.5 374.5,299.5 L25.5,299.5 C11.692882,299.5 0.5,288.30713 0.5,274.5 z">

<!--

InkPresenter 可以包含子控件。本例为在 InkPresenter 的底部循环播放视频

-->

</InkPresenter>

</Canvas>

</UserControl>

InkPresenter.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Ink;

using System.Xml.Linq;

using System.ServiceModel;

using System.ServiceModel.Channels;

namespace Silverlight20.Interactive

{

public partial class InkPresenter : UserControl

{

// 在涂鸦板上描绘的笔划

private System.Windows.Ink.Stroke _newStroke;

// 在涂鸦板上描绘的笔划的颜色

private System.Windows.Media.Color _currentColor = Colors.Red;

// 是否是擦除操作

private bool _isEraser = false;

// 当前是否正在 InkPresenter 上捕获鼠标

private bool _isCapture = false;

public InkPresenter()

{

InitializeComponent();

}

void inkPresenter_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

// UIElement.CaptureMouse() - 为 UIElement 对象启用鼠标捕捉

// 为 InkPresenter 启用鼠标捕捉

inkPresenter.CaptureMouse();

_isCapture = true;

if (_isEraser)

{

// 擦除鼠标当前位置所属的 Stroke（笔划）

RemoveStroke(e);

}

else

{

// System.Windows.Input.MouseEventArgs.StylusDevice.Inverted - 是否正在使用手写笔（tablet pen）的辅助笔尖

// System.Windows.Ink.Stroke.DrawingAttributes - Stroke（笔划）的外观属性

// System.Windows.Ink.Stroke.DrawingAttributes.Width - 笔划的宽

// System.Windows.Ink.Stroke.DrawingAttributes.Height - 笔划的高

// System.Windows.Ink.Stroke.DrawingAttributes.Color - 笔划的颜色

// System.Windows.Ink.Stroke.DrawingAttributes.OutlineColor - 笔划的外框的颜色

_newStroke = new System.Windows.Ink.Stroke();

_newStroke.DrawingAttributes.Width = 3d;

_newStroke.DrawingAttributes.Height = 3d;

_newStroke.DrawingAttributes.Color = _currentColor;

_newStroke.DrawingAttributes.OutlineColor = Colors.Yellow;

// 为 Stroke（笔划）在当前鼠标所在位置处增加 StylusPoint（点）

_newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));

// 将设置好的 Stroke（笔划）添加到 InkPresenter 的 Strokes（笔划集）中

inkPresenter.Strokes.Add(_newStroke);

// Stroke.GetBounds() - 获取当前 Stroke（笔划）所在的矩形范围的位置信息

// Strokes.GetBounds() - 获取当前 Strokes（笔划集）所在的矩形范围的位置信息

// 显示该 Stroke（笔划）所在的矩形范围的位置信息

Rect rect = _newStroke.GetBounds();

txtMsg.Text = string.Format("上:{0}; 下:{1}; 左:{2}; 右:{3}",

rect.Top, rect.Bottom, rect.Left, rect.Right);

}

void inkPresenter_MouseMove(object sender, MouseEventArgs e)

{

if (_isCapture)

{

if (_isEraser)

{

// 擦除鼠标当前位置所属的 Stroke

RemoveStroke(e);

}

else if (_newStroke != null)

{

// 为已经添加到 InkPresenter 的 Strokes 中的 Stroke 增加 StylusPoint

_newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));

// 显示该 Stroke 所在的矩形范围的位置信息

Rect rect = _newStroke.GetBounds();

txtMsg.Text = string.Format("上:{0}; 下:{1}; 左:{2}; 右:{3}",

rect.Top, rect.Bottom, rect.Left, rect.Right);

}

void inkPresenter_MouseLeftButtonUp(object sender, MouseEventArgs e)

{

// UIElement.CaptureMouse() - 为 UIElement 对象释放鼠标捕捉

// 为 InkPresenter 释放鼠标捕捉

inkPresenter.ReleaseMouseCapture();

_newStroke = null;

_isCapture = false;

}

void RemoveStroke(MouseEventArgs e)

{

// Stroke.HitTest(StylusPointCollection) - Stroke 是否与指定的 StylusPoint 集合相连

// Strokes.HitTest(StylusPointCollection) - 与指定的 StylusPoint 集合相连的 Stroke 集合

// 获取当前鼠标所在位置处的 StylusPoint 集合

StylusPointCollection erasePoints = new StylusPointCollection();

erasePoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));

// 与当前鼠标所在位置处的 StylusPoint 集合相连的 Stroke 集合

StrokeCollection hitStrokes = inkPresenter.Strokes.HitTest(erasePoints);

for (int i = 0; i < hitStrokes.Count; i++)

{

// 在 InkPresenter 上清除指定的 Stroke

inkPresenter.Strokes.Remove(hitStrokes[i]);

}

private void mediaElement_MediaEnded(object sender, RoutedEventArgs e)

{

// 视频播放完后，再重新播放

mediaElement.Position = TimeSpan.FromMilliseconds(0);

mediaElement.Play();

}

private void ellipseRed_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

// 单击了红色取色点

_currentColor = Colors.Red;

inkPresenter.Cursor = Cursors.Stylus;

_isEraser = false;

}

private void ellipseBlack_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

// 单击了黑色取色点

_currentColor = Colors.Black;

inkPresenter.Cursor = Cursors.Stylus;

_isEraser = false;

}

private void btnClear_Click(object sender, RoutedEventArgs e)

{

// 单击了清除按钮

inkPresenter.Strokes.Clear();

}

private void btnEraser_Click(object sender, RoutedEventArgs e)

{

// 单击了橡皮擦按钮

inkPresenter.Cursor = Cursors.Eraser;

_isEraser = true;

}

OK
[源码下载]

posted @ 2008-11-17 08:32 webabcd 阅读(5879) 评论(15) 编辑收藏举报

刷新页面返回顶部

稳扎稳打Silverlight(14) - 2.0交互之InkPresenter(涂鸦板)

公告