Jointjs에서 요소를 '선택할 수 없도록' 설정

StackOverflow https://stackoverflow.com//questions/22023770

  •  21-12-2019
  •  | 
  •  

문제

나는 사용했다 Jointjs 내 프로젝트 중 하나의 다이어그램 라이브러리입니다.

1) 사용자가 다이어그램의 요소를 가지고 놀지 못하도록 제한하는 방법을 제공하는지 궁금합니다.내가 말하고 싶은 건:사용자는 크기 조정, 위치 변경, 링크 끌기 등과 같은 다이어그램과 상호 작용하는 대신 다이어그램을 이미지로 볼 수 있습니다.

2) 내 앱이 그것에 크게 의존하고 있습니다.자동 레이아웃 문제를 해결했지만 Jointjs로 가능합니까? lib에 이러한 요소와 항목을 원한다고 알려주고 가장 적합하고 충돌하지 않는 요소와 최소한의 요소로 다이어그램을 만드는 데 도움을 주십시오. 링크가 연속적인 직선인 경우 서로 충돌하는 링크 수 및 해당 경로의 요소와 충돌하는 링크 수는 무엇입니까?

3) 마지막으로, 같은 다이어그램 내에서 다른 요소나 다른 링크와 충돌하는 링크를 확인할 수 있는지 알고 싶습니다.요소의 경우 가능하다는 것을 알고 있습니다.

if (element1.getBBox().intersect(element2.getBBox())) {
    // elements intersect
}
도움이 되었습니까?

해결책

1) 다음 중 하나를 사용하십시오. new joint.dia.Paper({ interactive: false, ... }) 또는 종이에서 직접 포인터 이벤트 CSS 속성을 없음으로 설정하십시오. paper.$el.css('pointer-events', 'none')

2) Joint.layout.DirectedGraph 플러그인을 사용할 수 있습니다.이 플러그인은 여기에서 다운로드할 수 있습니다: http://jointjs.com/download 이를 설명하는 블로그 게시물은 다음과 같습니다. http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html.

3) 일반적으로 쉽지 않습니다.두 경로 간의 교차점을 계산하는 예를 보려면 이 사이트를 알려드리겠습니다. http://www.kevlindev.com/geometry/2D/intersections/intersect_bezier2_bezier2.svg.다운로드할 라이브러리는 다음과 같습니다. http://www.kevlindev.com/gui/math/intersection/index.htm

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top