• 在Silverlight2 Beta2中实现手写功能


    想象一下我们在纸上写字的过程,我们需要一张纸和一只笔,然后我们下笔开始写第一字的头一个笔画,运笔的过程中我们可以根据力度来控制笔画线条的轻重,最后收笔。然后写下一个笔画......。

    在Silverlight2中这张纸就是InkPresenter控件,InkPresenter控件作为一组笔画(Stroke)的容器用来现实墨迹,Ink 引用的是笔、触摸屏和鼠标输入的笔迹或者画的内容。Silverlight 中的 Ink 由StrokeCollection对象构成,StrokeCollection对象由不同的Stroke对象组成。每个Stroke对应一个笔的按下、移动和抬起序列。Stroke可以是一个点、一条直线甚至一条曲线。每个Stroke 由一个 StylusPointCollection对象组成,它又有不同的StylusPoint组成。当笔与数字转换器接触并移动的时候,StylusPoint 对象是一个集合。我们可以通过该对象的DrawingAttributes属性来设置颜色,宽度,轮廓颜色等。

    下图说明InkPresenter的结构:

    SLMan1 

    InkPresenter不支持在该控件内来使用Stroke,StrokeCollection标记。你只能通过编程的方式来控制。下面就来简单实现一个例子来说明。InkPresenter控件中比较关键的事件为MouseLeftButtonDown,MouseMove,MouseLeftButtonUp,当InkPresenter接收到MouseLeftButtonDown事件,你需要创建一个新的Stroke在内存中,并且将其加入到StrokeCollection中,当MouseMove的时候我们将StylusPoints到Stroke中。MouseLeftButtonUp事件中结束Stroke。我们创建一个Silverlight项目,在page.xaml中添加如下代码:

    <
    UserControl x:Class="SilverlightApplication2.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="400" Height="300">
        <Grid x:Name="LayoutRoot" Background="White">
            <Rectangle x:Name="inkBorder" Width="346" Height="234" Stroke="#FF000000"
             Canvas.Top="25" Canvas.Left="25" RadiusX="25" RadiusY="25"/>
            <InkPresenter x:Name="inkP" Width="344" Height="232" Canvas.Left="25" Canvas.Top="34"
             MouseLeftButtonDown="inkP_MouseLeftButtonDown" MouseLeftButtonUp="inkP_MouseLeftButtonUp"
             MouseMove="inkP_MouseMove" Background="LightBlue"> 
            </InkPresenter>
        </Grid>
    </UserControl>

    在page.xaml.cs中添加鼠标MouseLeftButtonDownMouseMoveMouseLeftButtonUp的事件处理程序来实现手写功能代码如下:

    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.IO;

    namespace SilverlightApplication2
    {
        public partial class Page : UserControl { public Page()
            {
                InitializeComponent();
            }

            System.Windows.Ink.Stroke newStroke;       

            void inkP_MouseLeftButtonDown(object sender, MouseEventArgs e)
            {
                inkP.CaptureMouse();
                newStroke = new System.Windows.Ink.Stroke();
                newStroke.DrawingAttributes.Color = Colors.Red;
                newStroke.DrawingAttributes.OutlineColor = Colors.Yellow;
             
                newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));           
                inkP.Strokes.Add(newStroke);
            }
            void inkP_MouseMove(object sender, MouseEventArgs e)
            {
                if (newStroke != null)
                {
                    newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));               
                }
            }
            void inkP_MouseLeftButtonUp(object sender, MouseEventArgs e)
            {           
                newStroke = null;
                inkP.ReleaseMouseCapture();           
            }
        }
    }

    1.下面代码用来设置笔画颜色和轮廓颜色:

    newStroke.DrawingAttributes.Color = Colors.Red; 
    newStroke.DrawingAttributes.OutlineColor = Colors.Yellow;



    运行项目后效果如下:
    SLMan2 
    上面只是实现了最简单的手写功能,还有很多很多不完善的地方。
    作者:生鱼片
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    拖拽改变元素位置或大小bug修复
    拖拽改变元素位置或大小
    vue使用input上传多张图片,可以预览
    javaScript面向对象编程学习(二)
    移动端适配字体大小
    js的时间戳的转换
    vue-cli3.X中的vue.config.js的配置
    javaScript面向对象编程学习(一)
    Visual Studio code 常用插件集集合。
    js的四个小练习
  • 原文地址:https://www.cnblogs.com/carysun/p/SLManual.html
Copyright © 2020-2023  润新知