SVG의 2 차 베지어 곡선의 제어점을 드래그하여 움직이는 샘플
데모
스크린샷
메모
마우스 이벤트 좌표를 SVG 좌표로 변환
다음 함수로 변환합니다.
function getClientPointInSVG(ev) {
var p, m;
p = svg.createSVGPoint();
p.x = ev.clientX;
p.y = ev.clientY;
m = dragElem.getScreenCTM();
return p.matrixTransform(m.inverse());
}
드래그 시작시 오프셋을 유지합니다.
mousedown 이벤트에서 제어점과 마우스 이벤트 점의 어긋남을 저장합니다. mousemove 이벤트에서는 그 어긋남을 유지하면서 제어점을 이동합니다.
어떤 요소에 이벤트 핸들러를 설정하는가?
메모
마우스 이벤트 좌표를 SVG 좌표로 변환
다음 함수로 변환합니다.
function getClientPointInSVG(ev) {
var p, m;
p = svg.createSVGPoint();
p.x = ev.clientX;
p.y = ev.clientY;
m = dragElem.getScreenCTM();
return p.matrixTransform(m.inverse());
}
드래그 시작시 오프셋을 유지합니다.
mousedown 이벤트에서 제어점과 마우스 이벤트 점의 어긋남을 저장합니다. mousemove 이벤트에서는 그 어긋남을 유지하면서 제어점을 이동합니다.
어떤 요소에 이벤트 핸들러를 설정하는가?
function getClientPointInSVG(ev) {
var p, m;
p = svg.createSVGPoint();
p.x = ev.clientX;
p.y = ev.clientY;
m = dragElem.getScreenCTM();
return p.matrixTransform(m.inverse());
}
mousemove와 mouseup의 핸들러를 svg 요소가 아니라 제어점에 붙여 버리면, 마우스를 빠르게 움직여 제어점에서 벗어나면 드래그가 멈춰 버려 좋지 않았습니다.
참고
다음 페이지를 참고로 했습니다.
Reference
이 문제에 관하여(SVG의 2 차 베지어 곡선의 제어점을 드래그하여 움직이는 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hnakamur/items/a275302d80d69f9840e6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
