Canvas에 텍스트 출력 드래그 해서 텍스트 위치 변경

Canvas에 텍스트 출력 드래그 해서 텍스트 위치 변경

예제

Tag And Script

<canvas id="canvas_ex" width="1200" height="300" class="canvas_ex" style="border: 1px solid #ccc;"></canvas>
<input type="text" id="draw_text" class="frm_input full_input frm_ex_focus" value="안녕하세요. 반갑습니다.">

<script>
var canvas = document.getElementById("canvas_ex");
var ctx = canvas.getContext("2d");

// 1. 텍스트 상태
let text = {
	x: 50,
	y: 50,
	str: document.getElementById("draw_text").value,
	color: "black",
	width: 0,
	height: 20 // 폰트 크기 기반
};
let isDragging = false;
let offsetX, offsetY;

// 텍스트 크기 측정 (초기화)
ctx.font = "20px Arial";
text.width = ctx.measureText(text.str).width;

function draw() {
	var stext = document.getElementById("draw_text").value;
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = text.color;
	ctx.font = "20px Arial";
	ctx.fillText(stext, text.x, text.y);
}

// 2. 이벤트 리스너
canvas.addEventListener('mousedown', (e) => {
	// 마우스 위치가 텍스트 영역 내에 있는지 확인
	if (e.offsetX > text.x && e.offsetX < text.x + text.width &&
		e.offsetY > text.y - text.height && e.offsetY < text.y) {
		isDragging = true;
		// 클릭한 지점과 텍스트 좌상단과의 오프셋 계산
		offsetX = e.offsetX - text.x;
		offsetY = e.offsetY - text.y;
	}
});

canvas.addEventListener('mousemove', (e) => {
	if (isDragging) {
		text.x = e.offsetX - offsetX;
		text.y = e.offsetY - offsetY;
		draw(); // 3. 재그리기
	}
});

canvas.addEventListener('mouseup', () => {
	isDragging = false;
});

draw(); // 초기 그림

document.getElementById("draw_text").addEventListener("keyup", function() {
	draw();
});

document.getElementById("draw_text").dispatchEvent(new Event("keyup"));

$(document).ready(function() {
	var canvas = document.getElementById('canvas_ex');
	var ctx = canvas.getContext('2d');

	// 드래그 영역 설정
	$('#canvas_ex').on('dragover', function(e) {
		e.preventDefault();
		e.stopPropagation();
	});

	// 드롭 이벤트 처리
	$('#canvas_ex').on('drop', function(e) {
		e.preventDefault();
		e.stopPropagation();

		var files = e.originalEvent.dataTransfer.files;
		if (files.length > 0) {
			var file = files[0];
			var reader = new FileReader();

			reader.onload = function(event) {
				var img = new Image();
				img.onload = function() {
					// 드롭한 위치에 이미지 그리기 (마우스 좌표 계산 필요)
					ctx.drawImage(img, 0, 0, 200, 200); // 200x200 크기로 예시
				}
				img.src = event.target.result;
			}
			reader.readAsDataURL(file);
		}
	});
});
</script>