屬性
|
JavaScript
|
類型
|
描述
|
||
「文字」
|
text
|
string
|
小工具上顯示的文字。
|
||
高度
|
height
|
number
|
標籤的高度。預設值 (或該欄位空白時) 為 0.05。
|
||
寬度
|
width
|
number
|
標籤的寬度。
|
||
類別
|
class
|
string
|
指派至小工具的類別。
目前支援下列 CSS 屬性:
• font-family - 設定字型系列
• color - 設定字型/填充顏色
• --text-stroke-color - 類似 color,但設定字型描邊顏色
• --text-stroke-width - 設定描邊的寬度
• font-weight - 設定字型的重量,或可稱為粗細
• font-style
- 設定字型樣式,如正常、斜體、斜角等
• background-color - 設定標籤的填充顏色
• text-decoration - 支援底線
• border-color - 設定標籤周圍的邊界顏色
• border-radius - 圖像周圍的角落四周
• border-style - 設定標籤周圍的邊界樣式
• border-width - 設定圖像周圍的邊界描邊寬度
• border - 合併 border-color、border-style、border-width
• padding - 套用標籤文字外側的邊框距離
舉例來說,在「專案」窗格中的「樣式」之下,按一下「應用程式」並在編輯器中輸入下列:
.my-label {
font-family: Century Gothic; color: black; --text-stroke-color: yellow; --text-stroke-width: 3px; font-weight: normal; font-style: italic; background-color: grey }
然後在 3D 標籤的「類別」欄位中輸入:my-label。此為 > 中所新增的內容。
|
||
啟用以狀態為基礎的格式
|
enableStateFormatting
|
boolean
|
讓您能根據 ThingWorx 中所定義的狀態定義,設定該小工具的格式。
如果勾選了核取方塊,則下列屬性會顯示:
• 從屬欄位
• 狀態定義
舉例來說,如果某 3D 標籤具備 error 的「狀態定義」值,則標籤即轉為紅色。
|
||
從屬欄位
|
stateFormatValue
|
string
|
|||
狀態定義
|
stateFormat
|
boolean
|
|||
字型系列
|
fontFamily
|
string
|
字型的樣式。輸入有效的字型系列,如 Arial、Times New Roman、Century Gothic 等。預設字型為 Arial。
|
||
字型色彩
|
fontColor
|
string
|
字型的顏色。輸入顏色名稱、十六進位值或 RGBA 值。以紅色字型為例,您可輸入下列之一:
• red
• #FF0000
• rgba(255, 0, 0, 1)
預設值為黑色。
|
||
字型輪廓色彩
|
fontOutlineColor
|
string
|
字型輪廓的顏色。輸入顏色名稱、十六進位值或 RGBA 值。以紅色的字型輪廓為例,您可輸入下列之一:
• red
• #FF0000
• rgba(255, 0, 0, 1)
預設值為白色。
|
||
比例
|
scale
|
string
|
標籤的比例。
|
||
X 座標
|
x
|
number
|
X 軸上標籤的位置。
|
||
Y 座標
|
y
|
number
|
Y 軸上標籤的位置。
|
||
Z 座標
|
z
|
number
|
Z 軸上標籤的位置。
|
||
X 旋轉
|
rx
|
number
|
標籤繞 X 軸的旋轉角度。
|
||
Y 旋轉
|
ry
|
number
|
標籤繞 Y 軸的旋轉角度。
|
||
Z 旋轉
|
rz
|
number
|
標籤繞 Z 軸的旋轉角度。
|
||
告示牌
|
billboard
|
boolean
|
將小工具繞其中心旋轉,使其始終面向檢視者。且會對齊螢幕。
|
||
遮蔽
|
occlude
|
boolean
|
選取之後就看不見小工具的幾何結構,但同時也會在 3D 場景中隱藏小工具的其他增強功能。
因此,在應出現遮蔽小工具的位置,會顯示背景或相機饋入。如此可隱藏周遭的 3D 幾何結構,藉以強調某些增強功能。
|
||
最上層顯示
|
decal
|
boolean
|
無論其在 3D 場景中的幾何結構為何,將小工具配置覆蓋於場景中的任何其他增強功能之上。若設為「是」,則不會由其他增強功能所隱藏。一般會用以保持標籤或感應器可見。
|
||
透明度 (1 不透明 - 0 透明)
|
opacity
|
number
|
以數字 0 與 1 來控制物件的透明度。0 為完全透明;1 則為完全不透明。
|
||
樞紐
|
pivot
|
number
|
決定圖像的樞紐點:
• 左上
• 正上
• 右上
• 左中
• 正中
• 右中
• 左下
• 正下
• 右下
|
使用所必須的最少步驟
|
近似外觀
|
1. 拖曳「3D 標籤」小工具至畫布上。
2. (可選擇) 選取「詳細資訊」窗格中的「告示牌」核取方塊。
3. 輸入您要顯示在「文字」欄位中的文字,或繫結資料屬性至小工具的「文字」欄位。
|
|
請記住,最好為類別指定唯一名稱,從而不與其他類別或 OOTB 屬性相衝突。
|
CSS 範例
|
近似外觀
|
.ptc-3DLabel {
font-family: Century Gothic; color: black; --text-stroke-color: yellow; --text-stroke-width: 3px; /*csslint ignore*/ font-weight: normal; font-style: italic; background-color: grey } |