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

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

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

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

工具欄中有四個(gè)按鈕：

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

? 按鈕二：切換到 3D 場(chǎng)景。

? 按鈕三：刷新圖紙/場(chǎng)景。

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

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

屬性樹：屬性樹分為屬性搜索框和屬性樹兩個(gè)部分。

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

功能介紹

屬性樹

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

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

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

屬性面板

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

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

屬性描述

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

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

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

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

獲取屬性

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

工具欄

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

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

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

視圖區(qū)域

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

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

便捷分享

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

右側(cè)屬性樹中選擇屬性之后，會(huì)在 Url 上加上三個(gè)參數(shù)：屬性 Style、視圖 View、選中節(jié)點(diǎn)類型 nodeType。可以將此鏈接分享出去，打開的時(shí)候就會(huì)根據(jù) Url 參數(shù)切換視圖、選擇節(jié)點(diǎn)和過(guò)濾選中屬性。

新舊版本對(duì)比

布局變化

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

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

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

操作使用

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

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

屬性樹

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

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

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

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

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

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

屬性信息

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

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

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

審核編輯 黃宇