DOM에서 끌기, 캔버스 또는 SVG에 넣기

사용자가 목록에서 항목을 끌어서 캔버스에 놓아서 나무/조직도를 만들 수있는 도구를 작성하려고합니다.DOM에서 끌기, 캔버스 또는 SVG에 넣기

일반적인 li-node를 캔버스/svg로 드래그하여 캔버스의 어느 위치에서 어떤 요소가 삭제되는지를 궁금해하고 있었습니까?

캔버스/svg를 사용하는 것보다 더 좋은 제안이 있습니까? 내 유일한 요구 사항은 사용자가 그래프/조직도를 작성하기 위해 목록에서 항목을 직관적으로 끌 수 있어야한다는 것입니다.

2011-02-28 Mickel

예, 다른 요소 위로 드래그하여 해당 요소의 위치를 결정할 수 있습니다.

캔버스

function mouseXY(evt){ 
    var mxy = svg.createSVGPoint(); 
    mxy.x = evt.clientX; 
    mxy.y = evt.clientY; 
    return mxy.matrixTransform(svg.getScreenCTM().inverse()); 
}

, 캔버스의 .style.offsetWidth가 width과 동일 함을 확인 할 수 있습니다 : SVG를 들어, 마우스로 변환하려면 다음과 같은 코드를 사용하는 것이 좋습니다 것은 지역 공간을 캔버스 좌표 , 그렇지 않으면 그들 사이를 변환하여 지역 공간에 들어간다. (캔버스의 디스플레이 크기를 조정할 때만)

그러나 캔버스에 비해 SVG에 대한 가장 좋은 점은 "유지 그래픽 모드" 드로잉 API입니다. 무엇보다도 SVG 요소 자체에 이벤트 핸들러를 넣고 끝난 오브젝트를 좌표로 결정하는 대신 mouseover 이벤트를 감지 할 수 있습니다. 캔버스에 '객체'가 없으므로 후자는 캔버스에서해야 할 일입니다. 페인트 한 후에 즉시 건조되는 페인트의 픽셀 만 있습니다.

직접 SVG를 직접 삽입하는 것이 좋습니다. XHTML에서는 <object> 또는 <img> 대신에 document을 처리해야합니다. http://phrogz.net/SVG/convert_path_to_polygon.xhtml이

출처

2011-02-28 16:30:37 Phrogz

당신은, 라파엘 속도의 개발을 쉽게 찾을 수 귀하의 SVG를 생성하고

http://irunmywebsite.com/raphael/svgsource.php 에서 변환기 도구로 떨어질 것이다 : 여기에 하나의 XHTML 페이지에 여러 SVG 년대를 내장 내 예제 페이지입니다 드래그 앤 드롭 예

http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones

출처

2011-03-01 23:02:42 Chasbeen

감사합니다, 나는 실제로 라파엘를 사용하여 결국 지금까지 그것은 좋은 일하고있다! – Mickel

DOM에서 끌기, 캔버스 또는 SVG에 넣기

답변

관련 문제