返回首页
当前位置: 主页 > VS2010 >

基于Visual C#2010开发Windows7应用 多点触摸图片处理应用程序(1)-同时处理多张图片

时间:2010-07-28 12:30来源:blog.csdn.net/yincheng01 作者:admin 点击:

windows7的触摸功能开辟了一个电脑的全新世纪。从此,您可以丢掉鼠标和键盘,直接用手在屏幕上玩游戏、用笔来写字编辑文档,聊天。 

       windows7最重要特性之一就是:支持多点触摸。比尔盖茨说,不久,鼠标键盘会消失。
Windows 7 使用户无需使用中间设备,通过手指触摸方式就能够管理应用程序。与其他指点设备不同,这种新功能支持在不同指点位置上同时发生多个输入事件,支持复杂的场景,比如通过十指或由多个并行用户管理应用程序。然而,要成功实现此功能,我们必须调整应用程序的用户界面和行为,以支持这种新的输入模式。
       下面我们来看下Windows7下多点触摸图片处理应用程序的具体酷炫操作界面:


画布功能的操作界面


多点触摸--将图片自由缩放

当我们选择好一张图片后,通过红外线触控功能使用手指可以将图片移动到屏幕内的任意位置。再通过多点触摸功能,使用两根手指就可以轻松的将图片进行自由的旋转、缩小和放大。

选择多个图片进行操作
 

 
多图片为一体时任意移动
还可以同时选择多个图片一起操作。在自己想操作的所有图片范围内,用手指以一个起点开始画圈,最后终点要与起点重合,这样就可以自由触控被选中的所有图片,不过此时这些图片是一体化的,如果想取消全选只需要点击另外任何一张图片或者屏幕内的黑色范围就可取消。 
 

 
选择并拖拽文件夹内的图片

给图片加以标签说明
 

将标签导入图片上 

在屏幕的下半部分,单击左侧的图片文件夹,会弹出该文件夹内所有的图片,通过手指上下移动,可以对所有的图片进行浏览,如果选择好其中的一张图片,直接用手指拖拽到操作界面上即可。另外通过屏幕中间最下方右边的标签功能,再结合触摸式键盘输入信息,可以给每一张图片添加标签说明,而被添加上标签的图片会自动保存到标签文件夹里,这样方便用户对图片的统一分配和整理。
      好了上面介绍了这么多关于Windows7的多点触摸图片应用程序,下面我们来打造自己的多点触摸图片处理应用程序,目标是将一个基于鼠标的简单图片操作应用程序升级为支持多点触摸的现代应用程序,类似于 Microsoft Surface 行为。

开发多点触摸图片处理应用程序  

      要理解如何管理多点触摸输入,我们首先需要理解如何处理(基于鼠标的)单点输入。为此,我们准备了一个基于鼠标的图片处理应用程序,就是多点触摸动手实验初始应用程序。 

了解解决方案  

1.   打开位于 %TrainingKitInstallDir%\MultiTouch\Ex1-PictureHandling\Begin 下的初始解决方案,选择想要使用的语言C#。

2.   编译并运行它。可以进行的操作有:通过单击挑选一张图片;按住鼠标左键并移动鼠标来拖动图片;使用鼠标滚轮缩放图片。每次选择一张图片时,该图片就会出现在最前面。在开始编码之前,首先了解一下初始应用程序。

该应用程序用于处理图片。每张图片由一个 Picture 用户控件表示。这是一个非常简单的控件,它基于 WPF。Picture 用户控件的 XAML 如下: 

XAML  
 
<UserControl x:Class="MultitouchHOL.Picture" 
 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
 
    <Image Source="{Binding Path=ImagePath}" Stretch="Fill" Width="Auto" 
 
           Height="Auto"  RenderTransformOrigin="0.5, 0.5"> 
 
        <Image.RenderTransform> 
 
            <TransformGroup> 
 
                <RotateTransform Angle="{Binding Path=Angle}"></RotateTransform> 
 
                <ScaleTransform ScaleX="{Binding Path=ScaleX}"   
 
                                    ScaleY="{Binding Path=ScaleY}"> 
 
                </ScaleTransform> 
 
                <TranslateTransform X="{Binding Path=X}" Y="{Binding Path=Y}"/> 
 
            </TransformGroup> 
 
        </Image.RenderTransform> 
 
    </Image> 
 
</UserControl>  
 

注意: 此用户控件的代码仅包括 ImagePath、Angle、ScaleX、ScaleY、X 和 Y 依赖属性的声明。ImagePath 是有效的图像文件或资源的路径。Angle 是图像的旋转角度。ScaleX 和 ScaleY 是图像的缩放系数,而 X、Y 是图像的中心位置。 
3.  现在看一下 MainWindow 类。此 XAML 文件声明 MainWindow:

(责任编辑:admin)

[返回顶部]
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片
推荐内容