Graphics > GraphicsPath

개요

Graphics 컴포넌트에 경로를 표시할 때 사용되는 오브젝트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




- 스크립트로 동적생성하여 사용할 수 있으며 넥사크로 스튜디오에서 디자인 할 수 없습니다.

- GraphicsPath 오브젝트는 한 개의 경로만 표시할 수 있습니다.
   연속되지 않는 경로를 표시하려면 한 개 이상의 GraphicsPath 오브젝트를 사용하여야 합니다.

- GraphicsPath 에서 moveTo() 메소드는 한번만 적용됩니다.

속성

fillstyle

GraphicsPath 의 내부영역에 채워질 형식과 색을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsStock.fillstyle[= strFillStyle]

문법 설정

strFillStyle ::= <color> | <linear-gradient>

<color> ::= <NamedColor> | <NumericColor>

<linear-gradient> ::= 'linear-gradient(' [<angle> , ] <color-stop> ')'
<angle> ::= 'to left' | 'to right' | 'to top' | 'to bottom' | 'to left top' | 'to left bottom' | 'to right top' | 'to right bottom'
<color-stop> ::= <startcolor-stop> [',' <listcolor-stop>] ',' <endcolor-stop>
<startcolor-stop> ::= <color> [<percentage>'%']
<listcolor-stop> ::= <color> [<percentage>'%'] [',' <listcolor-stop>]*
<endcolor-stop> ::= <color> [<percentage>'%']
var objGObject = new nexacro.GraphicsPath();

objGObject.fillstyle = "red";
objGObject.fillstyle = "rgb(255,255,0)";
objGObject.fillstyle = "#ffffaa";
objGObject.fillstyle = "linear-gradient(red, yellow)";
objGObject.fillstyle = "linear-gradient(to right, red, yellow)";
objGObject.fillstyle = "linear-gradient(to right, red 50%, yellow)";
objGObject.fillstyle = "linear-gradient(red, yellow 25%, green 50%, blue 75%, indigo)";
objGObject.fillstyle = "linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)";

<color>

GraphicsPath 의 내부영역에 채워질 색을 색상이름 또는 색상코드로 설정합니다.

<NamedColor>

"red", "blue" 와 같이 미리 정의된 색상이름의 문자열로 내부영역의 색을 설정합니다.

<NumericColor>

"#"기호로 시작하는 6자리 HexaDecimal 색상코드값으로 내부영역의 색을 설정합니다. ("#FF00FF")


r,g,b 값을 인자로 하는 rgb() 메소드로 내부영역의 색을 설정합니다. ("rgb (255, 0, 255)")

<linear-gradient>

GraphicsPath 의 내부영역을 그라데이션으로 설정합니다.


"linear-gradient ( [방향, 색상값, 색상값, ...] )" 형식으로 그라데이션 방향과 색상을 설정할 수 있습니다.

<listcolor-stop> 에 한 개 이상의 색상값을 설정할 수 있습니다.

<angle>

그라데이션의 표시 방향을 설정합니다.


"to left" 설정 시 오른쪽에서 왼쪽 방향으로 그라데이션이 표시됩니다.

"to right" 설정 시 왼쪽에서 오른쪽 방향으로 그라데이션이 표시됩니다.

"to top" 설정 시 아래쪽에서 윗쪽 방향으로 그라데이션이 표시됩니다.

"to bottom" 설정 시 윗쪽에서 아래쪽 방향으로 그라데이션이 표시됩니다.

"to left top" 설정 시 오른쪽 아래 방향에서 왼쪽 윗 방향으로 그라데이션이 표시됩니다.

"to left bottom" 설정 시 오른쪽 윗 뱡향에서 왼쪽 아래 방향으로 그라데이션이 표시됩니다.

"to right top" 설정 시 왼쪽 아래 방향에서 오른쪽 윗 방향으로 그라데이션이 표시됩니다.

"to right bottom" 설정 시 왼쪽 윗 방향에서 오른쪽 아래 방향으로 그라데이션이 표시됩니다.


값을 설정하지 않으면 "to bottom" 으로 적용됩니다.

<color-stop>

그라데이션의 시작점, 끝점, 중간점의 색을 설정합니다.


<angle> 값에 따라 시작점과 끝점의 위치가 결정됩니다.

<angle> 값에 설정된 표시 방향이 시작되는 위치가 시작점으로 적용됩니다.


예를 들어 <angle> 값이 "to left" 이면 GraphicsPath 영역의 오른쪽 위치가 시작점이 되고, 왼쪽 위치가 끝점이 됩니다.

<angle> 값이 "to right" 이면 GraphicsPath 영역의 왼쪽 위치가 시작점이 되고, 오른쪽 위치가 끝점이 됩니다.


그라데이션 중간점의 색은 한개 이상 설정할 수 있으며 <percentage> 값 생략 시 균등하게 표시됩니다.

<startcolor-stop>

그라데이션의 시작점 색을 설정합니다.


<angle> 값에 설정된 방향으로 시작점 위치가 결정됩니다.

시작점의 <percentage> 값을 0 이상으로 설정 시 "시작점~설정값"까지 동일한 색상으로 표시됩니다.

<listcolor-stop>

그라데이션의 중간점 색을 설정합니다.


시작점과 끝점 사이에 적용될 중간색을 ","로 구분하여 여러개 설정할 수 있습니다.

<endcolor-stop>

그라데이션의 끝점 색을 설정합니다.


<angle> 값에 설정된 방향으로 끝점 위치가 결정됩니다.

끝점의 <percentage> 값을 100 이하로 설정 시 "설정값~끝점"까지 동일한 색상으로 표시됩니다.

<percentage>

<color> 에 해당하는 색이 적용될 위치를 비율값으로 설정합니다.


<angle> 값에 의해 결정된 시작점이 "0%" 로 적용됩니다.

<angle> 값에 의해 결정된 끝점이 "100%" 로 적용됩니다.


<percentage> 값은 0 에서 100 사이의 값을 설정해야 합니다.

<percentage> 값을 생략하면 균등한 위치에 <color> 값이 적용됩니다.

참고

- GraphicsPaths, GraphicsPath 는 닫힌 경로가 존재할 경우에만 내부영역을 처리합니다.

id

GraphicsPath 의 고유 식별자를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsPath.id

문법 설정

var objGraphicsPath = new nexacro.GraphicsPath();

this.Graphics00.addChild( "GraphicsPath00", objGraphicsPath );

id

GraphicsPath 를 구별할 수 있는 유일값을 설정합니다.

참고

-  addChild() 나 insertChild() 메소드를 사용하여 GraphicsPath 를 등록할때 오브젝트를 구별하기 위한 고유값입니다.

- 속성명이나 메소드명과 같은 예약어를 설정할 경우 오류가 발생할 수 있습니다.

miterlimit

strokejoin 속성값이 "miter" 일 때 특정 조건에서 "bevel" 로 변경적용될 비율값을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsStock.miterlimit[= nLimit]

문법 설정

var objGObject = new nexacro.GraphicsPath();

objGObject.miterlimit = 1;

nLimit

strokejoin 속성값이 "bevel" 로 변경될 최소 비율을 1 이상의 숫자로 설정합니다.


1 설정 시 strokejoin 속성이 항상 "bevel" 로 적용됩니다.

1 보다 큰 값을 설정하면 연관 요소들을 함께 판단하여 "bevel" 로 적용됩니다.

참고

- miterlimit 속성값을 설정하지 않으면 10 으로 적용됩니다.

- 일반적으로 miterlimit 속성값이 "miter_length / (stroke_width / 2)" 의 값보다 작으면 strokejoin 속성값이 "bevel" 로 적용됩니다.
   > miter_length : 두 선의 중심이 만나는 점에서 테두리가 만나 뾰족하게 돌출된 끝점까지의 거리
   > stroke_width : 선의 두께

opacity

GraphicsPath 영역의 투명도를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsStock.opacity[= nOpacity]

문법 설정

var objGraphicsPath = new nexacro.GraphicsPath() ;

objGraphicsPath.opacity = 0.5;
objGraphicsPath.opacity = "0.5";
objGraphicsPath.opacity = "50%";

nOpacity

0.0 ~ 1.0 사이의 값 또는 0.0% ~ 100.0% 사이의 값을 지정합니다.

0(또는 0%)을 설정하면 완전 투명, 1(또는 100%)을 설정하면 완전 불투명으로 처리됩니다.

1 이상의 값은 1로, 0 이하의 값은 0으로 처리됩니다. 마찬가지로 100% 이상의 값은 100%로, 0% 이하의 값은 0%로 처리됩니다.


Script는 숫자 또는 문자(숫자, 퍼센트 값)로 설정할 수 있습니다.

참고

- opacity 속성값을 설정하지 않으면 undefined 가 설정되고 1 로 동작합니다.

- GraphicsGroup 의 경우 하위 오브젝트에 투명도가 동일하게 적용됩니다.

- 부모와 자식 오브젝트에 각각 opacity 속성이 설정되어 있으면 자식 오브젝트의 투명도는 부모의 투명도에 추가적으로 적용됩니다.
   예를 들어 부모의 opacity 값이 0.5 이고 자식의 opacity 값이 0.4 이면 결과적으로 자식 오브젝트는 0.2 의 투명도가 적용됩니다.

parent

GraphicsPath 의 부모 오브젝트를 갖는 읽기전용 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☑ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsPath.parent

참고

- 일반적으로 addChild() 메소드를 사용하여 GraphicsPath 를 추가한 오브젝트가 parent 속성에 설정됩니다.

- GraphicsPath 가 어디에도 속해있지 않거나 부모 오브젝트로부터 제거되면 null 값을 갖습니다.

strokecap

GraphicsPath 에 표시되는 경로의 양 끝 모양을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☑ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsPath.strokecap[= enumCap]

문법 설정

enumCap ::= 'butt' | 'round' | 'square'
var objGPath = new nexacro.GraphicsPath();  

objGPath.strokepen = "10px solid red"; 
objGPath.strokejoin = "bevel"; 
objGPath.strokecap = "square";

"butt"

경로의 끝점을 벗어나지 않고 끝을 각지게 표시합니다.

"round"

경로의 끝점을 약간 벗어나고 끝을 둥글게 표시합니다.

"square"

경로의 끝점을 약간 벗어나고 끝을 각지게 표시합니다.

참고

- strokecap 속성값을 설정하지 않으면 "butt" 로 적용됩니다.

- strokecap 속성은 경로의 시작점과 끝점 모양을 결정하며 연결점의 모양은 strokejoin 속성으로 설정합니다.

- GraphicsPath 에 닫힌 경로가 설정되어 있을 경우 strokecap 속성은 적용되지 않습니다.

strokejoin

GraphicsPath 에 표시되는 경로의 연결점 모양을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☑ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsPath.strokejoin[= enumJoin]

문법 설정

enumJoin ::= 'miter' | 'round' | 'bevel'
var objGPath = new nexacro.GraphicsPath();  

objGPath.strokepen = "10px solid red"; 
objGPath.strokejoin = "bevel";

"miter"

경로가 만나는 중심점에서 테두리가 만나는 바깥점까지 뾰족하게 표시됩니다.


miterlimit 속성에 의해 "bevel" 로 자동 적용될 수 있습니다.

"round"

경로가 만나는 중심점에서 테두리가 만나는 바깥점까지 둥글게 표시됩니다.

"bevel"

경로가 만나는 중심점에서 테두리가 만나는 바깥점쪽이 칼로 잘라낸것 처럼 표시됩니다.

참고

- strokejoin 속성값을 설정하지 않으면 "miter" 로 적용됩니다.

- strokejoin 속성은 연결점의 모양을 결정하며 경로의 시작점과 끝점 모양은 strokecap 속성으로 설정합니다.

strokepen

GraphicsPath 에 표시되는 경로의 색과 형식을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsPath.strokepen[= strStrokePen]

문법 설정

strStrokePen ::= <line-width> <line-style> <color>

<line-width> ::= <nWidth> ['px']
<line-style> ::= 'solid' | 'dotted' | 'dashed'
<color> ::= <NamedColor> | <NumericColor>
var objGPath = new nexacro.GraphicsPath();  

objGPath.strokepen = "5px solid red"; 
objGPath.strokepen = "5 dotted #999999"; 
objGPath.strokepen = "5px dotted rgb(255,0,0)";

<nWidth>

경로의 두께를 pixel 단위의 숫자로 설정합니다.

<line-style>

경로의 스타일을 설정합니다.


"solid" 설정 시 경로가 실선으로 표시됩니다.

"dotted" 설정 시 경로가 점선으로 표시됩니다.

"dashed" 설정 시 경로가 긴 점선으로 표시됩니다.

<NamedColor>

경로의 색을 "red", "blue" 와 같이 미리 정의된 색상이름의 문자열로 설정합니다.

<NumericColor>

"#"기호로 시작하는 6자리 hexadecimal 색상코드값으로 경로의 색을 설정합니다. ("#FF00FF")


r,g,b 값을 인자로 하는 rgb() 메소드로 경로의 색을 설정합니다. (ex-"rgb (255, 0, 255)")

참고

- strokepen 속성값을 설정하지 않으면 GraphicsPath 에 경로가 표시되지 않습니다.

- strokepen 속성값은 오브젝트의 실제 영역을 기준으로 안쪽과 바깥쪽에 나누어 적용됩니다.


◆ Nexacro Runtime Environment 제약

- Nexacro Runtime Environment는 <line-style> 에 "solid" 값만 설정할 수 있습니다.

활용 예제

visible

GraphicsPath 가 화면에 표시될지 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsStock.visible[= bVisible]

문법 설정

bVisible ::= 'true' | 'false'
var objGraphicsPath = new nexacro.GraphicsPath();

objGraphicsPath.visible = false;

true

Graphics 컴포넌트의 redraw() 메소드 수행 시 GraphicsPath 를 표시합니다.

false

Graphics 컴포넌트의 redraw() 메소드 수행 시 GraphicsPath 를 표시하지 않습니다.

참고

- visible 속성값을 변경하면 화면에 즉시 반영되지 않고 Graphics 컴포넌트의 redraw() 메소드가 수행될 때 반영됩니다.

- GraphicsGroup 의 경우 visible 속성을 false 로 설정하면 하위 오브젝트도 함께 화면에 표시되지 않습니다.

- visible 속성에 의해 화면에 GraphicsPath 가 표시되지 않아도 오브젝트는 존재하기 때문에 스크립트로 제어가 가능합니다.

x

부모 오브젝트를 기준으로 GraphicsPath 가 표시될 x 축 좌표값을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsStock.x[= nX]

문법 설정

var objGraphicsPath = new nexacro.GraphicsPath( ) ;

objGraphicsPath .x = 200;
objGraphicsPath .y = 200;

nX

부모 오브젝트를 기준으로 GraphicsPath 가 표시될 x 축 좌표값을 pixel 단위의 숫자로 설정합니다.

참고

- x 속성값을 설정하지 않으면 0 으로 적용됩니다.

- x 속성은 컴포넌트의 left 속성에 해당하는 속성입니다.

- Transform 과 관련된 메소드(scale(), rotate() 등)가 수행되어 GraphicsPath 의 표시위치가 변경되어도 x 속성은 원본위치값을 유지합니다.

y

부모 오브젝트를 기준으로 GraphicsPath 가 표시될 y 축 좌표값을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

GraphicsStock.y[= nY]

문법 설정

var objGraphicsPath = new nexacro.GraphicsPath( ) ;

objGraphicsPath .x = 200;
objGraphicsPath .y = 200;

nY

부모 오브젝트를 기준으로 GraphicsPath 가 표시될 y 축 좌표값을 pixel 단위의 숫자로 설정합니다.

참고

- y 속성값을 설정하지 않으면 0 으로 적용됩니다.

- y 속성은 컴포넌트의 top 속성에 해당하는 속성입니다.

- Transform 과 관련된 메소드(scale(), rotate() 등)가 수행되어 GraphicsPath 의 표시위치가 변경되어도 y 속성은 원본위치값을 유지합니다.

메서드

arcTo

현재위치에서 인수로 전달된 위치까지 타원호 경로를 GraphicsPath 에 추가하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.arcTo(  nX, nY, nRadiusX, nRadiusY, nRotation, bClockwise, bLarge )

파라미터

Parameters

Type

Description

nX

Number

추가할 타원호 경로의 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.


설정값은 GrpahicsPath 의 x 속성값을 기준으로 처리됩니다.

nY

Number

추가할 타원호 경로의 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.


설정값은 GrpahicsPath 의 y 속성값을 기준으로 처리됩니다.

nRadiusX

Number

표시할 타원호의 가로 반지름을 pixel 단위의 숫자로 설정합니다.

nRadiusY

Number

표시할 타원호의 세로 반지름을 pixel 단위의 숫자로 설정합니다.

nRotation

Number

표시할 타원호의 x 축이 회전할 각도를 설정합니다.


180 도를 설정하면 0 도와 같은 모양으로 표시됩니다.

bClockwise

Boolean

타원호 경로의 시작점과 끝점을 기준으로 표시될 타원호를 설정합니다.


true 또는 1 설정 시 현재위치에서 nX, nY 까지의 직선을 기준으로 시계방향에 위치한 타원호를 표시합니다.

false 또는 0 설정 시 현재위치에서 nX, nY 까지의 직선을 기준으로 반시계방향에 위치한 타원호를 표시합니다.

bLarge

Boolean

타원호 경로의 시작점과 끝점을 기준으로 표시될 타원호를 설정합니다.


true 또는 1 설정 시 bClockwise 방향에 위치한 타원호 중 큰 타원호를 표시합니다.

false 또는 0 설정 시 bClockwise 방향에 위치한 타원호 중 작은 타원호를 표시합니다.

var objGPath = new nexacro.GraphicsPath();

objGPath.moveTo( 100,100 );
objGPath.arcTo( 200, 200, 100, 50, 0, true, false );

참고

- arcTo() 메소드 실행 후 현재위치가 nX, nY 로 변경됩니다.

- GraphicsPath 의 시작위치를 설정하지 않으면 경로가 정상적으로 표시되지 않을 수 있습니다.

- 타원호 경로는 아래와 같은 절차에 의해 결정됩니다.
  1. 타원호는 현재위치에서 시작하여 nX, nY 위치에서 끝납니다.
  2. 타원은 nRadiusX, nRadiusY 값을 가로,세로 반지름으로 갖습니다.
  3. 타원의 x 축은 nRotation 값만큼 회전합니다.
  4. 1~3번 조건에 의해 2개 또는 4개의 타원호 경로가 존재하게 됩니다.
  5. bClockwise 와 bLarge 값에 의해 4번의 타원호 중 1개의 타원호가 경로로 결정됩니다.

bezierCurveTo

현재위치에서 인수로 전달된 위치까지 cubic Bezier 곡선경로를 GraphicsPath 에 추가하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.bezierCurveTo( nCBeginX, nCBeginY, nCEndX, nCEndY, nX, nY )

파라미터

Parameters

Type

Description

nCBeginX

Number

cubic Bezier 곡선을 결정할 컨트롤 포인트의 시작점 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nCBeginY

Number

cubic Bezier 곡선을 결정할 컨트롤 포인트의 시작점 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nCEndX

Number

cubic Bezier 곡선을 결정할 컨트롤 포인트의 끝점 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nCEndY

Number

cubic Bezier 곡선을 결정할 컨트롤 포인트의 끝점 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nX

Number

추가할 cubic Bezier 곡선의 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nY

Number

추가할 cubic Bezier 곡선의 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.

var objGPath = new nexacro.GraphicsPath();

objGPath.moveTo(100,100);
objGPath.bezierCurveTo(400,200,400,300,300,300);

참고

- cubicCurveTo() 메소드 실행 후 현재위치가 nX, nY 로 변경됩니다.

- 인수로 전달된 좌표는 GrpahicsPath 의 x, y 속성값을 기준으로 처리됩니다.

- GraphicsPath 의 시작위치를 설정하지 않으면 경로가 정상적으로 표시되지 않을 수 있습니다.

clear

GraphicsPath 에 설정된 경로 데이터를 모두 삭제하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.clear()

closePath

GraphicsPath 에 설정된 경로의 끝점과 시작점을 직선으로 연결하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.closePath()

파라미터

var objGPath = new nexacro.GraphicsPath();

objGPath.setPathData("M200,40 L100,160 L300,160");
objGPath.closePath();

참고

- 끝점과 시작점을 연결하여 닫힌경로로 만드는 메소드입니다.

- GraphicPath 에 경로 데이터가 없을 경우 closePath() 메소드는 수행되지 않습니다.

destroy

GraphicsPath 를 메모리에서 완전히 삭제하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.destroy()

반환

Type

Description

Boolean

GraphicsPath 가 정상적으로 삭제되면 true 를 반환합니다.


GraphicsPath 가 정상적으로 삭제되지 않으면 false 를 반환합니다.

참고

- destroy() 메소드로 GraphicsPath 가 삭제되어도 화면에 표시된 오브젝트가 자동으로 사라지지 않습니다.
   Graphics 컴포넌트의 redraw() 메소드를 실행하여야 화면에 변경사항이 반영됩니다.

- GraphicsPath 가 하위 오브젝트를 가질 수 있는 경우 하위 오브젝트도 함께 삭제됩니다.

getBoundRect

GraphicsPath 가 표시되는 영역정보를 Graphics 컴포넌트 기준으로 바깥쪽 외곽선 영역을 포함하여 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getBoundRect( );

파라미터

var objGraphicsPath = this.Graphics00.getObjectByID("GraphicsPath00");
var objRect = objGraphicsPath.getBoundRect();

trace( "left : " + objRect.left );

반환

Type

Description

Object

Graphics 컴포넌트의 left, top 위치를 기준으로 계산된 영역정보가 Rect 오브젝트로 반환됩니다.


GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값을 설정한 경우 반환되는 영역정보에 바깥쪽 외곽선 영역이 포함됩니다.

strokepen 속성값을 설정하지 않았거나 GraphicsGroup, GraphicsImage, GraphicsText 오브젝트의 경우에는 외곽선 정보가 없으며 반환되는 영역정보에 외곽선 영역이 포함되지 않습니다.


  • Rect 오브젝트는 "left","top","right","bottom","width","height" 속성을 갖습니다.

참고

- getBoundRect() 메소드는 GraphicsPath 의 표시여부와 관계없이 논리적인 영역정보를 반환하는 메소드입니다.
   따라서 getBoundRect() 메소드의 반환값으로 GraphicsPath 의 표시여부를 판단할 수 없으므로 사용에 주의하여야 합니다.

- GraphicsPath 에서 Transform 관련 메소드(scale(), rotate() 등)를 실행하면 메소드가 적용된 영역정보를 반환합니다.

- 부모 오브젝트를 기준으로 계산된 영역정보를 얻으려면 getOffsetBoundRect() 메소드를 사용하여야 합니다.

- GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값은 오브젝트의 실제 영역을 기준으로 안쪽과 바깥쪽에 나누어 적용됩니다.

getNextSibling

GraphicsPath 와 부모가 동일한 Graphics 오브젝트 중 다음 순서의 오브젝트를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getNextSibling()

파라미터

var objGraphicsPath = this.Graphics00.getObjectByID("GraphicsPath00");
var objNext = objGraphicsPath.getNextSibling();

trace( objNext.toString() );

반환

Type

Description

Object

부모가 동일한 다음 순서의 Graphics 오브젝트를 반환합니다.


다음 순서의 Graphics 오브젝트가 없을 경우 null 을 반환합니다.

참고

- addChild() 메소드로 추가된 순서대로 Graphics 오브젝트가 저장됩니다.

- 부모가 다른 Graphics 오브젝트는 반환되지 않습니다.

getOffsetBoundRect

GraphicsPath 가 표시되는 영역정보를 Graphics 부모 오브젝트 기준으로 바깥쪽 외곽선 영역을 포함하여 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getOffsetBoundRect( );

파라미터

var objGroup = this.Graphics00.getObjectByID("GraphicsGroup00");
var objGraphicsPath = objGroup.getObjectByID("GraphicsPath00");
var objRect = objGraphicsPath.getOffsetBoundRect();

trace( "left : " + objRect.left );

반환

Type

Description

Object

부모 오브젝트의 left, top 위치를 기준으로 계산된 영역정보가 Rect 오브젝트로 반환됩니다.


GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값을 설정한 경우 반환되는 영역정보에 바깥쪽 외곽선 영역이 포함됩니다.

strokepen 속성값을 설정하지 않았거나 GraphicsGroup, GraphicsImage, GraphicsText 오브젝트의 경우에는 외곽선 정보가 없으며 반환되는 영역정보에 외곽선 영역이 포함되지 않습니다.


  • Rect 오브젝트는 "left","top","right","bottom","width","height" 속성을 갖습니다.

참고

- getOffsetBoundRect() 메소드는 GraphicsPath 의 표시여부와 관계없이 논리적인 영역정보를 반환하는 메소드입니다.
   따라서 getOffsetBoundRect() 메소드의 반환값으로 GraphicsPath 의 표시여부를 판단할 수 없으므로 사용에 주의하여야 합니다.

- GraphicsPath 에서 Transform 관련 메소드(scale(), rotate() 등)를 실행하면 메소드가 적용된 영역정보를 반환합니다.

- Graphics 컴포넌트를 기준으로 계산된 영역정보를 얻으려면 getBoundRect() 메소드를 사용하여야 합니다.

- GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값은 오브젝트의 실제 영역을 기준으로 안쪽과 바깥쪽에 나누어 적용됩니다.

getOffsetRect

GraphicsPath 가 표시되는 영역정보를 Graphics 부모 오브젝트 기준으로 바깥쪽 외곽선 영역을 포함하여 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getOffsetBoundRect( );

파라미터

var objGroup = this.Graphics00.getObjectByID("GraphicsGroup00");
var objGraphicsPath = objGroup.getObjectByID("GraphicsPath00");
var objRect = objGraphicsPath.getOffsetBoundRect();

trace( "left : " + objRect.left );

반환

Type

Description

Object

부모 오브젝트의 left, top 위치를 기준으로 계산된 영역정보가 Rect 오브젝트로 반환됩니다.


GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값을 설정한 경우 반환되는 영역정보에 바깥쪽 외곽선 영역이 포함됩니다.

strokepen 속성값을 설정하지 않았거나 GraphicsGroup, GraphicsImage, GraphicsText 오브젝트의 경우에는 외곽선 정보가 없으며 반환되는 영역정보에 외곽선 영역이 포함되지 않습니다.


  • Rect 오브젝트는 "left","top","right","bottom","width","height" 속성을 갖습니다.

참고

- getOffsetBoundRect() 메소드는 GraphicsPath 의 표시여부와 관계없이 논리적인 영역정보를 반환하는 메소드입니다.
   따라서 getOffsetBoundRect() 메소드의 반환값으로 GraphicsPath 의 표시여부를 판단할 수 없으므로 사용에 주의하여야 합니다.

- GraphicsPath 에서 Transform 관련 메소드(scale(), rotate() 등)를 실행하면 메소드가 적용된 영역정보를 반환합니다.

- Graphics 컴포넌트를 기준으로 계산된 영역정보를 얻으려면 getBoundRect() 메소드를 사용하여야 합니다.

- GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값은 오브젝트의 실제 영역을 기준으로 안쪽과 바깥쪽에 나누어 적용됩니다.

getOffsetRegion

GraphicsPath 가 표시되는 영역정보를 부모 오브젝트 컴포넌트 기준으로 안쪽 외곽선 영역을 제외하고 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getOffsetRegion( );

파라미터

var objGroup = this.Graphics00.getObjectByID("GraphicsGroup00");
var objGraphicsPath = objGroup.getObjectByID("GraphicsPath00");
var objRect = objGraphicsPath.getOffsetRegion();

trace( "left : " + objRect.left );

반환

Type

Description

Object

부모 오브젝트의 left, top 위치를 기준으로 계산된 영역정보가 Rect 오브젝트로 반환됩니다.


GraphicsPath 오브젝트의 strokepen 속성값을 설정했더라도 반환되는 영역정보에는 안쪽 외곽선 영역이 제외됩니다.


  • Rect 오브젝트는 "left","top","right","bottom","width","height" 속성을 갖습니다.

참고

- getOffsetRegion() 메소드는 GraphicsPath 의 표시여부와 관계없이 논리적인 영역정보를 반환하는 메소드입니다.
   따라서 getOffsetRegion() 메소드의 반환값으로 GraphicsPath 의 표시여부를 판단할 수 없으므로 사용에 주의하여야 합니다.

- GraphicsPath 에서 Transform 관련 메소드(scale(), rotate() 등)를 실행하면 메소드가 적용된 영역정보를 반환합니다.

- Graphics 컴포넌트를 기준으로 계산된 영역정보를 얻으려면 getRegion() 메소드를 사용하여야 합니다.

- GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값은 오브젝트의 실제 영역을 기준으로 안쪽과 바깥쪽에 나누어 적용됩니다.

getPathData

GraphicsPath 에 설정된 경로 데이터를 SVG 형식의 문자열로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getPathData()

반환

Type

Description

String

경로 데이터를 SVG 형식의 문자열로 반환합니다.

참고

- 경로 데이터는 공백문자로 구분됩니다.

getPreviousSibling

GraphicsPath 와 부모가 동일한 Graphics 오브젝트 중 이전 순서의 오브젝트를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getPreviousSibling()

파라미터

var objGraphicsPath = this.Graphics00.getObjectByID("GraphicsPath00");
var objPrev = objGraphicsPath.getPreviousSibling();

trace( objPrev.toString() );

반환

Type

Description

Object

부모가 동일한 이전 순서의 Graphics 오브젝트를 반환합니다.


이전 순서의 Graphics 오브젝트가 없을 경우 null 을 반환합니다.

참고

- addChild() 메소드로 추가된 순서대로 Graphics 오브젝트가 저장됩니다.

- 부모가 다른 Graphics 오브젝트는 반환되지 않습니다.

getRect

GraphicsPath 의 영역정보를 Graphics 컴포넌트 기준으로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getRect( );

파라미터

var objGraphicsPath = this.Graphics00.getObjectByID("GraphicsPath00");
var objRect = objGraphicsPath.getRect();

trace( "left : " + objRect.left );

반환

Type

Description

Object

Graphics 컴포넌트의 left, top 위치를 기준으로 계산된 영역정보가 Rect 오브젝트로 반환됩니다.


GraphicsPath 오브젝트의 strokepen 속성값을 설정했더라도 외곽선 영역과 관계없이 GraphicsPath 오브젝트의 실제 영역이 반환됩니다.


  • Rect 오브젝트는 "left","top","right","bottom","width","height" 속성을 갖습니다.

참고

- getRect() 메소드는 GraphicsPath 의 표시여부와 관계없이 논리적인 영역정보를 반환하는 메소드입니다.
   따라서 getRect() 메소드의 반환값으로 GraphicsPath 의 표시여부를 판단할 수 없으므로 사용에 주의하여야 합니다.

- GraphicsPath 에서 Transform 관련 메소드(scale(), rotate() 등)를 실행하면 메소드가 적용된 영역정보를 반환합니다.

- 부모 오브젝트를 기준으로 계산된 영역정보를 얻으려면 getOffsetRect() 메소드를 사용하여야 합니다.

- GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값은 오브젝트의 실제 영역을 기준으로 안쪽과 바깥쪽에 나누어 적용됩니다.

getRegion

GraphicsPath 가 표시되는 영역정보를 Graphics 컴포넌트 기준으로 안쪽 외곽선 영역을 제외하고 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.getRegion( );

파라미터

var objGraphicsPath = this.Graphics00.getObjectByID("GraphicsPath00");
var objRect = objGraphicsPath.getRegion();

trace( "left : " + objRect.left );

반환

Type

Description

Object

Graphics 컴포넌트의 left, top 위치를 기준으로 계산된 영역정보가 Rect 오브젝트로 반환됩니다.


GraphicsPath 오브젝트의 strokepen 속성값을 설정한 경우 반환되는 영역정보에는 안쪽 외곽선 영역이 제외됩니다.


  • Rect 오브젝트는 "left","top","right","bottom","width","height" 속성을 갖습니다.

참고

- getRegion() 메소드는 GraphicsPath 의 표시여부와 관계없이 논리적인 영역정보를 반환하는 메소드입니다.
   따라서 getRegion() 메소드의 반환값으로 GraphicsPath 의 표시여부를 판단할 수 없으므로 사용에 주의하여야 합니다.

- GraphicsPath 에서 Transform 관련 메소드(scale(), rotate() 등)를 실행하면 메소드가 적용된 영역정보를 반환합니다.

- 부모 오브젝트를 기준으로 계산된 영역정보를 얻으려면 getOffsetRegion() 메소드를 사용하여야 합니다.

- GraphicsEllipse, GraphicsLine, GraphicsPath, GraphicsPaths, GraphicsRect 오브젝트의 strokepen 속성값은 오브젝트의 실제 영역을 기준으로 안쪽과 바깥쪽에 나누어 적용됩니다.

hasSegments

GraphicsPath 에 경로 데이터가 설정되어 있는지 여부를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.hasSegments()

파라미터

var objGPath = new nexacro.GraphicsPath();

objGPath.setPathData("M 15,0 L 0,30 L 30,30Z");
var bResult = objGPath.hasSegments() ;

반환

Type

Description

Boolean

GraphicsPath 에 경로 데이터가 설정되어 있으면 true 를 반환합니다.


GraphicsPath 에 경로 데이터가 설정되어 있지 않으면 false 를 반환합니다.

참고

- moveTo(), lineTo(), arcTo() 와 같은 메소드를 사용하여 경로를 추가합니다.

isHitTest

인수로 전달된 좌표위치가 GraphicsPath 영역에 포함되는지 여부를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.isHitTest( nX, nY )

파라미터

Parameters

Type

Description

nX

Number

확인할 위치의 x 좌표값을 pixel 단위의 숫자로 설정합니다.


설정값은 Graphics 컴포넌트를 기준으로 처리됩니다.

nY

Number

확인할 위치의 y 좌표값을 pixel 단위의 숫자로 설정합니다.


설정값은 Graphics 컴포넌트를 기준으로 처리됩니다.

var objGraphicsPath = this.Graphics00.getObjectByID("GraphicsPath00");

var bResult = objGraphicsPath.isHitTest( 100, 100 );

반환

Type

Description

Boolean

인수로 전달된 좌표위치가 GraphicsPath 영역에 포함되면 true 를 반환합니다.


인수로 전달된 좌표위치가 GraphicsPath 영역에 포함되지 않으면 false 를 반환합니다.

참고

- 일반적으로 GraphicsPath 영역은 getRect() 메소드로 반환되는 영역과 일치합니다.
   getRect() 메소드의 반환값은 GraphicsPath 의 상태에 따라 변경될 수 있으므로 isHitTest() 사용에 주의하여야 합니다.

- 인수로 전달된 nX, nY 좌표는 Graphics 컴포넌트의 left, top 을 기준으로 처리됩니다.

isPointInPath

특정 좌표위치가 GraphicsPath 영역에 포함되는지 여부를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.isPointInPath( objPoint [, nTolerance] )

파라미터

Parameters

Type

Description

objPoint

Object

GraphicsPath 영역에 포함되는지 확인할 좌표값을 nexacro.Point 오브젝트로 설정합니다.


설정한 좌표값은 Graphics 컴포넌트를 기준으로 처리됩니다.

nTolerance

Number

objPoint 위치가 GraphicsPath 영역에 포함되었다고 판단할 최대거리를 숫자로 설정합니다.


objPoint 위치와 GraphicsPath 영역의 거리가 설정값보다 작으면 포함되었다고 판단합니다.

반환

Type

Description

Boolean

objPoint 좌표위치가 GraphicsPath 영역에 포함되면 true 를 반환합니다.


objPoint 좌표위치가 GraphicsPath 영역에 포함되지 않으면 false 를 반환합니다.

참고

- GraphicsPath 의 영역은 경로를 모두 포함하는 최소 크기의 사각형입니다.

lineTo

현재위치에서 인수로 전달된 위치까지 직선 경로를 GraphicsPath 에 추가하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.lineTo( nX, nY )

파라미터

Parameters

Type

Description

nX

Number

추가할 직선경로의 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.


설정값은 GrpahicsPath 의 x 속성값을 기준으로 처리됩니다.

nY

Number

추가할 직선경로의 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.


설정값은 GrpahicsPath 의 y 속성값을 기준으로 처리됩니다.

var objGPath = new nexacro.GraphicsPath();

objGPath.moveTo( 0,0 );
objGPath.lineTo( 300,300 );

참고

- lineTo() 메소드 실행 후 현재위치가 nX, nY 로 변경됩니다.

- GraphicsPath 의 시작위치를 설정하지 않으면 경로가 정상적으로 표시되지 않을 수 있습니다.

moveBy

GraphicsPath 의 시작위치를 이동하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.moveBy( nX, nY )

파라미터

Parameters

Type

Description

nX

Number

현재 시작위치에서 x 좌표가 이동할 거리를 pixel 단위의 숫자로 설정합니다.


설정값은 현재 시작위치의 x 좌표값을 기준으로 처리됩니다.

nY

Number

현재 시작위치에서 y 좌표가 이동할 거리를 pixel 단위의 숫자로 설정합니다.


설정값은 현재 시작위치의 y 좌표값을 기준으로 처리됩니다.

var objGPath = new nexacro.GraphicsPath();

objGPath.moveBy( 300,300 );

참고

- GraphicsPath 의 시작위치를 설정하지 않으면 경로가 정상적으로 표시되지 않을 수 있습니다.

- moveBy() 메소드는 경로의 시작점을 설정할 때 외에는 무시됩니다.

moveTo

GraphicsPath 의 시작위치를 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.moveTo( nX, nY )

파라미터

Parameters

Type

Description

nX

Number

GraphicsPath 의 시작위치 중 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.


설정값은 GrpahicsPath 의 x 속성값을 기준으로 처리됩니다.

nY

Number

GraphicsPath 의 시작위치 중 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.


설정값은 GrpahicsPath 의 y 속성값을 기준으로 처리됩니다.

var objGPath = new nexacro.GraphicsPath();

objGPath.moveTo( 300,300 );

참고

- GraphicsPath 의 시작위치를 설정하지 않으면 경로가 정상적으로 표시되지 않을 수 있습니다.

- moveTo() 메소드는 경로의 시작점을 설정할 때 외에는 무시됩니다.

quadraticCurveTo

현재위치에서 인수로 전달된 위치까지 quadratic Bezier 곡선 경로를 GraphicsPath 에 추가하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.quadraticCurveTo( nControlX, nControlY, nX, nY )

파라미터

Parameters

Type

Description

nControlX

Number

quadratic Bezier 곡선을 결정할 컨트롤 포인트의 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nControlY

Number

quadratic Bezier 곡선을 결정할 컨트롤 포인트의 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nX

Number

추가할 quadratic Bezier 곡선의 x 좌표 위치를 pixel 단위의 숫자로 설정합니다.

nY

Number

추가할 quadratic Bezier 곡선의 y 좌표 위치를 pixel 단위의 숫자로 설정합니다.

var objGPath = new nexacro.GraphicsPath();

objGPath.moveTo( 100,100 );
objGPath.quadraticCurveTo( 0, 200, 200, 200 );

참고

- quadraticCurveTo() 메소드 실행 후 현재위치가 nX, nY 로 변경됩니다.

- 인수로 전달된 좌표는 GrpahicsPath 의 x, y 속성값을 기준으로 처리됩니다.

- GraphicsPath 의 시작위치를 설정하지 않으면 경로가 정상적으로 표시되지 않을 수 있습니다.

rotate

GraphicsPath 에 회전효과를 적용하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.rotate( nAngle [, nCenterX, nCenterY] );

파라미터

Parameters

Type

Description

nAngle

Number

현재 모습에서 회전될 각도를 숫자로 설정합니다.


양수로 설정 시 시계방향으로 회전합니다.

음수로 설정 시 반시계방향으로 회전합니다.

nCenterX

Number

회전의 중심이 되는 x 좌표를 숫자로 설정합니다.

설정값은 부모 오브젝트를 기준으로 처리됩니다.


값 생략 시 0 값이 적용됩니다.

nCenterY

Number

회전의 중심이 되는 y 좌표를 숫자로 설정합니다.

설정값은 부모 오브젝트를 기준으로 처리됩니다.


값 생략 시 0 값이 적용됩니다.

참고

- rotate() 메소드 수행 시 Position 과 관련된 속성(x, y 등)은 변경되지 않습니다.
   영역정보를 반환하는 getRect() 와 같은 메소드는 rotate() 메소드가 적용된 영역정보를 반환합니다.

- rotate() 메소드는 GraphicsPath 가 표시되는 위치를 기준으로 수행됩니다.
   따라서 rotate() 메소드를 여러번 수행하면 회전 효과가 누적되어 적용됩니다.

- GraphicsGroup 의 경우 하위 오브젝트에 회전효과가 동일하게 적용됩니다.

- GraphicsPath 에 부모 오브젝트가 설정되어 있어야 rotate() 메소드가 정상적으로 수행됩니다.
   즉, rotate() 메소드 수행 전에 addChild() 메소드로 GraphicsPath 를 등록하여야 합니다.

scale

GraphicsPath 에 확대/축소 효과를 적용하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.scale( nScaleX, nScaleY [, nCenterX, nCenterY] );

파라미터

Parameters

Type

Description

nScaleX

Number

현재 크기에서 확대/축소 될 가로 배율을 실수로 설정합니다.


1.0 보다 큰값을 설정하면 GraphicsPath 가 확대됩니다.

1.0 보다 작은값을 설정하면 GraphicsPath 가 축소됩니다.

nScaleY

Number

현재 크기에서 확대/축소 될 세로 배율을 실수로 설정합니다.


1.0 보다 큰값을 설정하면 GraphicsPath 가 확대됩니다.

1.0 보다 작은값을 설정하면 GraphicsPath 가 축소됩니다.

nCenterX

Number

확대/축소의 중심이 되는 x 좌표를 숫자로 설정합니다.

설정값은 부모 오브젝트를 기준으로 처리됩니다.


값 생략 시 0 값이 적용됩니다.

nCenterY

Number

확대/축소의 중심이 되는 y 좌표를 숫자로 설정합니다.

설정값은 부모 오브젝트를 기준으로 처리됩니다.


값 생략 시 0 값이 적용됩니다.

참고

- scale() 메소드 수행 시 위치와 관련된 속성(x, y 등)은 변경되지 않습니다.
   영역정보를 반환하는 getRect() 와 같은 메소드는 scale() 메소드가 적용된 영역정보를 반환합니다.

- scale() 메소드는 GraphicsPath 가 표시되는 크기를 기준으로 수행됩니다.
   따라서 scale() 메소드를 여러번 수행하면 확대/축소 효과가 누적되어 적용됩니다.

- GraphicsGroup 의 경우 하위 오브젝트에 확대/축소 효과가 동일하게 적용됩니다.

- GraphicsPath 에 부모 오브젝트가 설정되어 있어야 scale() 메소드가 정상적으로 수행됩니다.
   즉, scale() 메소드 수행 전에 addChild() 메소드로 GraphicsPath 를 등록하여야 합니다.

setClipRect

GraphicsPath 의 일부 영역만 표시되게 Clipping 할 영역의 좌표를 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.setClipRect( nX, nY, nWidth, nHeight );

파라미터

Parameters

Type

Description

nX

Number

Clipping 할 영역의 x 좌표를 숫자로 설정합니다.


설정값은 GraphicsPath 의 x 속성값 위치를 0 으로 가정하고 처리됩니다.

nY

Number

Clipping 할 영역의 y 좌표를 숫자로 설정합니다.


설정값은 GraphicsPath 의 y 속성값 위치를 0 으로 가정하고 처리됩니다.

nWidth

Number

Clipping 할 영역의 너비를 숫자로 설정합니다.


설정값은 nX 파라미터값을 기준으로 처리됩니다.

nHeight

Number

Clipping 할 영역의 높이를 숫자로 설정합니다.


설정값은 nY 파라미터값을 기준으로 처리됩니다.

참고

- GraphicsPath 영역에서 Clipping 영역으로 설정된 부분만 화면에 표시됩니다.
   Transform 과 관련된 메소드(scale(), rotate() 등)가 적용된 경우 GraphicsPath 의 원본영역을 기준으로 Clipping 됩니다.

- "setClipRect( null );" 형태로 파라미터에 null 설정 시 Clipping 영역 설정이 취소됩니다.

- Clipping 이 적용되어도 GraphicsPath 의 Position 관련 속성값은 변경되지 않습니다.

setPathData

GraphicsPath 에 SVG 형식으로 경로 데이터를 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.setPathData( strPath )

파라미터

Parameters

Type

Description

strPath

String

경로 데이터를 SVG 형식의 문자열로 설정합니다.


설정할 수 있는 SVG 형식입니다.

- "M x,y" : 시작위치를 x,y 좌표위치로 설정합니다.

- "L x,y" : 현재 위치에서 x,y 좌표위치까지 선을 표시합니다.

- "H x" : 현재 위치에서 x 좌표위치까지 가로선을 표시합니다.

- "V y" : 현재 위치에서 y 좌표위치까지 세로선을 표시합니다.

- "Z" : 현재 위치에서 시작점까지 선을 표시합니다.

- "C x1,y1 x2,y2 x,y" : 현재 위치에서 x,y 좌표위치까지 cubic Bezier 곡선을 표시합니다.

- "S x2,y2 x,y" : 현재 위치에서 x,y 좌표위치까지 cubic Bezier 곡선을 표시합니다.

- "Q x1,y1 x,y" : 현재 위치에서 x,y 좌표위치까지 quadratic Bezier 곡선을 표시합니다.

- "T x,y" : 현재 위치에서 x,y 좌표위치까지 quadratic Bezier 곡선을 표시합니다.

- "A rx,ry rotation large clockwise x,y" : 현재 위치에서 x,y 좌표위치까지 타원호를 표시합니다.

var objGPath = new nexacro.GraphicsPath();

objGPath.setPathData("M50,50 H150 V150 H50 Z"); 
objGPath.setPathData("M50,50 L150,50 L150,150 L50,150 L50,50");
objGPath.setPathData("M 10 80 C 40,10 65,10 95,80 S 150,150 180,80");

참고

- "M" 명령어는 경로의 시작점을 설정할 때 외에는 무시됩니다.
   경로를 그리기 시작한 후 입력되는 "M" 명령어는 처리되지 않습니다.

- 경로 데이터는 공백문자로 구분됩니다.

setTransform

GraphicsPath 의 원본 위치를 기준으로 Transform 관련 효과를 연속적으로 적용하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.setTransform( strMethod );

파라미터

Parameters

Type

Description

strMethod

String

GraphicsPath 에 적용할 Transform 관련 메소드를 "," 로 구분하여 설정합니다.

translate(), scale(), rotate(), shear() 메소드를 사용할 수 있습니다.

null 값 설정 시 transform 효과가 지정되지 않은 상태로 초기화합니다.

var objGraphicsPath = new nexacro.GraphicsPath();
this.Graphics00.addChild("GraphicsPath00", objGraphicsPath);

objGraphicsPath.setTransform( "translate(50, 50),rotate(20)" );

objGraphicsPath.setTransform(null);

참고

- setTransform() 메소드 수행 시 위치와 관련된 속성(x, y 등)은 변경되지 않습니다.
   영역정보를 반환하는 getRect() 와 같은 메소드는 setTransform() 메소드가 적용된 영역정보를 반환합니다.

- setTransform() 메소드는 GraphicsPath 의 원본 위치를 기준으로 수행됩니다.
   따라서 setTransform() 메소드를 여러번 수행해도 효과가 누적되어 적용되지 않습니다.

- GraphicsGroup 의 경우 하위 오브젝트에 효과가 동일하게 적용됩니다.

- GraphicsPath 에 부모 오브젝트가 설정되어 있어야 setTransform() 메소드가 정상적으로 수행됩니다.
   즉, setTransform() 메소드 수행 전에 addChild() 메소드로 GraphicsPath 를 등록하여야 합니다.

- 메소드 실행 시 strMethod 파라미터 값을 null로 설정하면 transform 효과가 지정되지 않은 상태로 초기화합니다.
  setTransform 메소드로 설정한 transform 효과 뿐 아니라 translate, scale, rotate, shear 메소드로 개별 설정한 상태도 초기화합니다.

shear

GraphicsPath 에 비틀기 효과를 적용하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.shear( nRadianX, nRadianY [, nCenterX, nCenterY] );

파라미터

Parameters

Type

Description

nRadianX

Number

현재 모습에서 x 축 기준으로 비틀어질 각도를 라디안값으로 설정합니다.

nRadianY

Number

현재 모습에서 y 축 기준으로 비틀어질 각도를 라디안값으로 설정합니다.

nCenterX

Number

비틀기의 중심이 되는 x 좌표를 숫자로 설정합니다.

설정값은 부모 오브젝트를 기준으로 처리됩니다.


값 생략 시 0 값이 적용됩니다.

nCenterY

Number

비틀기의 중심이 되는 y 좌표를 숫자로 설정합니다.

설정값은 부모 오브젝트를 기준으로 처리됩니다.


값 생략 시 0 값이 적용됩니다.

참고

- shear() 메소드 수행 시 위치와 관련된 속성(x, y 등)은 변경되지 않습니다.
   영역정보를 반환하는 getRect() 와 같은 메소드는 shear() 메소드가 적용된 영역정보를 반환합니다.

- shear() 메소드는 GraphicsPath 가 표시되는 모습을 기준으로 수행됩니다.
   따라서 shear() 메소드를 여러번 수행하면 비틀기 효과가 누적되어 적용됩니다.

- GraphicsGroup 의 경우 하위 오브젝트에 비틀기 효과가 동일하게 적용됩니다.

- GraphicsPath 에 부모 오브젝트가 설정되어 있어야 shear() 메소드가 정상적으로 수행됩니다.
   즉, shear() 메소드 수행 전에 addChild() 메소드로 GraphicsPath 를 등록하여야 합니다.

toString

GraphicsPath 의 타입을 문자열로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.toString();

반환

Type

Description

String

일반적으로 "[object GraphicsPath]" 형태의 문자열을 반환합니다.

transform

GraphicsPath 에 Transform 관련 효과를 적용하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.transform( nScaleX, nShearX, nShearY, nScaleY, nTransX, nTransY );

파라미터

Parameters

Type

Description

nScaleX

Number

현재 크기에서 확대/축소 될 가로 배율을 실수로 설정합니다.


1.0 보다 큰값을 설정하면 GraphicsPath 가 확대됩니다.

1.0 보다 작은값을 설정하면 GraphicsPath 가 축소됩니다.

nShearX

Number

현재 모습에서 x 축 기준으로 비틀어질 각도를 라디안값으로 설정합니다.

nShearY

Number

현재 모습에서 y 축 기준으로 비틀어질 각도를 라디안값으로 설정합니다.

nScaleY

Number

현재 크기에서 확대/축소 될 세로 배율을 실수로 설정합니다.


1.0 보다 큰값을 설정하면 GraphicsPath 가 확대됩니다.

1.0 보다 작은값을 설정하면 GraphicsPath 가 축소됩니다.

nTransX

Number

현재 위치에서 x 축 방향으로 이동 할 거리를 pixel 단위의 숫자로 설정합니다.

nTransY

Number

현재 위치에서 y 축 방향으로 이동 할 거리를 pixel 단위의 숫자로 설정합니다.

var objGraphicsPath = new nexacro.GraphicsPath();

objGraphicsPath.transform( 1.5, 0, 0, 1.5, 0, 0 );    // scale(1.5,1.5) 와 동일
objGraphicsPath.transform( 1, 0, 0, 1, 50, 50 );      // translate(50, 50) 와 동일

참고

- transform() 메소드 수행 시 위치와 관련된 속성(x, y 등)은 변경되지 않습니다.
   영역정보를 반환하는 getRect() 와 같은 메소드는 transform() 메소드가 적용된 영역정보를 반환합니다.

- transform() 메소드는 GraphicsPath 가 표시되는 모습을 기준으로 수행됩니다.
   따라서 transform() 메소드를 여러번 수행하면 효과가 누적되어 적용됩니다.

- GraphicsGroup 의 경우 하위 오브젝트에 효과가 동일하게 적용됩니다.

- GraphicsPath 에 부모 오브젝트가 설정되어 있어야 transform() 메소드가 정상적으로 수행됩니다.
   즉, transform() 메소드 수행 전에 addChild() 메소드로 GraphicsPath 를 등록하여야 합니다.

translate

GraphicsPath 의 위치가 이동되는 효과를 적용하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

GraphicsPath.translate( nTransX, nTransY );

파라미터

Parameters

Type

Description

nTransX

Number

현재 위치에서 x 축 방향으로 이동 할 거리를 pixel 단위의 숫자로 설정합니다.

nTransY

Number

현재 위치에서 y 축 방향으로 이동 할 거리를 pixel 단위의 숫자로 설정합니다.

참고

- translate() 메소드 수행 시 위치와 관련된 속성(x, y 등)은 변경되지 않습니다.
   영역정보를 반환하는 getRect() 와 같은 메소드는 translate() 메소드가 적용된 영역정보를 반환합니다.

- translate() 메소드는 GraphicsPath 가 표시되는 위치를 기준으로 수행됩니다.
   따라서 translate() 메소드를 여러번 수행하면 이동 효과가 누적되어 적용됩니다.

- GraphicsGroup 의 경우 하위 오브젝트에 이동 효과가 동일하게 적용됩니다.

- GraphicsPath 에 부모 오브젝트가 설정되어 있어야 translate() 메소드가 정상적으로 수행됩니다.
   즉, translate() 메소드 수행 전에 addChild() 메소드로 GraphicsPath 를 등록하여야 합니다.