2014-12-27 4 views
2

프로젝트에 도움이 필요합니다. HTML5, JS 및 CSS3에서 ERD 다이어그램 생성기를 만들고 있습니다. 내 프로젝트에서 두 개의 객체 (직사각형)를 연결하는 하나의 함수 만 놓친다. 이 함수를 만들려고했지만 직선적으로 작동하지만 90도 각도의 선이 필요합니다.

더 exaplain를 들어, 여기에 내가 지금 무엇을 가지고 : http://i.stack.imgur.com/fpfKb.png
을 그리고 이것은 내가 원하는 무엇인가 : 그래서 여기 http://i.stack.imgur.com/eCNKX.png

이 원하는 기능과 내가 파악하지 못할 : 이 기능은 두 물체를해야합니다. 객체의 위치는 X와 Y, 너비와 높이가 있습니다. 그리고 함수는이 두 객체와이 객체를 90도 각도로 연결하는 가장 좋은면을 계산합니다.

그래서 예를 들어, 반환 :
(시작 지점) POINT1를 : 123566
(포인트 위치를 자동 줄 바꿈) POINT2 : 223766
(포인트 위치를 자동 줄 바꿈) POINT3 : 153266
(엔드 포인트) Point4 : 33,234

어떤 아이디어 ? 나는 알고리즘의 제안만을 원한다. 고마워. :). 두 물체의 높이 및 폭을 HTML/JS 캔버스가 오브젝트 사이에 선을 그립니다.

  • 도를 (이 그들을 위치 방식 인 경우) 개체

  • +0

    "줄 바꿈 지점"이란 무엇입니까? 목적을 달성하지 못했고 함수가 세 개의 값 쌍을 반환하는 이유는 무엇입니까? – Codeek

    +0

    포인트는 줄의 중심이며 줄 바꿈합니다. 두 번째 이미지를 보면 선은 세 점을 갖습니다. 더 좋은 예를 들어. 첫 번째 그림에서 나는 두 점만 가지고 있으며, 그것은 한 줄을 만듭니다. 그러나 나는 3 점으로 만든 두 줄을 만들고 싶다. –

    +0

    이미지는 4 점, 선분의 두 점과 두 개의 끝점을 보여줍니다. 어떤 세 가지 점을 고려하고 있습니까? – Codeek

    답변

    3
    1. 알아낼 작은 lefttop 작은 값을 갖는다.
    2. 도 아웃 시작 및 종료 포인트 :
      • 시작점 X는 좌측 개체 left + width에서
      • 지점 좌측 개체 top + height/2 있어요 Y 스타트
      • 종점의 X는 권리 오브젝트 left에있다
      • 종점
      • Y 권리 오브젝트 top + height/2 있어요
    3. "라인이 감싸는 포인트"시점에서의 Y 및 X 사이에 X이다 종점의 시작과 X. 선이 감싸는 두 번째 점은 종점의 Y에 있으며 동일한 X를가집니다.
    4. 이전에 객체를 연결 한 것과 같은 방법으로 3 점을 연결합니다.

    코드를 게시하지 않으셔서 죄송합니다. 예제 코드를 게시하면 답변에 추가 할 수 있습니다.

    +0

    흠 ... 좋아 보인다. 나는 그것을 시도하고 지금;); 감사 :). –

    +0

    좋아요, 끝났습니다. 작동합니다! 감사 :). 여기에 코드 : http://pastebin.com/LHBRZ0zC –

    관련 문제