WPF界面设计技巧（6）—玩玩数字墨水手绘涂鸦

2021-09-07 02:12:03

原文:WPF界面设计技巧（6）—玩玩数字墨水手绘涂鸦

想让你的程序支持鼠标及手写笔涂鸦吗？只要敲入“<InkCanvas/>”这几个字符，你就会领悟什么叫“很好很强大”，今天我们来做一个手写板的演示，你可把它当作屏幕便笺使用。

首先要用 Microsoft Expression Design 2 画一幅英俊的界面背景，这里我们剽窃索尼 VAIO CR 笔记本的设计，做出了一个油光锃亮的面板：

记住还是要都绘制到一个图层上哦，图层命名为“back”。

导出为资源字典，嗯，油光锃亮：

打开 Microsoft Visual Studio 2008 ，新建 WPF 应用程序，导入资源字典：

添加引用：

然后就是代码了，这次的代码比较少。

界面代码：

Code

<Window x:Class="数字墨迹.Window1"

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

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

    Title="www.cnblogs.com" Closing="Window_Closing" Initialized="Window_Initialized" WindowStyle="ToolWindow" SizeToContent="WidthAndHeight">

    <Grid>

        <InkCanvas Background="{StaticResource back}" Width="435" Height="300" Name="ink">

            <InkCanvas.DefaultDrawingAttributes>

                <DrawingAttributes Color="#882F515B" IsHighlighter="True" StylusTip="Rectangle" Height="4" Width="2" IgnorePressure="True" FitToCurve="True">

                    <DrawingAttributes.StylusTipTransform>

                        <Matrix M11="1" M12="1.5" M21="2.2" M22="1"/>

                    </DrawingAttributes.StylusTipTransform>

                </DrawingAttributes>

            </InkCanvas.DefaultDrawingAttributes>

        </InkCanvas>

    </Grid>

</Window>

后台代码：

Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace 数字墨迹

{

    /**//// <summary>

    /// Window1.xaml 的交互逻辑

    /// </summary>

    public partial class Window1 : Window

    {

        public Window1()

        {

            InitializeComponent();

        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)

        {

            var f = new System.IO.FileStream("pic.ink", System.IO.FileMode.OpenOrCreate);

            ink.Strokes.Save(f);

            f.Close();

        }

        private void Window_Initialized(object sender, EventArgs e)

        {

            var f = new System.IO.FileStream("pic.ink", System.IO.FileMode.Open);

            if (System.IO.File.Exists("pic.ink")) ink.Strokes = new System.Windows.Ink.StrokeCollection(f);

            f.Close();

        }

    }

}