基于HTML5Canvas的交互式圖形工具箱的研究與實(shí)現(xiàn).pdf

1、隨著無處不在計算技術(shù)的深入發(fā)展，HTML中傳統(tǒng)的簡單“點(diǎn)和擊”交互方式已經(jīng)不能夠滿足今天Web應(yīng)用個性化和交互多樣性的需求。因此，新標(biāo)準(zhǔn)HTML5將Web前端帶入一個標(biāo)準(zhǔn)化的應(yīng)用平臺，通過Canvas元素將圖形交互與直接操作的交互范式引入到Web應(yīng)用中，擴(kuò)充信息操作方式的同時，并帶來更好的用戶體驗(yàn)。
　　然而，由于設(shè)計并實(shí)現(xiàn)高度交互的Web圖形應(yīng)用是一個高度知識密集型行為，目前的Canvas平臺存在以下不足:首先，Canvas僅提

2、供低級的繪圖原語，并沒有給交互式圖形的開發(fā)提供高效的技術(shù)支持;其次，該平臺尚未在圖形對象層次上提供有效方便的事件處理機(jī)制。因此，這就要求開發(fā)者不僅需要學(xué)習(xí)各種圖形繪制細(xì)節(jié)，還需控制和管理作用在圖形上的交互事件，這使得HTML5Canvas上交互式圖形開發(fā)變得復(fù)雜繁瑣。
　　針對上述問題，本文提出一個基于HTML5Canvas的交互式圖形工具箱，旨在為設(shè)計者提供一種高效的交互式圖形構(gòu)建技術(shù)，提高開發(fā)效率。該工具箱具有以下特征:一方面

3、，根據(jù)數(shù)據(jù)驅(qū)動模型思想，設(shè)計了一種基于JSON的交互式圖形標(biāo)記語言JIGML，旨在一個高級抽象層次上指定交互式圖形對象及它們之間的關(guān)系，通過對圖形繪制細(xì)節(jié)進(jìn)行封裝，使得開發(fā)者不需要手動編寫代碼就能實(shí)現(xiàn)界面圖形的繪制，從而降低了開發(fā)者的學(xué)習(xí)曲線。為了實(shí)現(xiàn)這種交互式圖形標(biāo)記語言，設(shè)計并實(shí)現(xiàn)一個交互式圖形庫，進(jìn)而可以縮短開發(fā)周期;另一方面，在圖形對象層次上，設(shè)計并實(shí)現(xiàn)交互式圖形的事件轉(zhuǎn)化機(jī)制以及事件處理機(jī)制，將圖形繪制與交互事件處理相分離，從