캔버스에서 선을 선택하고 드래그하려면 어떻게해야합니까?

Question

저는 그림 그리기 앱을 만들고 있습니다. 그것은 HTML 캔버스를 사용합니다. 사용자는 캔버스에 도형을 그릴 수 있습니다.

이제 문제가 생깁니다. 캔버스에서 그린 선을 선택하고 싶습니다. 선택되면 드래그하거나 삭제할 수 있습니다. 어떻게 구현할 수 있습니까? 좋은 아이디어있어?

Answer 1

kinetic.js라는 라이브러리가 있습니다.이 라이브러리를 사용하면 선택 기능으로 캔버스에 그릴 모양을 추적 할 수 있습니다. 여기

은 예입니다 http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shapes-by-name-with-kineticjs/

Answer 2

이 캔버스를 사용하여 그리기 응용 프로그램의 소스 코드를 포함 https://github.com/canvimation/canvimation.github.com에보고를하기 위해 잠시 가치가있을 수도 있습니다.

이 애플리케이션은 다시 코딩되고 있지만 아직 온라인 상태 인 새 코드를 사용하는 실제 버전은 없습니다. 새로운 소스 코드는 스테이지 1 브랜치에 있습니다. 다행히도이 새로운 코드는 이전 코드보다 이해하기 쉽기 때문에 아래에 언급 된 코드는 스테이지 1 브랜치에서 가져온 것입니다.

기본적으로 셰이프 개체는 경로 데이터와 셰이프 주위의 직사각형 경계를 제공하는 데이터를 포함하여 모양에 대한 모든 데이터를 포함하는 각 셰이프에 대해 만들어집니다. "boundarydrop"div를 클릭하면 checkBoundary 함수가 호출되고 Shift 키와 커서 위치에 대한 데이터가 전달됩니다. 그런 다음 각 도형에 대해 첫 번째 검사는 커서가 도형의 경계 내에 있는지 확인한 후 더 정밀한 검사가 수행됩니다. 닫힌 도형의 경우 커서가 도형 내부에 있는지 확인하고 커서가 경로에 가까이 있으면 열린 도형을 찾습니다.

Shift 키를 누르고 있을지 여부와 모양이 속한 그룹에 따라 더 복잡한 문제가 있습니다. 그러나 기본이 있습니다.

---

는

기능 스크립트에서 index.html을

shiftdown
하는 getPosition

에

를 체크 아웃/

을 drawboundary.js

checkBoundary

ISIN

ISON 스크립트

/shape.js

모양

이은을 사용하는 응용 프로그램의 작업 온라인 버전이 http://canvimation.github.com/에서 되나

---

master 브랜치에있는 오래된 코드와 버그가 있지만 w 아프면 애플리케이션이하는 일에 대한 아이디어를 얻을 수 있습니다.

희망이 있습니다. 도움이 되었습니까?