자바 스크립트 캔버스 - 사각형 드래그 앤 드롭

Question

자바 스크립트 캔버스에서 사각형을 그리려면 클릭하고 드래그 할 수 있어야합니다.

나는 "고무줄"처럼 끌고있는 것처럼 크기를 변경하려고 드래그하면서 사각형을 볼 수 있어야합니다. 그런 다음 마우스를 사용하여 만듭니다.

나는 심각한 어려움을 겪고 있습니다. 어떤 도움을 주셔서 감사합니다. 감사합니다!

Answer 1

알고리즘은 취소하고 캔버스에 새로운 사각형을 작성하는

1. 를 사용하여 애니메이션 프레임 콜백하는 것입니다. (requestAnimationFrame 참조)

2. 마우스 움직임 추적을 시작하기 위해 캔버스에서 mousedown 및 mouseup 이벤트를 사용하십시오. mousedown 이벤트는 애니메이션 호출을 시작하여 1x1 픽셀 직사각형을 그릴 수 있습니다.

3. mousemove 이벤트는 애니메이션 프레임 그리기 코드에서 사용하기 위해 마우스 위치를 기록하며 보류중인 콜백이없는 경우 requestAnimationFrame을 호출 할 수 있습니다.

4. 고무 밴드 효과를 만들기 위해 이전 내용의 캔버스를 지울 수있는 경우 마우스를 올렸을 때 마지막으로 그려진 사각형이 그 결과입니다.

5. 기존 콘텐츠를 보존해야하는 경우 mousedown에서 캔버스 사본을 만들고 새 사각형을 그리기 전에 캔버스로 복사하여 조사하십시오. how to copy a canvas locally 및/또는

해피 코딩 how to (deep) clone a canvas 같은 질문을 참조 배울 수있는 많은있다!

Answer 2

우선 드래그 (또는 마우스 이동)시 rect를 그리기 위해 캔버스를 지우고 새로운 rect를 그립니다. 둘째, 캔버스 모양이 객체가 아니므로 내가 아는 한 캔버스 모양과 상호 작용할 수 없으며 상호 작용을 원한다면 svg 사용을 고려하십시오. 여기 드래그 할 때 드로잉을 잘못 구현합니다. 조사

$("canvas").mousedown(function(event){ 
    var ctx = this.getContext("2d"); 
    ctx.clearRect(0,0,$(this).width(),$(this).height()); 
    var initialX = event.clientX - this.getBoundingClientRect().left; 
    var initialY = event.clientY - this.getBoundingClientRect().top; 

    $(this).mousemove(function(evt) { 
     ctx.strokeRect(initialX, initialY, evt.clientX - event.clientX, evt.clientY - event.clientY); 
    }); 
});