​

   ② sample_login.xix 파일을 X-SCADA Designer로 연다.

​

  ③ 아래는 본 샘플 페이지의 설명이다.

​

    ● page_1 선 및 면 색상 조절 영역

​

​

​

2. 색상 조절 영역 설명

​

   1) 면 색상 조절 영역

​

아래는 대상 객체의 면 색상을 변경할 수 있는 버튼들이다.

각 버튼을 클릭하면 클린한 버튼의 면 색상이 대상 객체의 면 색상에 반영된다.

​

​

​

   2) 선 색상 조절 영역 설명

​

아래는 대상 객체의 선 색상을 변경할 수 있는 버튼들이다.

각 버튼을 클릭하면 클릭한 버튼의 면 색상이 대상 객체의 선 색상에 반영된다.

​

​

4. 페이지 스크립트 – 선 및 면 색상 조절 영역

page_1의 페이지 스크립트는 아래와 같이 작성되어있다.

​

   ● 대상 객체의 선 및 면 색상 편집에 관련된 함수들

   대상 객체의 선 및 면 색상을 편집하는 기능을 한다.

​

​

​

   1) fillColor_OnClick 함수

​

    ① $XV("ellipse_1").fillStyle = event.target.fillStyle;

​

$XV("ellipse_1").fillStyle

​

​

event.target.fillStyle

​

ellipse_1이라는 이름을 가진 다각형 객체의 채움 색상을 이벤트를 전달한 객체인

위 사각형들 중 하나의 채움 색상(FillColor)으로 설정한다.

​

   ② $XV("triangle_1").fillStyle = event.target.fillStyle;

​

$XV("triangle_1").fillStyle

​

​

event.target.fillStyle

​

triangle_1이라는 이름을 가진 삼각형 객체의 채움 색상을 이벤트를 전달한 객체인

위 사각형들 중 하나의 채움 색상(FillColor)으로 설정한다.

​

​

​

   2) strokeColor_OnClick 함수

​

    ① $XV("ellipse_1").strokeStyle = event.target.fillStyle;

​

$XV("ellipse_1").strokeStyle

​

event.target.fillStyle

​

ellipse_1이라는 이름을 가진 다각형 객체의 선 색상을 이벤트를 전달한 객체인

위 사각형들 중 하나의 채움 색상(FillColor)으로 설정한다.

​

​

    ② $XV("triangle_1").strokeStyle = event.target.fillStyle;

​

$XV("triangle_1").strokeStyle

event.target.fillStyle

triangle_1이라는 이름을 가진 삼각형 객체의 선 색상을 이벤트를 전달한 객체인

위 사각형들 중 하나의 채움 색상(FillColor)으로 설정한다.

​

​

​

5. 선 및 면 색상 조절 영역 조작 예시

​

   1) Shape Color

Shape Color 텍스트 아래의 버튼을 클릭하면 버튼의 면 색상과 동일하게 대상 객체의 면 색상이 변한다.

​

​

   2) Line Color

Line Color 텍스트 아래의 버튼을 클릭하면 버튼의 면 색상(불투명도가 0이라 보이지 않는다. 디자이너 창에서 확인할 수 있다.)과 동일하게 대상 객체의 선 색상이 변한다.