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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

杰克.陈 2014-03-03 23:37:00 浏览835
展开阅读全文
原文:WPF界面设计技巧(6)—玩玩数字墨水手绘涂鸦

 

 

 

 

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

 

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

 

 

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

 

导出为资源字典,嗯,油光锃亮:

 

 

 

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

 

 

 

添加引用:

 

 

 

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

 

界面代码:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifCode
<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>

 

后台代码:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifCode
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 数字墨迹
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
/**//// <summary>
    
/// Window1.xaml 的交互逻辑
    
/// </summary>

    public partial class Window1 : Window
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
{
        
public Window1()
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            InitializeComponent();
        }


        
private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            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)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
{
            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();
        }

    }

}

 

 

先看效果吧,编译运行:

 

 

 

可以用鼠标、手写笔或触摸屏在上面随意涂鸦,这感觉很好。

 

想像一下,这个软件对于囚犯来说,会是多么重要。

 

 

 

对于一些手写笔,还支持反转时转换为橡皮擦功能,很牛X

 

关闭程序后,我们的艺术品还会被自动保存为 pic.ink 这个文件,这样在下次程序启动时,我们就可以继续创作了。

 

代码讲解:

 

 

 

先来讲个小技巧,为窗体设置 SizeToContent="WidthAndHeight" ,然后将其宽、高都改为 Auto ,可以让窗体根据其内容自适应大小,这在多数情况下非常好用,如果你在意界面的边距空间美感的话。

 

 

 

InkCanvas 是数字墨迹的容器,InkCanvas.DefaultDrawingAttributes 属性定义了其默认的绘制样式,我们在这里可以为其调整笔刷颜色、形状、等为数不多的样式,其中几项还不太好用,比如压感支持 IgnorePressure ,在我这设了也没用。

 

DrawingAttributes.StylusTipTransform 属性可以将普通且无辜的笔刷形状残忍地扭曲,它使用一个矩阵来来完成这一恶毒行径。

 

 

 

这里是一些简单的 IO 操作,很好理解。

 

嗯,不管你是否喜欢,我都将用一个操蛋的方式结束本篇:

 

 

 

 

源代码下载(包含 Design 设计文件)

网友评论

登录后评论
0/500
评论
杰克.陈
+ 关注