穩紮穩打Silverlight(14) - 2.0互動之InkPresenter(塗鴉闆)

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

介紹

Silverlight 2.0 人機互動：InkPresenter(塗鴉闆)

InkPresenter - 塗鴉闆，也就是在面闆上呈現墨迹。InkPresenter 可以包含子控件

Cursor - 滑鼠移動到 InkPresenter 上面時，滑鼠指針的樣式

Background - 塗鴉闆背景

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

Clip - InkPresenter 的剪輯區域

Stroke.DrawingAttributes - Stroke（筆劃）的外觀屬性

UIElement.CaptureMouse() - 為 UIElement 對象啟用滑鼠捕捉

UIElement.CaptureMouse() - 為 UIElement 對象釋放滑鼠捕捉

線上DEMO

<a href="http://webabcd.blog.51cto.com/1787395/342779">http://webabcd.blog.51cto.com/1787395/342779</a>

示例

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;

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;

}

本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/343057，如需轉載請自行聯系原作者

穩紮穩打Silverlight(14) - 2.0互動之InkPresenter(塗鴉闆)

繼續閱讀

MySQL和Lucene索引對比分析1. MySQL索引實作2. Lucene索引實作3. MySQL與Lucence對比參考：

一文搞定 MySQL 索引

MySQL（第五篇）—資料的完整性限制（2）（索引、引用完整性）資料的完整性限制（2）三、索引四、引用完整性

【MySQL索引】MySQL索引分類，90%的開發都不知道一、根據底層資料結構劃分二、根據索引字段個數劃分三、根據是否是在主鍵上建立的索引進行劃分四、根據資料與索引的存儲關聯性劃分五、其他分類六、總結

JS--------for循環删除數組元素

Python中字元串常見操作總結

Lucence的基本原理

sql執行計劃 explain 以及結合索引優化sql

2023年最新5款手機推薦：第1款蘋果iPhone14ProMax：蘋果iPhone14ProMax預計将于2023年發

MySQL - order by排序優化

2021-08-08 mysql索引

SQLServer 提升查詢速度

詳解SQL中幾種常用的表連接配接方式

oracle 中不使用已有的索引解決辦法

對first_name建立唯一索引uniq_idx_firstname問題描述Sql語句

記一次因MySQL編碼問題導緻的慢查詢排查