Quark-렌더러----13부

2021SC@SDUSC

검토

지난 시간에는 수평, 수직 좌표 등 일반 점의 특성을 가지는 기하학적 의미의 점과 점에 대한 몇 가지 방법을 주로 분석하였다. , 이를 통해 다음을 모두 생성할 수 있습니다.
이번에는 주로 기하학적 의미에서 선을 분석합니다. 기하적 의미로 선을 기술하는 js 파일은 점 설명과 같은 폴더에 있으며 기하적으로 모든 내용이 들어 있습니다. 기하학적 감각 보이지 않고 너비가 없으며 수학 연산에 사용되며 이 구현은 diagramo에서 개선되었습니다. 아래에서는 주요 메서드 속성에 대해 별도로 설명합니다.

GeoLine.js 분석

js 파일은 주로 GeoLine 클래스를 설명하고 이를 내보냅니다. 첫 번째는 자체적으로 시작점과 끝점이라는 두 가지 속성을 갖는 생성자입니다.

  constructor(startPoint, endPoint) {
    
    
    this.startPoint = startPoint;
    this.endPoint = endPoint;
  }

부하 함수

load의 주요 기능은 JSON 개체에서 직선을 만드는 것입니다.JSON 개체를 전달한 다음 GeoLine 생성자를 호출하고 매개 변수를 전달한 다음 직선을 반환해야 합니다.

  static load(o) {
    
    
    let newLine = new GeoLine(GeoPoint.load(o.startPoint), GeoPoint.load(o.endPoint));
    return newLine;
  }

기능을 포함

이 함수의 기능은 점이 직선 위에 있는지 테스트하는 것입니다.(여기서 직선은 수학적 의미에서 무한히 연장된 직선이 아니라 선분입니다.) 이 함수에서 사용하는 주요 알고리즘은 다음을 계산하는 것입니다. 기울기, 보기 (x, y) 이 선분에 있는지 여부
주요 프로세스는 다음과 같습니다: 먼저 수직선인지 확인합니다. 즉, 수직선의 기울기가 있기 때문에 x가 상수가 되지 않습니다. 가 존재하지 않으므로 별도로 논의해야 하며 그렇지 않은 경우의 비수직선을 분석하여 먼저 직선의 기울기 a와 직선 방정식의 두 매개변수인 b를 구하고, 그런 다음 매개변수(x, y)가 y == a * x + b 공식을 충족하는지 판단하고 이를 반환합니다. 결과는 괜찮습니다.

  contains(x, y) {
    
    
    // if the point is inside rectangle bounds of the segment
    if (
      mathMin(this.startPoint.x, this.endPoint.x) <= x &&
      x <= mathMax(this.startPoint.x, this.endPoint.x) &&
      mathMin(this.startPoint.y, this.endPoint.y) <= y &&
      y <= mathMax(this.startPoint.y, this.endPoint.y)
    ) {
    
    
      // check for vertical line
      if (this.startPoint.x == this.endPoint.x) {
    
    
        return x == this.startPoint.x;
      } else {
    
    
        // usual (not vertical) line can be represented as y = a * x + b
        let a = (this.endPoint.y - this.startPoint.y) / (this.endPoint.x - this.startPoint.x);
        let b = this.startPoint.y - a * this.startPoint.x;
        return y == a * x + b;
      }
    } else {
    
    
      return false;
    }
  }

가까운 기능

이 기능의 주요 기능은 점이 특정 각도에서 이 선에 가까운지 여부를 판단하는 것이며 끝점도 고려해야 합니다.
이 함수에서 우리는 이 점의 좌표와 각도를 각각 나타내는 x, y 및 반경 각도인 세 개의 매개 변수를 전달해야 합니다. 먼저 선이 수직선인지 판단하고 수직선이면 범위에 따라 직접 판단하고 수평선도 마찬가지입니다. 시작점과 끝점의 좌표를 구하고 그 점에서 직선까지의 거리를 계산합니다.이것은 수학 공식입니다.계산을 통해 얻은 결과는 반지름과 비교하여 결과를 얻고 최종적으로 반환합니다. 결과.

near(x, y, radius) {
    
    
    if (this.endPoint.x === this.startPoint.x) {
    
    
      //Vertical line, so the vicinity area is a rectangle
      return (
        ((this.startPoint.y - radius <= y && this.endPoint.y + radius >= y) || (this.endPoint.y - radius <= y && this.startPoint.y + radius >= y)) &&
        x > this.startPoint.x - radius &&
        x < this.startPoint.x + radius
      );
    }

    if (this.startPoint.y === this.endPoint.y) {
    
    
      //Horizontal line, so the vicinity area is a rectangle
      return (
        ((this.startPoint.x - radius <= x && this.endPoint.x + radius >= x) || (this.endPoint.x - radius <= x && this.startPoint.x + radius >= x)) &&
        y > this.startPoint.y - radius &&
        y < this.startPoint.y + radius
      );
    }

    let startX = mathMin(this.endPoint.x, this.startPoint.x);
    let startY = mathMin(this.endPoint.y, this.startPoint.y);
    let endX = mathMax(this.endPoint.x, this.startPoint.x);
    let endY = mathMax(this.endPoint.y, this.startPoint.y);

    /*We will compute the distance from point to the line
     * by using the algorithm from
     * http://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line
     * */

    //First we need to find a,b,c of the line equation ax + by + c = 0
    let a = this.endPoint.y - this.startPoint.y;
    let b = this.startPoint.x - this.endPoint.x;
    let c = -(this.startPoint.x * this.endPoint.y - this.endPoint.x * this.startPoint.y);

    //Secondly we get the distance 
    let d = mathAbs((a * x + b * y + c) / mathSqrt(mathPow(a, 2) + mathPow(b, 2)));

    //Thirdly we get coordinates of closest line's point to target point
    let closestX = (b * (b * x - a * y) - a * c) / (mathPow(a, 2) + mathPow(b, 2));
    let closestY = (a * (-b * x + a * y) - b * c) / (mathPow(a, 2) + mathPow(b, 2));

    let r =
      (d <= radius && endX >= closestX && closestX >= startX && endY >= closestY && closestY >= startY) || //the projection of the point falls INSIDE of the segment
      this.startPoint.near(x, y, radius) ||
      this.endPoint.near(x, y, radius); //the projection of the point falls OUTSIDE of the segment

    return r;
  }

GeoLine의 일부 기본 메소드

getPoint 함수

이 함수의 기능은 끝점을 얻은 다음 반환할 배열을 형성하는 것입니다. 가장 중요한 것은 시작점과 끝점을 저장하도록 배열을 초기화한 다음 이를 반환하는 것입니다.

  getPoints() {
    
    
    let points = [];
    points.push(this.startPoint);
    points.push(this.endPoint);
    return points;
  }

getPoint 함수

이 함수의 기능은 지정된 백분율에 대한 포인트를 얻는 것이며 매개변수 t는 백분율입니다. 이 백분율은 주로 비율을 계산한 다음 현재 위치 정보를 계산하고 t를 통해 현재 지점을 통과한 다음 반환하여 결정됩니다.

  getPoint(t) {
    
    
    let xp = t * (this.endPoint.x - this.startPoint.x) + this.startPoint.x;
    let yp = t * (this.endPoint.y - this.startPoint.y) + this.startPoint.y;
    return new GeoPoint(xp, yp);
  }

복제 기능

이 함수의 주요 기능은 새로운 직선을 반환하는 것이며 직선의 정보는 완전히 동일합니다. 즉, 복제됩니다.

  clone() {
    
    
    let ret = new GeoLine(this.startPoint.clone(), this.endPoint.clone());
    return ret;
  }

기능이 같음

이 함수의 주요 기능은 현재 라인 세그먼트가 같은지 판단하는 것입니다.먼저 유형을 판단합니다.입력이 라인 세그먼트가 아니면 직접 리턴합니다.두번째, 두 라인의 시작점이 다음과 같은지 판단합니다. 같은.

  equals(anotherLine) {
    
    
    if (!(anotherLine instanceof GeoLine)) {
    
    
      return false;
    }
    return this.startPoint.equals(anotherLine.startPoint) && this.endPoint.equals(anotherLine.endPoint);
  }

요약하다

이상은 GeoLine에 대한 모든 내용입니다.가장 중요한 두 가지 방법은 점이 이 라인에 있는지 또는 근처에 있는지를 결정하는 포함 및 근처 방법입니다.두 번째로, 우리는 또한 그들 자신의 방법에 대해 논의했습니다.
이상으로 GeoLine.js에 대한 분석을 마쳤으며, 다음 글에서는 이 두 차례에 걸쳐 학습한 점과 선에 대한 지식을 활용하여 다른 기하 모델을 분석하도록 하겠습니다.