도형편집기

2.8.0 버전부터 지원합니다.

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

사용 방법

플러그인 파일 불러오기

Synap Editor의 shapeEditor 플러그인을 사용할 때는 SEShapeManager 모듈을 반드시 포함해야 합니다.

<!-- ShapeEditor 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>

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

플러그인 이름 'shapeEditor'를 사용하여 툴바 영역이나 메뉴 영역에 버튼을 추가할 수 있습니다. 또한, 마우스를 사용하여 여러 shape을 선택할 수 있도록 'selectionMode'를 추가할 수 있습니다.

툴바에 추가

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

툴바에 추가된 모습

자주 사용하는 shape를 툴바에 추가하기

자주 사용하는 shape를 툴바에 배치할 수 있습니다. 설정 파일의 툴바 항목에서 아래와 같이 "shapeEditor_shapeName" 형식으로 필요한 shape를 추가할 수 있습니다.

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

[적용 결과]

사용 가능한 shape의 타입과 이름