hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
257 lines
8.2 KiB
PHP
257 lines
8.2 KiB
PHP
<?php
|
|
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
|
|
|
|
if (!isset($_SESSION["level"]) || $_SESSION["level"] > 5) {
|
|
sleep(1);
|
|
header("Location:" . $WebSite . "login/login_form.php");
|
|
exit;
|
|
}
|
|
|
|
include $_SERVER['DOCUMENT_ROOT'] . '/load_header.php';
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>그리기 도구 예제</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<style>
|
|
.tool-button.active {
|
|
background-color: #007bff !important;
|
|
color: white !important;
|
|
border-color: #007bff !important;
|
|
}
|
|
.tool-button:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
#previewContainer {
|
|
position: relative;
|
|
width: 800px;
|
|
height: 600px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
#drawingCanvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container mt-3">
|
|
<h2 class="text-center mb-4">Drawing Tool Demo</h2>
|
|
|
|
<!-- Controls -->
|
|
<div class="d-flex align-items-center mb-2">
|
|
<button id="drawBtn" class="btn btn-outline-dark btn-sm me-2">그리기</button>
|
|
<button id="lineBtn" class="btn btn-outline-primary btn-sm me-2 tool-button">선</button>
|
|
<button id="freeBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">자유곡선</button>
|
|
<button id="polylineBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">폴리라인</button>
|
|
<button id="textBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">문자입력</button>
|
|
<button id="eraserBtn" class="btn btn-outline-dark btn-sm me-2 tool-button">지우개</button>
|
|
<input type="color" id="drawColor" value="#000000" class="form-control form-control-color me-2" />
|
|
<input type="number" id="lineWidth" value="2" min="1" max="20" class="form-control form-control-sm w-auto me-2" />
|
|
<button id="clearDrawingBtn" class="btn btn-primary btn-sm me-2">이미지 초기화</button>
|
|
<button id="saveDrawingBtn" class="btn btn-success btn-sm">그리기 저장</button>
|
|
</div>
|
|
|
|
<!-- Preview Container -->
|
|
<div id="previewContainer" class="border" style="position:relative; width:800px; height:600px;">
|
|
<img src="/img/placeholder.png" alt="Preview" id="baseImage" class="img-fluid" style="width:100%; height:100%; object-fit:contain;" />
|
|
</div>
|
|
|
|
<!-- Optional file input for saved drawing -->
|
|
<input type="file" id="upfile" name="upfile" style="display:none;">
|
|
|
|
</div>
|
|
|
|
<!-- 개선된 그리기 모드 로직 -->
|
|
<script>
|
|
// 기존 복잡한 다중 캔버스 처리 대신 단일 캔버스를 이용
|
|
|
|
let canvas, ctx;
|
|
let drawMode = null; // 'line', 'free', 'polyline', 'text', 'eraser'
|
|
let drawColor = '#000000';
|
|
let lineWidth = 2;
|
|
let isDrawing = false;
|
|
let startX = 0, startY = 0;
|
|
let path = [];
|
|
|
|
// 툴 버튼
|
|
const drawBtn = document.getElementById('drawBtn');
|
|
const lineBtn = document.getElementById('lineBtn');
|
|
const freeBtn = document.getElementById('freeBtn');
|
|
const polyBtn = document.getElementById('polylineBtn');
|
|
const textBtn = document.getElementById('textBtn');
|
|
const eraserBtn = document.getElementById('eraserBtn');
|
|
const colorPicker = document.getElementById('drawColor');
|
|
const widthInput = document.getElementById('lineWidth');
|
|
|
|
// 캔버스 생성 및 초기화
|
|
function createCanvas() {
|
|
const preview = document.getElementById('previewContainer');
|
|
// 기존 캔버스 제거
|
|
const old = document.getElementById('drawingCanvas');
|
|
if (old) old.remove();
|
|
|
|
canvas = document.createElement('canvas');
|
|
canvas.id = 'drawingCanvas';
|
|
canvas.width = preview.clientWidth;
|
|
canvas.height = preview.clientHeight;
|
|
Object.assign(canvas.style, {
|
|
position: 'absolute', top: 0, left: 0,
|
|
width: '100%', height: '100%', zIndex: 1000,
|
|
cursor: drawMode === 'eraser' ? 'crosshair' : 'default'
|
|
});
|
|
preview.appendChild(canvas);
|
|
ctx = canvas.getContext('2d');
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
}
|
|
|
|
// 이벤트 해제
|
|
function detachEvents() {
|
|
if (!canvas) return;
|
|
canvas.onmousedown = null;
|
|
canvas.onmousemove = null;
|
|
canvas.onmouseup = null;
|
|
canvas.onmouseleave = null;
|
|
}
|
|
|
|
// 이벤트 연결
|
|
function attachEvents() {
|
|
const rectTransform = (e) => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
return {
|
|
x: (e.clientX - rect.left) * (canvas.width / rect.width),
|
|
y: (e.clientY - rect.top) * (canvas.height / rect.height)
|
|
};
|
|
};
|
|
|
|
canvas.onmousedown = e => {
|
|
const pt = rectTransform(e);
|
|
isDrawing = true;
|
|
startX = pt.x; startY = pt.y;
|
|
path = [pt];
|
|
ctx.strokeStyle = drawMode === 'eraser' ? '#ffffff' : drawColor;
|
|
ctx.lineWidth = Number(widthInput.value) || lineWidth;
|
|
if (drawMode === 'free') {
|
|
ctx.beginPath(); ctx.moveTo(pt.x, pt.y);
|
|
}
|
|
};
|
|
|
|
canvas.onmousemove = e => {
|
|
if (!isDrawing) return;
|
|
const pt = rectTransform(e);
|
|
if (drawMode === 'free') {
|
|
ctx.lineTo(pt.x, pt.y);
|
|
ctx.stroke(); path.push(pt);
|
|
} else if (drawMode === 'eraser') {
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.arc(pt.x, pt.y, Number(widthInput.value) || 10, 0, Math.PI*2);
|
|
ctx.fill(); ctx.restore();
|
|
}
|
|
};
|
|
|
|
canvas.onmouseup = e => {
|
|
if (!isDrawing) return;
|
|
const pt = rectTransform(e);
|
|
if (drawMode === 'line') {
|
|
ctx.beginPath(); ctx.moveTo(startX, startY);
|
|
ctx.lineTo(pt.x, pt.y); ctx.stroke();
|
|
} else if (drawMode === 'polyline') {
|
|
ctx.beginPath(); const last = path[path.length-1];
|
|
ctx.moveTo(last.x, last.y); ctx.lineTo(pt.x, pt.y); ctx.stroke();
|
|
path.push(pt);
|
|
} else if (drawMode === 'text') {
|
|
const txt = prompt('텍스트 입력:');
|
|
if (txt) {
|
|
ctx.fillStyle = drawColor;
|
|
ctx.font = `${widthInput.value||16}px sans-serif`;
|
|
ctx.fillText(txt, pt.x, pt.y);
|
|
}
|
|
}
|
|
isDrawing = drawMode === 'polyline';
|
|
};
|
|
|
|
canvas.onmouseleave = () => { isDrawing = false; };
|
|
}
|
|
|
|
// 모드 설정
|
|
function setMode(mode) {
|
|
drawMode = mode;
|
|
document.querySelectorAll('.tool-button').forEach(btn => btn.classList.remove('active'));
|
|
switch(mode) {
|
|
case 'line': lineBtn.classList.add('active'); break;
|
|
case 'free': freeBtn.classList.add('active'); break;
|
|
case 'polyline':polyBtn.classList.add('active'); break;
|
|
case 'text': textBtn.classList.add('active'); break;
|
|
case 'eraser': eraserBtn.classList.add('active'); break;
|
|
}
|
|
if (canvas) canvas.style.cursor = mode === 'eraser' ? 'crosshair' : 'default';
|
|
}
|
|
|
|
// 버튼 이벤트
|
|
drawBtn.onclick = () => {
|
|
if (canvas) {
|
|
detachEvents(); canvas.remove(); canvas=null;
|
|
drawBtn.textContent = '그리기';
|
|
} else {
|
|
createCanvas(); attachEvents();
|
|
drawBtn.textContent = '중지';
|
|
}
|
|
};
|
|
lineBtn.onclick = () => setMode('line');
|
|
freeBtn.onclick = () => setMode('free');
|
|
polyBtn.onclick = () => setMode('polyline');
|
|
textBtn.onclick = () => setMode('text');
|
|
eraserBtn.onclick = () => setMode('eraser');
|
|
colorPicker.oninput= e => drawColor = e.target.value;
|
|
widthInput.oninput = e => lineWidth = Number(e.target.value);
|
|
|
|
// 초기화 및 저장 버튼
|
|
document.getElementById('clearDrawingBtn').onclick = () => {
|
|
if (canvas) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
path = [];
|
|
isDrawing = false;
|
|
}
|
|
};
|
|
|
|
document.getElementById('saveDrawingBtn').onclick = () => {
|
|
if (canvas) {
|
|
canvas.toBlob(blob => {
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'drawing.png';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
}
|
|
};
|
|
|
|
// -------------------------------------------------
|
|
// 이 패치를 적용하시면, 그리기 모드는 단일 캔버스에서만 동작하며
|
|
// 기존 이미지가 사라졌다가 재출력되는 버그가 사라집니다.
|
|
// 버튼별 동작도 일관적으로 처리됩니다.
|
|
</script>
|
|
|
|
<script >
|
|
var loader = $('#loadingOverlay');
|
|
if (loader.length) {
|
|
loader.hide();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|