圖撲 HT for Web 風(fēng)格屬性手冊教程

圖撲軟件明星產(chǎn)品 HT for Web 是一套純國產(chǎn)化獨立自主研發(fā)的 2D 和 3D 圖形界面可視化引擎。HT for Web（以下簡稱 HT）圖元的樣式由其 Style 屬性控制，并且不同類型圖元的 Style 屬性各不相同。為了方便查詢和理解圖元的 Style 屬性，以及更加便捷地應(yīng)用和理解每個屬性的作用，圖撲 HT 提供了風(fēng)格手冊。

風(fēng)格手冊可以幫助開發(fā)人員在樣式設(shè)定過程中快速查找所需屬性，并了解其用途和影響范圍。通過風(fēng)格手冊，開發(fā)人員可以更加高效地調(diào)整圖元的樣式，減少查找和理解樣式屬性的工作量。

風(fēng)格手冊界面介紹

風(fēng)格手冊界面布局比較簡單，可以分為工具欄、2D/3D 視圖區(qū)域、屬性樹和屬性面板四個部分。

工具欄中有四個按鈕：

? 按鈕一：切換到 2D 圖紙。

? 按鈕二：切換到 3D 場景。

? 按鈕三：刷新圖紙/場景。

? 按鈕四：在新窗口中打開。

2D/3D 視圖區(qū)域：用于展示圖紙或者場景的內(nèi)容。

屬性樹：屬性樹分為屬性搜索框和屬性樹兩個部分。

屬性面板：分為“屬性描述”和“獲取屬性”兩個 Tab 內(nèi)容，可以進(jìn)行切換展示。

功能介紹

屬性樹

右側(cè)的屬性樹可以分為屬性檢索和屬性樹兩個部分。

1.屬性檢索支持屬性名和屬性的模糊搜索，為開發(fā)人員提供便捷的屬性查詢功能。

2.屬性樹按照特性進(jìn)行分類顯示，每一個屬性都顯示了四個內(nèi)容：屬性、屬性名、屬性值的類型和默認(rèn)值。讓開發(fā)人員能更加便捷地了解屬性。為了使用上能更加方便，屬性樹還增加了雙擊復(fù)制屬性的功能。

屬性面板

面板分為兩個部分：屬性描述和獲取屬性。其中屬性描述 Tab 頁分為：節(jié)點類型、屬性、屬性名、默認(rèn)值、修改屬性值和屬性描述六個內(nèi)容。在獲取屬性 Tab 中可以看到當(dāng)前節(jié)點上設(shè)置的所有屬性。

選中屬性樹某個屬性，屬性面板會自動彈出，顯示當(dāng)前選中屬性的屬性描述。點擊 2D/3D 視圖的空白區(qū)域時，屬性面板就會自動收起。

屬性描述

1.屬性：屬性描述的“屬性”右側(cè)有“復(fù)制”按鈕，點擊可以復(fù)制屬性。

2.修改屬性值：屬性描述中有修改屬性值的功能，會根據(jù)不同類型的數(shù)據(jù)，顯示不同的編輯框。比較特殊的兩種類型：函數(shù)類型（例如：onClick）和數(shù)組類型（例如：shape.dash.pattern），修改屬性值的位置會顯示按鈕，點擊按鈕之后會彈出編輯框，需要在編輯框中進(jìn)行設(shè)置。

• 如果選中的是事件處理類型下的屬性（函數(shù)類型），“屬性描述”中會顯示事件處理按鈕，點擊按鈕會彈出事件處理彈窗，在這個彈窗中可以編輯事件代碼。

• 如果選中的屬性的屬性值類型為數(shù)組，“屬性描述”中顯示編輯按鈕，點擊按鈕會出現(xiàn)編輯框，需要在這個彈窗中編輯數(shù)據(jù)。

獲取屬性

風(fēng)格手冊的獲取屬性的功能，會實時獲取節(jié)點上的屬性，并顯示出來。通過實時獲取屬性的功能，開發(fā)人員就可以快速查看當(dāng)前節(jié)點的屬性設(shè)置情況。

工具欄

1.2D/3D 切換按鈕：為了提供更直觀的了解屬性效果，風(fēng)格手冊內(nèi)置了 2D 圖紙和 3D 場景，并提供了 2D/3D 切換按鈕。用戶可以通過點擊切換按鈕，方便地在場景和圖紙之間切換，以便進(jìn)行屬性的操作和觀察。

2.刷新視圖：在視圖區(qū)域?qū)?jié)點進(jìn)行調(diào)整，或者在屬性描述面板中修改屬性值之后，需要恢復(fù)到初始狀態(tài)時，可以點擊刷新視圖的按鈕，視圖就會恢復(fù)到初始狀態(tài)。

3.在新窗口中打開：可以在新窗口中打開風(fēng)格手冊。

視圖區(qū)域

視圖區(qū)域分為 2D 圖紙部分和 3D 場景部分。默認(rèn)顯示的是 2D 視圖，可以通過工具欄中的按鈕進(jìn)行切換。用戶可以直接對視圖區(qū)域的內(nèi)容進(jìn)行操作，在屬性描述->修改屬性值中修改的內(nèi)容也會實時地在視圖區(qū)域生效，這讓使用者能更加直觀地了解到設(shè)置屬性的不同屬性值產(chǎn)生的效果。

風(fēng)格手冊在 2D 視圖上內(nèi)置了很多動畫效果，可以鼠標(biāo)移入（onEnter）/ 點擊（onClick）進(jìn)行查看，大部分的動畫代碼都是可以在相應(yīng)屬性的事件處理彈窗中查看的。使用者可以打開彈窗參考其中的代碼，也可以對彈窗中的代碼進(jìn)行調(diào)試查看。

便捷分享

為了滿足用戶分享風(fēng)格手冊并希望能默認(rèn)選中指定節(jié)點的需求，風(fēng)格手冊增加了一個便捷的分享功能。通過該功能，用戶可以生成一個帶有節(jié)點選中信息的鏈接，將該鏈接分享給其他人。當(dāng)被分享者打開該鏈接時，風(fēng)格手冊會自動選中指定的節(jié)點。

右側(cè)屬性樹中選擇屬性之后，會在 Url 上加上三個參數(shù)：屬性 Style、視圖 View、選中節(jié)點類型 nodeType?？梢詫⒋随溄臃窒沓鋈?，打開的時候就會根據(jù) Url 參數(shù)切換視圖、選擇節(jié)點和過濾選中屬性。

新舊版本對比

布局變化

新舊版本的風(fēng)格手冊在布局上變化非常大，共有的部分有：屬性樹、屬性檢索、屬性描述的內(nèi)容。

新版本的風(fēng)格手冊著重于用戶的交互體驗，去掉了代碼編輯器區(qū)域，選擇內(nèi)置 2D 圖紙和 3D 場景，并且在布局上給視圖內(nèi)容提供了較大的區(qū)域。這樣的設(shè)計，讓使用者能夠更直觀地觀察和操作 2D 圖紙和 3D 場景，同時不需要使用者在代碼中創(chuàng)建節(jié)點和調(diào)整屬性。

舊版本的風(fēng)格手冊則側(cè)重于代碼編輯，更大的區(qū)域用于展示代碼編輯區(qū)域和代碼運(yùn)行區(qū)域的內(nèi)容。這樣的布局設(shè)計讓使用者更靈活地進(jìn)行編輯和運(yùn)行代碼。

操作使用

新版本在使用上更低代碼化。先在圖紙/場景上選擇節(jié)點，之后在右側(cè)屬性樹選擇要調(diào)整的屬性，接著在右下角屬性描述就可以直接修改屬性值的內(nèi)容。修改屬性值之后【圖紙/場景】上會立即生效。

舊版本的使用流程：選擇節(jié)點類型 -> 選擇屬性之后，在中間代碼編輯區(qū)域會顯示示例代碼，右側(cè)會顯示示例代碼運(yùn)行的效果。如果需要調(diào)整屬性樣式，需要在代碼編輯區(qū)域內(nèi)調(diào)整，調(diào)整之后點擊運(yùn)行可在右側(cè)查看效果。

屬性樹

1.新舊版本風(fēng)格手冊的屬性樹的結(jié)構(gòu)上有比較大的區(qū)別。

舊版本屬性樹分為兩個層級：節(jié)點類型，屬性。新版本在選中節(jié)點的時候，就對屬性樹進(jìn)行了過濾（在沒有選中節(jié)點的情況下，會顯示所有屬性），所以沒有節(jié)點類型的層級，并且對屬性進(jìn)行了分類，第一層級顯示的是屬性樹的分類，這樣在查找屬性上會更加便捷。

在新版本的風(fēng)格手冊中，對屬性樹進(jìn)行了更新和改進(jìn)，不僅顯示了屬性本身，還展示了屬性名、屬性值的數(shù)據(jù)類型和默認(rèn)值。這樣的設(shè)計使得屬性樹更加完整，提供了更豐富的屬性信息供用戶查看。

2.圖撲 HT 有很多類型的節(jié)點都是繼承于父類的，例如：ht.Text 是繼承于 ht.Node 的。舊版本風(fēng)格手冊的屬性樹只會顯示當(dāng)前節(jié)點類型上的屬性，并不會顯示父類的屬性。新版本上解決了這一問題，選擇節(jié)點之后右側(cè)屬性樹會顯示當(dāng)前這個節(jié)點所支持的所有屬性。

3.新版本的屬性樹為了在使用上更加方便，增加了雙擊復(fù)制屬性的功能。

4.舊版本的屬性搜索框支持屬性的模糊搜索，新版本的屬性搜索框在舊版本的基礎(chǔ)上增加了屬性名的模糊搜索。

屬性信息

舊版本的屬性描述在中間上面的位置，內(nèi)容有屬性名、默認(rèn)值和屬性描述。新版本的在此基礎(chǔ)上增加了屬性節(jié)點類型、修改屬性值、屬性復(fù)制的內(nèi)容，顯示的內(nèi)容更加全面，讓使用者能更加深入地了解到每個屬性。

新版本還增加了修改屬性值的功能，會根據(jù)不同類型的數(shù)據(jù)，顯示不同的編輯框。還設(shè)計了專門針對于函數(shù)類型（例如：onClick） 和數(shù)組類型（例如：shape.dash.pattern）的編輯彈窗。

圖撲軟件 HT for Web 可實現(xiàn)在 Web 瀏覽器中創(chuàng)建和展示高性能的交互式 3D 可視化解決方案，允許用戶創(chuàng)建、編輯、渲染和導(dǎo)出三維模型，適用于各種工業(yè)互聯(lián)網(wǎng)領(lǐng)域。HT 使用 HTML5 現(xiàn)代 Web 技術(shù)，無需安裝任何插件或附加軟件，即可在各種 Web 瀏覽器中運(yùn)行。并提供了豐富的功能和工具，包括模型加載、材質(zhì)編輯、動畫制作、光照渲染、碰撞檢測等，可以滿足復(fù)雜的 3D 可視化、數(shù)字孿生應(yīng)用需求。

審核編輯 黃宇