그리기 객체 편집

editor.execCommand를 통해 그리기 객체(이미지, 비디오, shape, 레이어)를 조작하는 명령어.

명령어

• command - changeDrawingObjectProperties
• command - insertDrawingObject
• command - insertDrawingObjectAlt
• command - insertDrawingObjectByURL
• command - insertDrawingObjectCaption
• command - moveAbsolutePositionDrawingObject
• command - moveDrawingObject
• command - removeDrawingObject
• command - resizeDrawingObject
• command - rotateDrawingObjectLeft
• command - rotateDrawingObjectRight
• command - setDrawingObjectBackground
• command - setDrawingObjectBorderColor
• command - setDrawingObjectBorderStyle
• command - setDrawingObjectBorderWidth
• command - zoomDrawingObject

command - changeDrawingObjectProperties

현재 선택된 그리기 객체에 속성을 설정합니다.

// Border
editor.execCommand('changeDrawingObjectProperties', {
  style: { border: { style: 'solid', width: 3, color: { r: 255, g: 0, b: 0 } } }
});

// Float
editor.execCommand('changeDrawingObjectProperties', {
  style: { float: 'left' }    // 'none' | 'left' | 'right'
});

// Margin
editor.execCommand('changeDrawingObjectProperties', {
  style: { margin: { left: 10, right: 10, top: 10, bottom: 10 } }
});

// Vertical align
editor.execCommand('changeDrawingObjectProperties', {
  style: { verticalAlign: 'top' }   // 'top' | 'middle' | 'bottom' | 'baseline'
});

// Width / height
editor.execCommand('changeDrawingObjectProperties', {
  style: { width: { value: 100, unit: 'px' }, height: { value: 100, unit: 'px' } }
});

command - insertDrawingObject

캐럿 위치에 이미지 또는 비디오를 삽입합니다. 선택 영역이 있으면 먼저 선택 영역이 제거됩니다. 삽입된 파일은 서버에 업로드됩니다.

참고: 임포트 & 업로드 API.

editor.execCommand('insertDrawingObject', [file], 'Image');
editor.execCommand('insertDrawingObject', [file], 'Video');

command - insertDrawingObjectAlt

선택한 이미지에 대체 텍스트를 설정합니다.

editor.execCommand('insertDrawingObjectAlt', 'Alternative text for the image');

command - insertDrawingObjectByURL

URL에서 이미지 또는 비디오를 캐럿 위치에 삽입합니다. 선택 영역이 있으면 먼저 제거됩니다.

editor.execCommand('insertDrawingObjectByURL', 'https://image.url/image', 'Image');

command - insertDrawingObjectCaption

선택한 이미지에 캡션을 삽입합니다.

editor.execCommand('insertDrawingObjectCaption', 'Image caption');

command - moveAbsolutePositionDrawingObject

현재 선택된 절대 위치 이미지, 비디오, 레이어 또는 shape를 이동합니다.

editor.execCommand('moveAbsolutePositionDrawingObject', { x: 100, y: 100 });

command - moveDrawingObject

현재 선택된 이미지, 비디오 또는 표를 이동합니다.

editor.execCommand('moveDrawingObject', 100, 100, true);

command - removeDrawingObject

현재 선택된 이미지 또는 shape를 삭제합니다.

editor.execCommand('removeDrawingObject');

command - resizeDrawingObject

현재 선택된 이미지, 비디오 또는 shape의 크기를 조절합니다.

editor.execCommand('resizeDrawingObject', null, 200, 100, null, null);   // set width=200, height=100
editor.execCommand('resizeDrawingObject', null, null, null, 200, 100);   // set left=200, top=100

command - rotateDrawingObjectLeft

현재 선택된 이미지 또는 shape를 반시계 방향으로 90° 회전합니다.

editor.execCommand('rotateDrawingObjectLeft');

command - rotateDrawingObjectRight

현재 선택된 이미지 또는 shape를 시계 방향으로 90° 회전합니다.

editor.execCommand('rotateDrawingObjectRight');

command - setDrawingObjectBackground

선택한 레이어의 배경색을 설정합니다.

editor.execCommand('setDrawingObjectBackground', '#ff0000');

command - setDrawingObjectBorderColor

선택한 이미지, 비디오 또는 레이어의 테두리 색상을 설정합니다.

editor.execCommand('setDrawingObjectBorderColor', '#ff0000');

command - setDrawingObjectBorderStyle

선택한 이미지, 비디오 또는 레이어의 테두리 스타일을 설정합니다.

editor.execCommand('setDrawingObjectBorderStyle', 'none');
editor.execCommand('setDrawingObjectBorderStyle', 'solid');

command - setDrawingObjectBorderWidth

선택한 이미지, 비디오 또는 레이어의 테두리 두께를 설정합니다.

editor.execCommand('setDrawingObjectBorderWidth', 3);

command - zoomDrawingObject

선택한 이미지 또는 비디오의 너비나 높이를 늘리거나 줄입니다.

editor.execCommand('zoomDrawingObject', true,  false, 10);   // width +10px
editor.execCommand('zoomDrawingObject', false, true,  10);   // height +10px
editor.execCommand('zoomDrawingObject', true,  true,  -10);  // both -10px