속성
|
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
|
이 속성은 상태 기반 서식 적용 사용 확인란을 선택한 경우 표시됩니다. ThingWorx의 스타일 및 상태 정의에 대한 자세한 내용은 ThingWorx 도움말 센터에서 스타일 및 상태 정의를 참조하십시오.
|
||
상태 정의
|
stateFormat
|
boolean
|
이 속성은 상태 기반 서식 적용 사용 확인란을 선택한 경우 표시됩니다. ThingWorx의 스타일 및 상태 정의에 대한 자세한 내용은 ThingWorx 도움말 센터에서 스타일 및 상태 정의를 참조하십시오.
|
||
글꼴 패밀리
|
fontFamily
|
string
|
글꼴의 스타일입니다. 올바른 글꼴 패밀리를 Arial, Times New Roman, Century Gothic 등으로 입력합니다. 기본적으로 Arial로 설정됩니다.
|
||
글꼴 색
|
fontColor
|
string
|
글꼴의 색입니다. 색상 이름, Hex 값 또는 RGBA 값을 입력합니다. 예를 들어 글꼴 색을 빨간색으로 지정하려면 다음 중 한 가지를 입력합니다.
• red
• #FF0000
• rgba(255, 0, 0, 1)
기본적으로 검정색으로 설정됩니다.
|
||
글꼴 윤곽선 색
|
fontOutlineColor
|
string
|
글꼴 윤곽선의 색상입니다. 색상 이름, Hex 값 또는 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 } |