Javascript Cavans 내 텍스트 이미지 드래그, drag & drop text, image in canvas

Javascript Cavans 내 텍스트 이미지 드래그, drag & drop text, image in canvas

 

 

Canvas Element 내 추가된 text와 image지의 drag & drop 기능에 대해서 알아보겠습니다.

 

Canvas에는 Javascript 에서 Element에 적용할 수 있는 Dragstart, Dragend 와 같은 Drag 이벤트가 제공되지 않습니다.

그럼 어떤 마우스 이벤트가 제공되는지 보도록 하죠.

 

Cavans Mouse Event

click, dblclick, contextmenu, mousedown, mouseup, mouseenter, mouseover, mouseleave, mouseout, mousemove

 

---

위 마우스 관련 이벤트 중에 

mousedown 과 mousemove, mouseup 이벤트를 활용해 Canvas 내 text와 image를 drag & drop으로 이동하는 방법에 대해 알아보겠습니다.

 

Canvas Element에 text와 image를 추가하는 방법은 아래의 Link를 참고하세요.

 

Link : https://aljjabaegi.tistory.com/599

Javascript Canvas 텍스트 추가 fillText, strokeText

 

Link : https://aljjabaegi.tistory.com/605

Javascript Canvas drawImage 이미지 추가 방법

 

body에 Canvas Element를 추가합니다.

 

<canvas id="canvas" width="500" height="300"></canvas>

 

이제 Canvas 내 마우스의 위치값 확인을 위한 start, offset 오브젝트와

마우스다운여부, 텍스트선택여부를 위한 mouseDown, selection 변수를 선언합니다.

 

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const start = {0, 0}, offset = {x: canvas.offsetLeft, y: canvas.offsetTop},
      mouseDown = false, selection = false;

Canvas에 fillText 추가할 drawText 함수와 텍스트 영역 위를 클릭했는지 판단하는 selectionText 함수를 선언합니다.

 

/*텍스트 영역을 클릭했는지 판단하는 함수*/
const textSelection = function(x, y, text){
	const tx = text.x, ty = text.y, tWidth = text.width, tHeight = text.height;
	return (x >= tx - tWidth/2 && x <= tx + tWidth/2 && y >= ty - tHeight && y <= ty);
}
/*Canvas 내 filltext 추가 함수*/
const drawText = function(text){
	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = text.fillStyle;
	ctx.font = text.font;
	ctx.textAlign = "center";
	ctx.fillText(text.text, text.x, text.y);
	text.width = Number(ctx.measureText(text.text).width.toFixed(0));
}

 

그리고 Canvas에 mousedown, mouseup, mousemove 이벤트를 등록합니다.

 

canvas.addEventListener("mousedown", function(e){
	e.preventDefault();
	e.stopPropagation();
	const winScrollTop = window.scrollY;
	start.x = parseInt(e.clientX - offset.x);
	start.y = parseInt(e.clientY - offset.y + winScrollTop);
	if(textSelection(start.x, start.y, text)){
		selection = true;
	}
	mouseDown = true;
});

 

mousedown 이벤트에서는 클릭한 위치좌표(start.x, start.y)가 텍스트의 영역내 존재하는지 체크를 하여

selection 변수의 값을 true로 변경해줍니다.

페이지에 스크롤이 있다면 window.scrollY 값을 더해주어야 합니다. x스크롤이 있다면 start.x 에도 winow.scrollX 값을 더해주셔야 합니다. 

또한 Cavnas Element가 추가된 부모의 스크롤이 있다면 해당 스크롤 값도 구하여 더해주셔야 합니다.

(element.scrollTop, element.scrollLeft)

 

canvas.addEventListener("mousemove", function(e){
	e.preventDefault();
	if(mouseDown && selection){
		const winScrollTop = window.scrollY,
			  mouseX = parseInt(e.clientX - offset.x),
			  mouseY = parseInt(e.clientY - offset.y + winScrollTop);
		const dx = mouseX - start.x, dy = mouseY - start.y;
			
		start.x = mouseX;
		start.y = mouseY;
        
		text.x += Number(dx.toFixed(0));
		text.y += Number(dy.toFixed(0));
		drawText(text);
	}
});

 

mousemove 이벤트에서는 마우스가 클릭되고, 선택된 텍스트가 있을 경우 text 오브젝트의 x, y 값을 변경하고

drawText 함수를 호출합니다.

여기서도 마찮가지로 페이지에 스크롤이 있다면, 해당 스크롤 값을 더해주셔야 정확한 클릭 위치를 구할 수 있습니다.

 

canvas.addEventListener("mouseup", function(e){
	mouseDown = false;
	selection = false;
});

mouseup 이벤트에서는 mouseDown, selection 을 false로 갱신합니다.

 

이제 텍스트를 추가해보겠습니다.

 

const text = {
    text: "알짜배기 프로그래머",
    font: "26px nanumBold",
    fillStyle: "#ff0000",
    x: canvas.width/2,
    y: canvas.height/2,
    width: 0,
    height: 26
}
drawText(text);

 

그럼 아래와 같이 Canvas에 텍스트가 추가됩니다.

 

텍스트 영역을 드래그 앤 드롭 하면 위치 이동이 되는 것을 확인하실 수 있습니다.

 

 

이미지 같은 경우에도 위의 텍스트와 같은 로직으로 처리해주시면 됩니다.

응용해 보시고 질문 있으시면 댓글 남겨주세요!