[jquery-ui] scale했을 때 drag가 좀 이상할때

scale을 썼을 때, 예를들어 화면을 1280x720으로 작업하고 그보다 작든 크든 scale로 줄이고 키우고 하면 보통은 문제가 없는데, 좌표 기준이 달라져서 그런지 canvas나 drag는 묘하게 이상하게 된다. 예를들어 canvas로 줄긋기를 구현했는데 줄이 이상한 곳에서 그어진다거나, drag같은 경우 드래그 자체는 문제없지만 약간 틀어진 곳에 놔야 놔진다거나 마우스 움직이는거에 비해 잡은 아이템이 느리게 움직인다거나... 암튼 이런거 때문에 짜증났는데 다행히 글이 있었다.

 

참고로 관련 문제가 생긴다면 이글도 참고

 

1. 좌표 설정

var click = {
	x: 0,
	y: 0
};
$('.draggable').draggable({
	start: function(event) {
		click.x = event.clientX;
		click.y = event.clientY;
	},
	drag: function(event, ui) {
		// This is the parameter for scale()
		var zoom = 1.5;
		var original = ui.originalPosition;
		// jQuery will simply use the same object we alter here
		ui.position = {
			left: (event.clientX - click.x + original.left) / zoom,
			top: (event.clientY - click.y + original.top) / zoom
		};
	}
});

나같은 경우 화면이 리사이즈 될때마다 바뀌는 scale값을 저장해두고, drag할때 그 값을 zoom변수에 넣어 계산하였음. 캔버스는 이렇게까지 수정 안했는데, 이 제이쿼리 드래그는 좌표값을 뭔가 기억을 못해서 따로 click변수에 저장해서 썼나봄. 하 좌표가 어려워 어렵어....

 

 

https://stackoverflow.com/questions/13882070/jquery-draggable-and-webkit-transform-scale

jQuery draggable and -webkit-transform: scale();