Page tree
Skip to end of metadata
Go to start of metadata

NEW!! 릴리즈 2.8.0 이상

도형(SVG)을 삽입하고 편집 할 수 있는 플러그인입니다.

사용방법

플러그인 파일 불러오기

사이냅에디터의 shapeEditor플러그인 사용시 SEShapeManager모듈을 필수로  include 하셔야 합니다.

<!-- ShapEditor plugin include -->
<script src="plugins/shapeEditor/shapeEditor.min.js"></script>
<link rel="stylesheet" href="plugins/shapeEditor/shapeEditor.min.css">

<!-- SEShapeManager module include -->
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script>

툴바에 도형삽입 및 선택모드 버튼 추가하기

플러그인 이름인 'shapeEditor'을 사용하여 툴바 영역, 메뉴 영역에 버튼을 추가할 수 있습니다. 또한 마우스를 이용한 도형의 멀티셀렉션을 위해 'selectionMode'를 추가 할 수 있습니다.

툴바에 추가

synapeditor.config.js
//...
'editor.toolbar': [
	//...,
	'selectionMode', 'shapeEditor',
	//...
],
// ...

툴바에 추가된 모습

툴바에 주요 도형 추가하기

자주 사용하는 도형을 툴바에 배치할 수 있는 추가되었습니다. config파일의 toolbar 부분에 아래와 같이 "shapeEditor_도형이름" 형식으로 필요한 도형을 추가 할 수 있습니다.

synapeditor.config.js
 'editor.toolbar': [
    'shapeEditor', 'shapeEditor_textBox','shapeEditor_rectangle','shapeEditor_roundedRectangle','shapeEditor_oval'
],

[적용결과 ]

추가가능한 도형의 종류와 이름

아이콘도형이름레이블아이콘도형이름레이블아이콘도형이름레이블

line
arrow화살표
doubleArrow양방향 화살표

elbowConnector꺾인 연결선
elbowArrowConnector꺾인 화살표 연결선
elbowDoubleArrowConnector꺾인 양쪽 화살표 연결선

curvedConnector구부러진 연결선
curvedArrowConnector 구부러진 화살표 연결선
curvedDoubleArrowConnector구부러진 양쪽 화살표 연결선

textBox글상자
rectangle직사각형
roundedRectangle모서리가 둥근 직사각형

snip1Rectangle한쪽 모서리가 잘린 사각형
snip2Rectangle양쪽 모서리가 잘린 사각형
snip2DiagRectangle대각선 방향의 모서리가 잘린 사각형

snipRoundRectangle한쪽 모서리는 잘리고 다른쪽 모서리는 둥근 사각형
round1Rectangle한쪽 모서리가 둥근 사각형
round2Rectangle양쪽 모서리가 둥근 사각형

round2DiagRectangle대각선 방향의 모서리가 둥근 사각형
oval타원
triangle이등변 삼각형

rightTriangle직각 삼각형
parallelogram평행 사변형
trapezoid사다리꼴

diamond다이아몬드
pentagon정오각형
hexagon육각형

heptagon칠각형
octagon팔각형
decagon십각형

dodecagon십이각형
pie원형
chord

teardrop눈물 방울
frame액자
halfFrame1/2 액자

cornerL 도형
diagStripe대각선 줄무늬
cross십자형

plaque배지
can원통
cube정육면체

bevel빗면
donut빗면
noSymbol없음 기호

blockArc막힌 원호
foldedCorner모서리가 접힌 도형
smileyFace웃는 얼굴

heart하트
lightning번개
sun

moon
cloud구름
arc원호

bracketPair양쪽 대괄호
bracePair양쪽 중괄호
leftBracket왼쪽 대괄호

rightBracket오른쪽 대괄호
leftBrace왼쪽 중괄호
rightBrace오른쪽 중괄호

plus더하기
minus빼기
multiply곱하기

division나누기
equal등호
notEqual부등호

rightArrow오른쪽 화살표
leftArrow왼쪽 화살표
upArrow위쪽 화살표

downArrow아래쪽 화살표
leftRightArrow왼쪽/오른쪽 화살표
upDownArrow위쪽/아래쪽 화살표

quadArrow왼쪽/오른쪽/위쪽/아래쪽 화살표
leftRightUpArrow왼쪽/오른쪽/위쪽 화살표
bentArrow굽은 화살표

uTurnArrowU자형 화살표
leftUpArrow왼쪽/위쪽 화살표
bentUpArrow위로 굽은 화살표

curvedRightArrow오른쪽으로 구부러진 화살표
curvedLeftArrow왼쪽으로 구부러진 화살표
curvedUpArrow위로 구부러진 화살표

curvedDownArrow아래로 구부러진 화살표
stripeRightArrow줄무늬가 있는 오른쪽 화살표
notchedRightArrow톱니모양의 오른쪽 화살표

homePlate오각형
chevron갈매기형 수장
rightArrowCallout오른쪽 화살표 설명선

downArrowCallout아래쪽 화살표 설명선
leftArrowCallout왼쪽 화살표 설명선
upArrowCallout위쪽 화살표 설명선

leftRightArrowCallout왼쪽/오른쪽 화살표 설명선
quadArrowCallout왼쪽/오른쪽/위쪽/아래쪽 화살표 설명선
circularArrow원형 화살표

process처리
alternateProcess대체처리
decision판단

data데이터
predefinedProcess종속처리
internalStorage내부저장소

document문서
multiDocument다중문서
terminator수행의 시작/종료

preparation준비
manualInput수동입력
manualOperation수동연산

connector연결자
offPageConnector페이지연결자
card카드

punchedTape천공테이프
summingJunction가산접합
or논리합

collate대조
sort정렬/분류
extract추출

merge병합
storedData저장데이터
delay지연

magneticTape순차적 엑세스 저장소
magneticDisk자기 디스크
magneticDrum직접 엑세스 저장소

display화면 표시
explosion1폭발1
explosion2폭발2

star4포인트가 4개인 별
star5포인트가 5개인 별
star6포인트가 6개인 별

star7포인트가 7개인 별
star8포인트가 8개인 별
star10포인트가 10개인 별

star12포인트가 12개인 별
star16포인트가 16개인 별
star24포인트가 24개인 별

star32포인트가 32개인 별
upRibbon위쪽 리본
downRibbon아래쪽 리본

verticalScroll세로로 말린 두루마리모양
horizontalScroll가로로 말린 두루마리모양
wave물결

doubleWave이중 물결
rectangleCallout사각 설명선
roundedRectangleCallout모서리가 둥근 사각 설명선

ovalCallout타원 설명선
cloudCallout구름모양 설명선
borderCallout1설명선1

borderCallout2설명선2
borderCallout3설명선3
accentCallout1설명선1 (강조선)

accentCallout2설명선2 (강조선)
accentCallout3설명선3 (강조선)
callout1설명선1 (테두리없음)

callout2설명선2 (테두리없음)
callout3설명선3 (테두리없음)
accentBorderCallout1설명선1 (테두리 및 강조선)

accentBorderCallout2설명선2 (테두리 및 강조선)
accentBorderCallout3설명선3 (테두리 및 강조선)



  • No labels