基于移动计算的几何画板的研究与实现
|
摘要
随着计算机网络技术的飞速发展以及教育信息化的不断深入,以提高数学教学质量的辅助系统渐渐走近人们的视线,几何画板(Geometric Sketchpad)便是其中的一种。几何画板为用户提供几何对象以及几何示例等的编辑环境。目前,几乎所有的几何画板都是以软件的形式存在,运行于单机环境,故而不能为用户提供相互交流与共享资源的功能。
本文所介绍的GeometryEditor与上述几何画板系统相比,具有显著的优点：GeometryEditor绘图面板嵌入于网页中,用户在客户端通过浏览器访问的形式通过鼠标拖曳操作实现基本几何图形,如点、线段、圆等的绘制以及几何示例的编辑功能。用户也可通过系统提供的各种工具实现基于对象的几何操作,如计算圆的半径与面积以及判断两条直线之间的位置关系等。
本文结合了iPad触摸平台的事件响应、触摸手势以及iPad手势操作的特殊性,设计开发出符合触摸平台交互任务要求的PDA GeometryEditor(简称,PGE)系统,该系统是在GeometryEditor的实践基础上将其基本功能和几何操作移植到iPad等手持设备上的产物。本文详细阐述了PGE系统的移植方案,深入探讨了PGE中触摸手势与具体交互任务的映射关系问题,设计出一种符合用户操作习惯的触摸手势与几何操作之间的映射方案。除此之外,本文提炼出PGE系统的三层结构,并通过分析提出了三层结构之间的两级映射模式,从而大大提高了PGE系统的可移植性和跨平台性。
With the rapid development of computer networks and the development of educational informationization, kinds of products which aim at improving the quality of mathematic teaching has gradually approached people's attention, Geometric Sketchpad is a kind of them. Geometric Sketchpad provides users with geometric objects and geometric manipulation editing environment. At present, almost all of the Geometric Sketchpad existing in the form of software, and running on a stand-alone environment, therefore can not provide users with the functionality of the mutual exchange and sharing of resources.
Compared to the above Geometric Sketchpad systems, the GeometryEditor this paper introduced has significant advantages:GeometryEditor's drawing panel is embedded in a website, users can visit the site through a browser client, and edit points, segments, circles and other geometry objects via mouse drag operation. Users also can use the various tools provided by the system to achieve functions such as computing the radius and area of a circle, judge the relationship between two lines, etc.
This paper combined the iPad touch platform response events, touches gestures and gesture operation characteristic, designed and developed the PDA GeometryEditor (PGE, for short) system which is the product of transplanted the functions and manipulates of GeometryEditor to the iPad and other touch platform devices. The paper described in detail the transplantion program of the PGE system, in-depth studied the touch gestures and specific interaction task mapping problem, designed a touch gestures and geometric operations mapping program with could better suits PGE users'habits. Besides, this paper extracted PDA GeometryEditor's three-layer structure, by analyzing the three-layer structure we proposed a two-layer mapping program among the three layers, thus improved the portability and cross-platform ability of PDA GeometryEditor system.
本文所介绍的GeometryEditor与上述几何画板系统相比,具有显著的优点：GeometryEditor绘图面板嵌入于网页中,用户在客户端通过浏览器访问的形式通过鼠标拖曳操作实现基本几何图形,如点、线段、圆等的绘制以及几何示例的编辑功能。用户也可通过系统提供的各种工具实现基于对象的几何操作,如计算圆的半径与面积以及判断两条直线之间的位置关系等。
本文结合了iPad触摸平台的事件响应、触摸手势以及iPad手势操作的特殊性,设计开发出符合触摸平台交互任务要求的PDA GeometryEditor(简称,PGE)系统,该系统是在GeometryEditor的实践基础上将其基本功能和几何操作移植到iPad等手持设备上的产物。本文详细阐述了PGE系统的移植方案,深入探讨了PGE中触摸手势与具体交互任务的映射关系问题,设计出一种符合用户操作习惯的触摸手势与几何操作之间的映射方案。除此之外,本文提炼出PGE系统的三层结构,并通过分析提出了三层结构之间的两级映射模式,从而大大提高了PGE系统的可移植性和跨平台性。
With the rapid development of computer networks and the development of educational informationization, kinds of products which aim at improving the quality of mathematic teaching has gradually approached people's attention, Geometric Sketchpad is a kind of them. Geometric Sketchpad provides users with geometric objects and geometric manipulation editing environment. At present, almost all of the Geometric Sketchpad existing in the form of software, and running on a stand-alone environment, therefore can not provide users with the functionality of the mutual exchange and sharing of resources.
Compared to the above Geometric Sketchpad systems, the GeometryEditor this paper introduced has significant advantages:GeometryEditor's drawing panel is embedded in a website, users can visit the site through a browser client, and edit points, segments, circles and other geometry objects via mouse drag operation. Users also can use the various tools provided by the system to achieve functions such as computing the radius and area of a circle, judge the relationship between two lines, etc.
This paper combined the iPad touch platform response events, touches gestures and gesture operation characteristic, designed and developed the PDA GeometryEditor (PGE, for short) system which is the product of transplanted the functions and manipulates of GeometryEditor to the iPad and other touch platform devices. The paper described in detail the transplantion program of the PGE system, in-depth studied the touch gestures and specific interaction task mapping problem, designed a touch gestures and geometric operations mapping program with could better suits PGE users'habits. Besides, this paper extracted PDA GeometryEditor's three-layer structure, by analyzing the three-layer structure we proposed a two-layer mapping program among the three layers, thus improved the portability and cross-platform ability of PDA GeometryEditor system.
引文
[1]Xun Lai.GEOMETRYEDITOR:A WEB-BASED SYSTEM FOR AUTHORING, SHARING AND SUPPORT OF PLANE GEOMETRY MANIPULATIVES FOR MATHEMATICS EDUCATION[D].America:Kent State University.2010.
[2]Paul Wang, Xun Lai.An SVG Based Tool for Plane Geometry and Mathematics Education[J], IAMC 2005 Workshop,2005, Chinese Academy of Sciences, Beijing, China.
[3]Daniel Scher, Lifting the Curtain:The Evolution of The Geometer's Sketchpad, Mathematics Educator, Vol.10, Num 2, pp.42-48.
[4]Lai Xun,Wang P.GeoSVG:A Web-based Interactive Plane Geometry System for Mathematics Education[C].//Proc.of the 2nd LASTED International Conference on Education and Technology.Puerto Vallarta,Mexico:[s.n.],2006:5-10.
[5]Lai Xun,Wang P.An SVG Based Tool for Plane Geometry and Mathematics Education[C] IEEE Southeast Con..Fort Lauderdale, Florida, USA:[s.n.],2005.
[6]侯晓静,苑津莎,李中,祁立刚.基于SVG的网络图形制作方法研究[J].电力系统通信.2007,28：43-45.
[7]陈曦.基于JavaScript及JAVA的SVG交互应用[J].科技资讯,2008(7)：69-70.
[8]陈曦.svg与javascript的应用[J].科技资讯.2006,第7期.
[9]张国华,衡祥安等.基于多点触摸的交互手势分析与设计[J].计算机应用研究.2010.27(5)：1737-1739.
[10]李文生,邓春健等.基于触摸显示屏的人机交互手势分析[J].液晶与显示.2011,28(2)：194-199.
[11]李兵兵.电容式多点触摸技术的研究与实现[D].成都：电子科技大学.2011.
[12]王军亮.触摸屏技术的结构原理及应用[J].甘肃教育学院学报.1999,13：12-13.21：7-8.
[13]John Feland触摸未来：投射电容式触摸屏引领新市场[J].现代显示.2009,第99期.
[14]王彬,邓刚,黄云锴.使用JavaScript实现基于SVG的WEBGIS动态交互[J].2008,电脑开发与应用.2008,21(10)：7-8.
[15]SVG学习.http://apps.hi.baidu.com/share/detail/17641741[OL].2010.
[16]秦万治.多点触摸技术的初步研究[D].成都：电子科技大学.2010.
[17]Wu M, Balakrishnan R. Multi-finger and whole hand gestural interaction techniques for multi-user tabletop displays[C].//16 th Annual ACM Symposium on User Interface Software and Technology. New York:ACM Press,2003:193-202.
[18]Wu M, Shen C, Ryallk K, et al. Gesture registration, relaxation, and reuse for multi-point direct touch surfaces[C].//lst IEEE International Workshop on Horizontal Interactive Human-Computer Sys tem. Washington DC:IEEE Computer Society,2006:183-190.
[19]HENG Xiang-an, LAO Songyang, LEE H, et al. A touch interaction model for tabletops and PDAs[C].//Workshop on Designing Multi-touch Interaction Techniques for Coupled Public and Private Displays.2008:9-13.
[20]凌云翔,张国华,李锐.基于多点触摸的自然手势识别方法研究[J].国防科技大学学报,2010.32(1)：127-132.
[21]多点触摸技术成未来趋势.http://www.chinaui.com/news/2/20080218/3065.html.
[22]老松杨,黄广连,张国华等.双手触摸交互触控平台[J].中国科技成果,2009,10(11)：58-60.
[23]黄璐.面向交互的手势识别研究[D].武汉：华中师范大学.2011.
[24]Guisheng Fang, Lili He, Fansheng Kong, Li Zengfang. An Online Sketching and Gesture Editing System for Conceptual Design[J]. Computer-Aided Industrial Design and Conceptual Design.2006. CAIDCD'06.7th International.
[25]宋瑞华.基于傅立叶描绘子的手势识别算法[D].西安：西安电子科技大学.2008.
[26]袁向荣,田新诚.基于神经网络的手势识别[J].山东交通学院学报.2006,14(2)：63-66.
[27]Buxton W,Myers B. A study in two-handed input[C]. ACM Conference on Human Factors in Computing Systems. New York:ACM Press,1986:3212326.
[28](美)Jon Duckett著.杜静等译.Web编程入门经典[M].北京：清华大学出版社.2010.
[29](美)Robert W.Sebesta著,徐燕华,孙红丽等译.Web程序设计[M].北京：清华大学出版社.2010.
[30](德)Christian heilman著,牛海彬译.深入浅出JavaScript[M]北京：人民邮电出版社.2008.
[31]Pifoo指尖下的js-多触式Web前端开发2011. http://www.cnblogs.com/pifoo/archive/2011 /05/23/Webkit-touch-event-l.html.
[32]王黎,于永军,张豪等.PHP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例[M].北京：清华大学出版社.2010.
[33]Dave Mark, Jeff LaMarche. iphone 3开发基础教程[M].北京：人民邮电出版社.2009.
[34]Jack Nutting, Dave Wooldridge等iPad开发基础教程[M].北京：人民邮电出版社.2011.
[35]Brandon Trebitowski, Christopher Allen, Shannon Appelcline. iphone与iPad开发实践[M].北京：人民邮电出版社.2011.
[36]孙东风iphone & iPad开发实战[M].北京：海洋出版社.2010.
[37]李晨iPad应用开发实战[M].北京：机械工业出版社.2011.
[38]Apple Developer Center. Safari Web Content Guide.2011.
[39]杨止洪,苏伟基,郑齐心,杜理渊iPhone4应用程序开发入门与实战[M].北京：清华大学出版社.2011.
[40](美)Andy Wigley,Daniel Moth,Peter Foot著,张大威泽Microsoft Mobile移动应用开发宝典[M].北京：清华大学出版社.2008.
[41]房爱莲.PHP动态网页设计与制作案例教程[M].北京：北京大学出版社.2011.
[42]胡思捷.基于Android平台的触摸屏系统设计及实现[D].天津：南开大学.2011.
[43]靳岩,姚尚朗Android开发入门与实战[M].北京：人民邮电出版社,2009.
[44]AppleiPhone.http://www.apple.com/iphone/teehnology/.
[45](澳)I(?)uke Welling, Laura Thomson著,武欣,邵煜等译.PHP和MySQL Web开发[M].北京：机械工业出版社.2005.
[46](挪)Dagfinn Reiersl,(英)Marcus Baker,(美)Chris Shiflett著,张颖等泽.PHP实战[M].北京：人民邮电出版社.2010.
[47]touch事件学习.http://archive.cnblogs.com/a/2223902/[OL].2011.
[48]safari里的touch事件解析.http://hi.baidu.com/ali_myself/blog/item/fc83b69485b0197654 fb9658.html[OL].
[49]iPad网页开发教程及规则.http://www.cnblogs.com/jinbiao/archive./2011/09/26/2191679 .html[OL].2011.
[2]Paul Wang, Xun Lai.An SVG Based Tool for Plane Geometry and Mathematics Education[J], IAMC 2005 Workshop,2005, Chinese Academy of Sciences, Beijing, China.
[3]Daniel Scher, Lifting the Curtain:The Evolution of The Geometer's Sketchpad, Mathematics Educator, Vol.10, Num 2, pp.42-48.
[4]Lai Xun,Wang P.GeoSVG:A Web-based Interactive Plane Geometry System for Mathematics Education[C].//Proc.of the 2nd LASTED International Conference on Education and Technology.Puerto Vallarta,Mexico:[s.n.],2006:5-10.
[5]Lai Xun,Wang P.An SVG Based Tool for Plane Geometry and Mathematics Education[C] IEEE Southeast Con..Fort Lauderdale, Florida, USA:[s.n.],2005.
[6]侯晓静,苑津莎,李中,祁立刚.基于SVG的网络图形制作方法研究[J].电力系统通信.2007,28：43-45.
[7]陈曦.基于JavaScript及JAVA的SVG交互应用[J].科技资讯,2008(7)：69-70.
[8]陈曦.svg与javascript的应用[J].科技资讯.2006,第7期.
[9]张国华,衡祥安等.基于多点触摸的交互手势分析与设计[J].计算机应用研究.2010.27(5)：1737-1739.
[10]李文生,邓春健等.基于触摸显示屏的人机交互手势分析[J].液晶与显示.2011,28(2)：194-199.
[11]李兵兵.电容式多点触摸技术的研究与实现[D].成都：电子科技大学.2011.
[12]王军亮.触摸屏技术的结构原理及应用[J].甘肃教育学院学报.1999,13：12-13.21：7-8.
[13]John Feland触摸未来：投射电容式触摸屏引领新市场[J].现代显示.2009,第99期.
[14]王彬,邓刚,黄云锴.使用JavaScript实现基于SVG的WEBGIS动态交互[J].2008,电脑开发与应用.2008,21(10)：7-8.
[15]SVG学习.http://apps.hi.baidu.com/share/detail/17641741[OL].2010.
[16]秦万治.多点触摸技术的初步研究[D].成都：电子科技大学.2010.
[17]Wu M, Balakrishnan R. Multi-finger and whole hand gestural interaction techniques for multi-user tabletop displays[C].//16 th Annual ACM Symposium on User Interface Software and Technology. New York:ACM Press,2003:193-202.
[18]Wu M, Shen C, Ryallk K, et al. Gesture registration, relaxation, and reuse for multi-point direct touch surfaces[C].//lst IEEE International Workshop on Horizontal Interactive Human-Computer Sys tem. Washington DC:IEEE Computer Society,2006:183-190.
[19]HENG Xiang-an, LAO Songyang, LEE H, et al. A touch interaction model for tabletops and PDAs[C].//Workshop on Designing Multi-touch Interaction Techniques for Coupled Public and Private Displays.2008:9-13.
[20]凌云翔,张国华,李锐.基于多点触摸的自然手势识别方法研究[J].国防科技大学学报,2010.32(1)：127-132.
[21]多点触摸技术成未来趋势.http://www.chinaui.com/news/2/20080218/3065.html.
[22]老松杨,黄广连,张国华等.双手触摸交互触控平台[J].中国科技成果,2009,10(11)：58-60.
[23]黄璐.面向交互的手势识别研究[D].武汉：华中师范大学.2011.
[24]Guisheng Fang, Lili He, Fansheng Kong, Li Zengfang. An Online Sketching and Gesture Editing System for Conceptual Design[J]. Computer-Aided Industrial Design and Conceptual Design.2006. CAIDCD'06.7th International.
[25]宋瑞华.基于傅立叶描绘子的手势识别算法[D].西安：西安电子科技大学.2008.
[26]袁向荣,田新诚.基于神经网络的手势识别[J].山东交通学院学报.2006,14(2)：63-66.
[27]Buxton W,Myers B. A study in two-handed input[C]. ACM Conference on Human Factors in Computing Systems. New York:ACM Press,1986:3212326.
[28](美)Jon Duckett著.杜静等译.Web编程入门经典[M].北京：清华大学出版社.2010.
[29](美)Robert W.Sebesta著,徐燕华,孙红丽等译.Web程序设计[M].北京：清华大学出版社.2010.
[30](德)Christian heilman著,牛海彬译.深入浅出JavaScript[M]北京：人民邮电出版社.2008.
[31]Pifoo指尖下的js-多触式Web前端开发2011. http://www.cnblogs.com/pifoo/archive/2011 /05/23/Webkit-touch-event-l.html.
[32]王黎,于永军,张豪等.PHP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例[M].北京：清华大学出版社.2010.
[33]Dave Mark, Jeff LaMarche. iphone 3开发基础教程[M].北京：人民邮电出版社.2009.
[34]Jack Nutting, Dave Wooldridge等iPad开发基础教程[M].北京：人民邮电出版社.2011.
[35]Brandon Trebitowski, Christopher Allen, Shannon Appelcline. iphone与iPad开发实践[M].北京：人民邮电出版社.2011.
[36]孙东风iphone & iPad开发实战[M].北京：海洋出版社.2010.
[37]李晨iPad应用开发实战[M].北京：机械工业出版社.2011.
[38]Apple Developer Center. Safari Web Content Guide.2011.
[39]杨止洪,苏伟基,郑齐心,杜理渊iPhone4应用程序开发入门与实战[M].北京：清华大学出版社.2011.
[40](美)Andy Wigley,Daniel Moth,Peter Foot著,张大威泽Microsoft Mobile移动应用开发宝典[M].北京：清华大学出版社.2008.
[41]房爱莲.PHP动态网页设计与制作案例教程[M].北京：北京大学出版社.2011.
[42]胡思捷.基于Android平台的触摸屏系统设计及实现[D].天津：南开大学.2011.
[43]靳岩,姚尚朗Android开发入门与实战[M].北京：人民邮电出版社,2009.
[44]AppleiPhone.http://www.apple.com/iphone/teehnology/.
[45](澳)I(?)uke Welling, Laura Thomson著,武欣,邵煜等译.PHP和MySQL Web开发[M].北京：机械工业出版社.2005.
[46](挪)Dagfinn Reiersl,(英)Marcus Baker,(美)Chris Shiflett著,张颖等泽.PHP实战[M].北京：人民邮电出版社.2010.
[47]touch事件学习.http://archive.cnblogs.com/a/2223902/[OL].2011.
[48]safari里的touch事件解析.http://hi.baidu.com/ali_myself/blog/item/fc83b69485b0197654 fb9658.html[OL].
[49]iPad网页开发教程及规则.http://www.cnblogs.com/jinbiao/archive./2011/09/26/2191679 .html[OL].2011.