TypeScript DebugWave.drawLine方法代碼示例

export function getZLabel(peak: Peak, text: string, font: string): Label | null {
  const TEST_FONT_SIZE = 3000;

  const rightMidpoint = new Point(peak.topRight.x, (peak.topRight.y + peak.bottomRight.y) / 2);
  const leftMidpoint = new Point(peak.topLeft.x, (peak.topLeft.y + peak.bottomLeft.y) / 2);
  const centerPoint = new Point(peak.top.x, (leftMidpoint.y + rightMidpoint.y) / 2);

  // Draw two lines from the center point:
  // Forward: Bottom left to top right
  // Backward: Top left to bottom right
  const textDimensions = getTextDimensions(text, font, TEST_FONT_SIZE);
  const forwardLine = new InfiniteLine(textDimensions.slope, centerPoint);
  const backwardLine = new InfiniteLine(textDimensions.slope * -1, centerPoint);


  if (DebugWave.isEnabled) {
    DebugWave.drawLine(forwardLine, 'black');
    DebugWave.drawLine(backwardLine, 'white');
    DebugWave.drawPoint(leftMidpoint, 'red');
    DebugWave.drawPoint(centerPoint, 'green');
    DebugWave.drawPoint(rightMidpoint, 'blue');
  }

  // Check all intersections with the peak
  // TODO better naming here
  const checkIntersections = ['A', 'B', 'C', 'D'];
  let minVerticalDistance = Number.MAX_VALUE;
  checkIntersections.forEach((lineName) => {
    const checkLine = (peak as any)[lineName];
    const againstLine = (checkLine.slope < 0) ? forwardLine : backwardLine;

    const checkIntersect = checkLine.getIntersect(againstLine);

    // If there is no intersect, we don't have to worry about that
    // line segment reducing the space for our text.
    if (checkIntersect) {
      const verticalDistance = Math.abs(checkIntersect.y - centerPoint.y);

      if (verticalDistance < minVerticalDistance) {
        minVerticalDistance = verticalDistance;
      }
    }

  });

  // The min vertical distance gives us how much height we have to work with
  const boxHeight = Math.floor(minVerticalDistance * 2);
  const heightToFontSizeRatio = textDimensions.height / TEST_FONT_SIZE;
  const fontSize = Math.floor(boxHeight / heightToFontSizeRatio);

  // Position the text on the bottom left corner
  const textPositionX = centerPoint.x - minVerticalDistance / textDimensions.slope;
  const textPositionY = centerPoint.y - boxHeight / 2;

  if (DebugWave.isEnabled) {
    DebugWave.drawPoint(new Point(textPositionX, textPositionY), 'red');
  }

  return new Label(text, textPositionX, textPositionY, font, fontSize);
}

const calculateFontSize = (
  text: string,
  startPoint: Point,
  fontSlope: number,
  opposite: LineSegment,
  heightToFontSizeRatio: number,
) => {
  // Where is our end point?
  const fontLine = new InfiniteLine(fontSlope, startPoint);
  let endPoint = fontLine.getIntersect(opposite);

  if (DebugWave.isEnabled) {
    DebugWave.drawLine(fontLine, 'cyan');
  }

  if (!endPoint) {
    // If we miss opposite altogether, let's just stop there.
    endPoint = fontLine.getPointOnLineAtX(
      Math.min(
        opposite.start.x,
        opposite.end.y,
      ),
    );
    store.commit('log', `Had to emergency fix ${text}`);
    if (!endPoint) {
      return null;
    }
  }

  const boxHeight = Math.abs(startPoint.y - endPoint.y);
  const fontSize = Math.floor(boxHeight / heightToFontSizeRatio);

  return fontSize;
};

//.........這裏部分代碼省略.........
    // x = (y - b) / m;
    leftCollisionX = (testY - leftCollidingLine.intercept) / leftCollidingLine.slope;
    rightCollisionX = (testY - rightCollidingLine.intercept) / rightCollidingLine.slope;

    // If any of these collisions are outside the bounds, cut them off
    // TODO this could be made even better by allowing text to cross multiple peaks
    // for particularly big areas
    if (leftCollisionX < peak.topLeft.x || leftCollisionX === Number.POSITIVE_INFINITY) {
      leftCollisionX = peak.topLeft.x;
    }
    if (rightCollisionX > peak.topRight.x || rightCollisionX === Number.NEGATIVE_INFINITY) {
      rightCollisionX = peak.topRight.x;
    }

    // Update maximum
    const width = rightCollisionX - leftCollisionX;
    if (width > maxWidth) {
      maxWidth = width;
      maxWidthY = testY;
      maxWidthLeftCollisionX = leftCollisionX;
    }
  }

  // 2. Get the "slope" of our text. This is effectively a diagonal that we're going
  // to try to expand as much as possible to fit our text in
  const textDimensions = getTextDimensions(text, font, TEST_FONT_SIZE);
  const heightToFontSizeRatio = textDimensions.height / TEST_FONT_SIZE;
  let textSlope = textDimensions.slope;

  // The slope of our text should have the opposite slope to our peak
  if (!isX1) {
    textSlope *= -1;
  }

  if (!maxWidthLeftCollisionX || !maxWidthY) {
    return null;
  }

  const textCenter = new Point(maxWidthLeftCollisionX + maxWidth / 2, maxWidthY);

  // 3. Now figure out how long we can make this line (extend it up and down)
  const textLine = new InfiniteLine(textSlope, textCenter);
  let leftTextCollision = leftCollidingLine.getIntersect(textLine);
  let rightTextCollision = rightCollidingLine.getIntersect(textLine);

  // There are two situations where we might not collide:
  // 1. The textLine actually hits a different line on the top/bottom
  // --> We need to check if the other line has a collision
  // 2. The textline goes through a wide gap on left/right
  // --> Use the outer bounds
  // Situation #1
  if (!leftTextCollision) {
    if (isX1) {
      leftTextCollision = peak.D.getIntersect(textLine);
    } else {
      leftTextCollision = peak.B.getIntersect(textLine);
    }
  }
  if (!rightTextCollision) {
    if (isX1) {
      rightTextCollision = peak.A.getIntersect(textLine);
    } else {
      rightTextCollision = peak.C.getIntersect(textLine);
    }
  }

  // Situation #2
  if (!leftTextCollision) {
    leftTextCollision = textLine.getPointOnLineAtX(leftCollidingLine.start.x);
    if (!leftTextCollision) {
      return null;
    }
  }
  if (!rightTextCollision) {
    rightTextCollision = textLine.getPointOnLineAtX(rightCollidingLine.end.x);
    if (!rightTextCollision) {
      return null;
    }
  }

  // 4. Figure out what font size we can fit (same as the height of the line we just extended)
  const boxHeight = Math.abs(leftTextCollision.y - rightTextCollision.y);
  const fontSize = Math.floor(boxHeight / heightToFontSizeRatio);

  if (DebugWave.isEnabled) {
    DebugWave.drawLine(new LineSegment(
      new Point(leftTextCollision.x, maxWidthY),
      new Point(rightTextCollision.y, maxWidthY),
    ), 'green');
    DebugWave.drawLine(textLine, 'black');
    DebugWave.drawPoint(leftTextCollision, 'red');
    DebugWave.drawPoint(textCenter, 'blue');
    DebugWave.drawPoint(rightTextCollision, 'green');
  }

  const textX = leftTextCollision.x;
  const textY = Math.min(leftTextCollision.y, rightTextCollision.y);

  return new Label(text, textX, textY, font, fontSize);
}

export function getWLabel(peak: Peak, text: string, font: string): Label | null {
  // Config
  const STARTING_FONT_SIZE = 5;
  const FONT_SIZE_INTERVAL = 2;
  const FONT_SIZE_SAFETY_SCALE = 0.9;

  let fontSize: number = STARTING_FONT_SIZE;
  let leftCollision;
  let rightCollision;
  let verticalPointyBound;
  let horizontalLeftBound;
  let horizontalRightBound;
  let textDimensions;

  // If we don't have enough space, don't even bother
  const minimumHeightRequired = getTextDimensions(text, font, fontSize).height;
  if ((peak.top.y - peak.bottom.y) < minimumHeightRequired) {
    return null;
  }

  // Slightly different code for "w1" vs "w2"
  const isW1 = (peak.A.slope <= 0);

  // We never go past the pointy bound. We expand up/down from it.
  if (isW1) {
    verticalPointyBound = peak.top.y;
    horizontalLeftBound = peak.C;
    horizontalRightBound = peak.D;
  } else {
    verticalPointyBound = peak.bottom.y;
    horizontalLeftBound = peak.A;
    horizontalRightBound = peak.B;
  }


  // Loop
  // TODO explain
  while (true) {
    let verticalInnerBound;
    textDimensions = getTextDimensions(text, font, fontSize);
    if (isW1) {
      verticalInnerBound = verticalPointyBound - textDimensions.height;
    } else {
      verticalInnerBound = verticalPointyBound + textDimensions.height;
    }

    // If we start going outisde our top/bottom, we need to stop
    if (verticalInnerBound > peak.top.y || verticalInnerBound < peak.bottom.y) {
      break;
    }

    // If we draw a line above our text box, how far can it stretch
    // to the left and right before it hits the sides
    // of our text box?
    const topLine = new InfiniteLine(0, new Point(0, verticalInnerBound));
    leftCollision = topLine.getIntersect(horizontalLeftBound);
    rightCollision = topLine.getIntersect(horizontalRightBound);

    if (!leftCollision) {
      leftCollision = new Point(peak.topLeft.x, verticalInnerBound);
    }
    if (!rightCollision) {
      rightCollision = new Point(peak.topRight.x, verticalInnerBound);
    }

    // This is the available width at this font size
    const availableWidth = rightCollision.x - leftCollision.x;

    if (DebugWave.isEnabled) {
      DebugWave.drawLine(topLine, 'black');
      DebugWave.drawPoint(leftCollision, 'red');
      DebugWave.drawPoint(rightCollision, 'green');
      DebugWave.drawTextBelowPoint(rightCollision, fontSize.toString());
    }

    if (textDimensions.width < availableWidth) {
      fontSize += FONT_SIZE_INTERVAL;
    } else {
      break;
    }
  }

  fontSize *= FONT_SIZE_SAFETY_SCALE;

  // Center the text vertically
  textDimensions = getTextDimensions(text, font, fontSize);
  let labelY;
  if (isW1) {
    labelY = peak.top.y - textDimensions.height;
  } else {
    labelY = peak.bottom.y;
  }

  // Final sanity check
  if (!leftCollision) {
    return null;
  }

  const labelX = leftCollision.x;

//.........這裏部分代碼省略.........