2011-11-03 4 views
4

HTML5 캔버스에서 여러 작업을 수행 할 수있는 프레임 워크/라이브러리를 찾고 있습니다.HTML5 : 캔버스에서 드래그 앤 드롭을위한 프레임 워크/라이브러리

필요한 것은 그리기 후에 개체에 액세스하는 메커니즘으로 변경하고 XML로 구문 분석 할 수 있습니다. 또한 커서로 특정 객체를 드래그 앤 드롭 할 수 있어야합니다.

나는 이미 여러 프레임 워크를 사용해 보았지만 그 중 어느 것도 onDrag-Listeners를 객체에 할당 할 수있는 가능성이 전혀 없습니다 (캔버스에만 해당). 이러한 동작을 손으로 구현하는 것이 가능할 수도 있지만 캔버스에서 하나 이상의 객체를 처리해야하기 때문에 복잡해집니다. 또한 성능이 중요한 기준이므로 내 자신의 비참한 코드가 아닌 최적화 된 라이브러리 기능을 사용할 수 있다면 좋을 것입니다. SVG를 대안으로 알고 있으므로 제게 그렇게하지 마십시오. 나는 둘 다의 공연을 비교하기 위해 캔버스로 그렇게해야합니다.

내가 생각하기에 내가 리스너를 캔버스 개체에 할당하는 데 필요한 프레임 워크가 있다고 생각합니다. 모든 것이 마우스 입력에 집중되기 때문에 애니메이션 기술은 그다지 중요하지 않습니다.

누구나 내 요구에 맞는 프레임 워크/라이브러리를 알고 있으며 경험을 공유 할 수 있습니까? HTML5-Canvas의 모든 프레임 워크와 라이브러리를 테스트 해 보지 않아도 기쁘다.

미리 감사드립니다.

EDIT : 내가 언급 한 것을 잊어 버린 한가지 : 기하학적 객체 외에도 경로 (즉, 낙서)를 그릴 수 있어야합니다. 그 (것)들을 위해 핸들러를 가질 필요는 없지만, 내가 도서관 밖에서 직접 구현할 필요가 없다면, 나는 행복 할 것이다.

답변

6

드래그/드롭, 크기 조정, 회전으로 개체를 에뮬레이트하는 훌륭한 라이브러리입니다. 벡터 그래픽을 가져 오는 데 도움이되는 SVG 데이터를 가져올 수도 있습니다.

라이브러리를 호출

fabric.js : https://github.com/kangax/fabric.js

당신은 몇 가지 데모를보고 당신에 맞게 수있는 방법을 느낄 수 있습니다 : 맞아요,하지만에 대한 데이터 구조가 할 수 제공하는 라이브러리가 이미 있습니다 http://kangax.github.com/fabric.js/demos/index.html

+0

정확히 내가 찾던 것이 었습니다. 한편 나는 꽤 유망 해 보이는 다른 도서관을 발견했다. jCanvaScript, cakejs, EaselJS 및 Processing.js입니다. – j0ker

1

커스텀 클래스 등으로 자신을 설명하는 것 외에는 선택할 수있는 '캔버스 개체'와 같은 것이 없습니다. 일단 당신이 그 무엇인가를 그려 내면 브라우저는 그것을 하나의 큰 픽셀 모음으로 간주합니다.

설명 할 수있는 유일한 방법은 마우스 이벤트의 좌표를 캡처하고 그려진 순서를 고려하여 캔버스에 그린 모든 것을 비교하는 것입니다.

+0

그려진 개체를 브라우저에 저장하십시오. 나는 나를 위해 좌표를 찾는 작업을하는 사람을 찾고있다. 그 동안 jcotton (http://jcotton.sourceforge.net/)을 찾았습니다. 문제는 라이브러리로 연필로 선을 그리는 것과 같은 경로를 만들 수없는 것처럼 보이기 때문에 여전히 검색 중입니다. – j0ker

1

캔버스를 변경하려면 캔버스를 지우고 다시 그려야합니다. 일반적으로 모든 프레임. cake.js는이 쉬운 일을합니다.

Solution A) 마우스 상호 작용을 위해서는 개체 및 z- 인덱스 배열을 유지해야하며 사용자가 클릭 할 때 클릭에 대해 offsetX 및 offsetY를 결정하고 클릭 한 내용을 결정해야합니다.

해결책 B) Z- 색인을 사용하여 절대 배치 된 div를 추가하고 기본 캔버스에 그렸던 이미지를 미러링하여 배치합니다. 이 div에서 클릭/드래그 이벤트를 가져옵니다.

1

필자는 제안 할 라이브러리가 없지만 사용 된 기술은 보이지 않는 imagemap을 캔버스 위에 추가하는 것입니다. 그런 다음 캔버스의 객체에 해당하는 요소 인 area을 추가했습니다.

영역 태그는 브라우저의 모든 기본 마우스 이벤트에 반응합니다. 이를 통해 풍부한 사용자 상호 작용을 제공 할 수 있습니다. 이미지 맵은 모든 모바일 및 데스크톱 브라우저에서도 지원되며 point-in-polygon 알고리즘이 자바 스크립트에서 구현 된 것보다 뛰어납니다.

이미지 맵의 요소가 캔버스에 표시된 객체와 항상 일치하는지 확인하면 코드 복잡성이 추가되지만 실제로는 극복하기가 어렵지 않습니다. DOM에 이미있는 area 태그의 좌표를 변경하려면 Chrome에서 일부 issues으로 실행될 수 있습니다.

다음은이 techinque의 작업 예제 : http://xavi.co/drag-shapes
그리고 여기에 코드입니다 : https://github.com/Xavi-/Drag-Shapes

희망이 도움이됩니다.

1

캔버스의 경계 상자 및 충돌에 kinetic.js를 사용했습니다.

아마 당신은 스스로 어떤 수업을 설정해야합니다. http://www.kineticjs.com/

관련 문제