69 lines
4.2 KiB
PHP
69 lines
4.2 KiB
PHP
|
{{-- Canvas Editor Modal (Fabric.js 기반) --}}
|
||
|
|
<dialog id="ce-dialog" class="rounded-lg shadow-2xl p-0 backdrop:bg-black/50" style="max-width:90vw; max-height:90vh; border:none;">
|
||
|
|
{{-- 헤더 --}}
|
||
|
|
<div class="flex items-center justify-between px-3 py-2 bg-gray-100 border-b">
|
||
|
|
<span class="text-sm font-bold text-gray-700">이미지 편집기</span>
|
||
|
|
<div class="flex gap-1">
|
||
|
|
<button type="button" id="ce-applyBtn" class="px-3 py-1 bg-green-600 text-white rounded text-xs hover:bg-green-700">적용</button>
|
||
|
|
<button type="button" id="ce-closeBtn" class="px-3 py-1 bg-gray-400 text-white rounded text-xs hover:bg-gray-500">닫기</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- 도구 모음 --}}
|
||
|
|
<div class="flex items-center gap-1 px-3 py-2 bg-gray-50 border-b flex-wrap">
|
||
|
|
<button type="button" id="ce-polyBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="폴리라인">
|
||
|
|
<i class="ri-pen-nib-line"></i> Poly
|
||
|
|
</button>
|
||
|
|
<button type="button" id="ce-freeBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="자유선">
|
||
|
|
<i class="ri-brush-line"></i> Free
|
||
|
|
</button>
|
||
|
|
<button type="button" id="ce-lineBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="직선 (L키)">
|
||
|
|
<i class="ri-subtract-line"></i> Line
|
||
|
|
</button>
|
||
|
|
<button type="button" id="ce-textBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="문자입력">
|
||
|
|
<i class="ri-text"></i> Text
|
||
|
|
</button>
|
||
|
|
<button type="button" id="ce-eraserBtn" class="ce-tool-btn px-2 py-1 border border-yellow-400 rounded text-xs hover:bg-yellow-100" title="지우개">
|
||
|
|
<i class="ri-eraser-line"></i> Eraser
|
||
|
|
</button>
|
||
|
|
<button type="button" id="ce-selectBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="선택 (Delete로 삭제)">
|
||
|
|
<i class="ri-cursor-line"></i> Select
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<span class="mx-1 text-gray-300">|</span>
|
||
|
|
|
||
|
|
<label class="flex items-center gap-1 text-xs cursor-pointer">
|
||
|
|
<input type="checkbox" id="ce-rightAngle" checked class="rounded border-gray-300">
|
||
|
|
직각고정
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<span class="mx-1 text-gray-300">|</span>
|
||
|
|
|
||
|
|
<button type="button" id="ce-clearBtn" class="px-2 py-1 border border-red-300 text-red-600 rounded text-xs hover:bg-red-50">
|
||
|
|
전체지우기
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- 색상 + 지우개 크기 --}}
|
||
|
|
<div class="flex items-center gap-2 px-3 py-1.5 bg-gray-50 border-b">
|
||
|
|
<div id="ce-colors" class="flex gap-1">
|
||
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full ring-2 ring-offset-1 ring-gray-800" data-color="#000000" style="background:#000"></button>
|
||
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#ff0000" style="background:#f00"></button>
|
||
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#0000ff" style="background:#00f"></button>
|
||
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#00aa00" style="background:#0a0"></button>
|
||
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#ff8800" style="background:#f80"></button>
|
||
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#800080" style="background:#808"></button>
|
||
|
|
<button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#888888" style="background:#888"></button>
|
||
|
|
</div>
|
||
|
|
<span class="text-gray-300">|</span>
|
||
|
|
<label class="text-xs text-gray-500">지우개:</label>
|
||
|
|
<input type="range" id="ce-eraserRange" min="5" max="100" value="20" class="w-20 h-1">
|
||
|
|
<span id="ce-eraserSize" class="text-xs font-bold">20</span><span class="text-xs text-gray-400">px</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- 캔버스 영역 --}}
|
||
|
|
<div id="ce-body" class="relative overflow-auto bg-white" style="max-height: calc(90vh - 130px);">
|
||
|
|
<canvas id="ce-canvas" width="400" height="300"></canvas>
|
||
|
|
</div>
|
||
|
|
</dialog>
|