silverlight：手写板/涂鸦/墨迹/InkPresenter示例程序

现在的位置: 首页 > 综合 > 正文

RSS

silverlight：手写板/涂鸦/墨迹/InkPresenter示例程序

2012年09月30日 ⁄ 综合 ⁄ 共 12736字 ⁄ 字号小中大 ⁄ 评论关闭

这种应用现在已经比较常见了，比如论坛回贴中的手写功能，IM聊天中的个性化手写文字，个性签名等，在Silverlight中要实现该功能其实非常简单，只要一个InkPresenter控件即可

使用要点:

1.要合理设置裁剪区，否则手写时可能笔划会写到你不希望出现的地方.
2.处理好MouseLeftButtonDown,MouseMove,LostMouseCapture这三个事件.

演示代码：

前端Xaml部分:

by 菩提树下的杨过 http://yjmyzz.cnblogs.com/

        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="150"></RowDefinition>
        </Grid.RowDefinitions>

            </InkPresenter>

            <TextBlock Text="by 菩提树下的杨过" MouseLeftButtonDown="TextBlock_MouseLeftButtonDown" Cursor="Hand" Canvas.Left="5" Canvas.Top="5" Foreground="LightGray"></TextBlock>
        </Canvas>

</Grid>

</UserControl>

后端代码：

by 菩提树下的杨过 http://yjmyzz.cnblogs.com/

using System.Windows;
using System.Windows.Controls;
using System.Collections.Generic;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Browser;
using System.Windows.Media.Imaging;
using System.IO;
using FluxJpeg.Core;

namespace InkPresenterTest
{
    public partial class Page : UserControl
    {
        Stroke _drawStroke;

        List<FillColor> lstFillColor;
        List<SizeData> lstSizeData;
        List<OpacityData> lstOpacityData;

bool _isLoaded = false;

        public Page()
        {
            InitializeComponent();

            //初始化数据
            lstFillColor = new List<FillColor>() {
                new FillColor(){ Color = new SolidColorBrush(Colors.Black), Name="黑色"},
                new FillColor(){ Color = new SolidColorBrush(Colors.Red), Name="红色"},
                new FillColor(){ Color = new SolidColorBrush(Colors.Blue), Name="蓝色"},
                new FillColor(){ Color = new SolidColorBrush(Colors.Green),Name="绿色"},
                new FillColor(){ Color = new SolidColorBrush(Colors.Magenta), Name="洋红"},
                new FillColor(){ Color = new SolidColorBrush(Colors.Orange), Name="橙色"},
            };

            lstSizeData = new List<SizeData>()
            {
                new SizeData(){ Size=1.0},
                new SizeData(){ Size=3.0},
                new SizeData(){ Size=5.0},
                new SizeData(){ Size=7.0},
                new SizeData(){ Size=9.0},
                new SizeData(){ Size=11.0},
                new SizeData(){ Size=13.0},
                new SizeData(){ Size=15.0}

            };

            lstOpacityData = new List<OpacityData>(){
                new OpacityData(){ Value=0.1},
                new OpacityData(){ Value=0.2},
                new OpacityData(){ Value=0.3},
                new OpacityData(){ Value=0.4},
                new OpacityData(){ Value=0.5},
                new OpacityData(){ Value=0.6},
                new OpacityData(){ Value=0.7},
                new OpacityData(){ Value=0.8},
                new OpacityData(){ Value=0.9},
                new OpacityData(){ Value=1.0}
            };

this.Loaded += new RoutedEventHandler(Page_Loaded);
}

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            this.cboColor.ItemsSource = lstFillColor;
            this.cboColor.SelectedIndex = 0;

this.cboOutlineColor.ItemsSource = lstFillColor;
this.cboOutlineColor.SelectedIndex = 0;

this.cboWidth.ItemsSource = lstSizeData;
this.cboWidth.SelectedIndex = 0;

this.cboHeight.ItemsSource = lstSizeData;
this.cboHeight.SelectedIndex = 0;

this.cboOpactiy.ItemsSource = lstOpacityData;
this.cboOpactiy.SelectedIndex = 5;

_isLoaded = true;
}

        private void OnMouseLeftButtonDown(object sender, MouseEventArgs e)
        {
            ink.CaptureMouse();
            StylusPointCollection MyStylusPointCollection = new StylusPointCollection();
            MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(ink));
            _drawStroke = new Stroke(MyStylusPointCollection);
            _drawStroke.DrawingAttributes.Color = (cboColor.SelectedItem as FillColor).Color.Color;
            _drawStroke.DrawingAttributes.OutlineColor = (this.cboOutlineColor.SelectedItem as FillColor).Color.Color;
            _drawStroke.DrawingAttributes.Width = (this.cboWidth.SelectedItem as SizeData).Size;
            _drawStroke.DrawingAttributes.Height = (this.cboHeight.SelectedItem as SizeData).Size;
            //_drawStroke.SetValue(OpacityProperty, (this.cboOpactiy.SelectedItem as OpacityData).Value);
            ink.Strokes.Add(_drawStroke);
            ink.Opacity = (cboOpactiy.SelectedItem as OpacityData).Value;
        }

        private void OnMouseMove(object sender, MouseEventArgs e)
        {
            if (_drawStroke != null)
            {
                _drawStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(ink));
            }
        }

        private void OnLostMouseCapture(object sender, MouseEventArgs e)
        {
            _drawStroke = null;
        }

        private void btnClear_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            ink.Strokes.Clear();
        }

        private void cboOpactiy_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            if (_isLoaded)
            {
                ink.Opacity = (cboOpactiy.SelectedItem as OpacityData).Value;
            }
        }

        private void btnToogleBg_Click(object sender, RoutedEventArgs e)
        {
            Button btn = (sender as Button);
            if (btn.Content.ToString() == "隐藏背景图")
            {
                imgBg.Visibility = Visibility.Collapsed;
                btn.Content = "显示背景图";
            }
            else
            {
                imgBg.Visibility = Visibility.Visible;
                btn.Content = "隐藏背景图";
            }
        }

        private void btnToogleBgRect_Click(object sender, RoutedEventArgs e)
        {
            Button btn = (sender as Button);
            if (btn.Content.ToString() == "隐藏背景色")
            {
                this.rectBg.Visibility = Visibility.Collapsed;
                btn.Content = "显示背景色";
            }
            else
            {
                rectBg.Visibility = Visibility.Visible;
                btn.Content = "隐藏背景色";
            }
        }

        private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            HtmlPage.Window.Navigate(new System.Uri("http://yjmyzz.cnblogs.com/"), "_blank");
        }

        private void btnSave_Click(object sender, RoutedEventArgs e)
        {
            // 创建一个WriteableBitmap并且把需要呈现位图的元素赋值给WriteableBitmap
            WriteableBitmap wb = new WriteableBitmap(inkC, null);

            // 创建一个Image元素来承载位图
            System.Windows.Controls.Image image = new System.Windows.Controls.Image();
            image.Height = 120;
            image.Margin = new Thickness(5);
            image.Source = wb;

【上篇】洛克菲勒留给儿子的38封信——第29封：尾声就是开始
【下篇】d-Left Counting Bloom Filter (1)

作者: severance

该日志由 severance 于12年前发表在综合分类下，最后更新于 2012年09月30日.
转载请注明: silverlight：手写板/涂鸦/墨迹/InkPresenter示例程序 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

（其他合作也可洽谈）

必威体育

必威电竞

学步园