TypeScript util.getTextDimensions函數代碼示例

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);
}

export function getYLabel(peak: Peak, text: string, font: string): Label | null {
  const TEST_FONT_SIZE = 3000;
  const ITERATION_CACHE_SIZE = 2;
  const MAXIMUM_ITERATIONS = 100;
  const TYPE = {
    Y1: 0,
    Y2: 1,
    Y3: 2,
    Y4: 3,
  };
  const SETUP_CONFIG: { [key: number]: WaveConfig } = {};
  SETUP_CONFIG[TYPE.Y1] = {
    startPoint: 'bottom',
    slopeModifier: -1,
    opposite: 'A',
    adjacent: 'D',
    across: 'B',
  };
  SETUP_CONFIG[TYPE.Y2] = {
    startPoint: 'bottom',
    slopeModifier: 1,
    opposite: 'B',
    adjacent: 'C',
    across: 'A',
  };
  SETUP_CONFIG[TYPE.Y3] = {
    startPoint: 'top',
    slopeModifier: 1,
    opposite: 'C',
    adjacent: 'B',
    across: 'D',
  };
  SETUP_CONFIG[TYPE.Y4] = {
    startPoint: 'top',
    slopeModifier: -1,
    opposite: 'D',
    adjacent: 'A',
    across: 'C',
  };

  /*
    TODO merge this and the first method to figure out if it's Y type
  */
  let peakType: number;
  if (peak.A.slope < 0) {
    peakType = TYPE.Y3;
  } else if (peak.B.slope > 0) {
    peakType = TYPE.Y4;
  } else if (peak.C.slope > 0) {
    peakType = TYPE.Y1;
  } else {
    peakType = TYPE.Y2;
  }

  if (DebugWave.isEnabled) {
    store.commit('log', `Peak type: ${peakType}`);
  }



  /*
    Set up initial state
  */
  const cfg = SETUP_CONFIG[peakType];
  let startPoint = (peak as any)[cfg.startPoint];
  const opposite = (peak as any)[cfg.opposite];
  const adjacent = (peak as any)[cfg.adjacent];
  const across = (peak as any)[cfg.across];
  const textDimensions = getTextDimensions(text, font, TEST_FONT_SIZE);
  const heightToFontSizeRatio = textDimensions.height / TEST_FONT_SIZE;
  const fontSlope = textDimensions.slope * cfg.slopeModifier;

  // Hold on to previous iterations to check for bounces
  const iterationCache = new Array(ITERATION_CACHE_SIZE);
  let shouldIterate = true;
  let iterationCount = 0;
  let fontSize: number = 0;

  // Iterate!
  while (shouldIterate) {

    if (DebugWave.isEnabled) {
      DebugWave.drawPoint(startPoint, 'red');
      DebugWave.drawTextBelowPoint(startPoint, iterationCount.toString());
      store.commit('log', `Iteration ${iterationCount}: ${JSON.stringify(startPoint)}`);
    }
    let newStartPoint = performIteration(startPoint, fontSlope, opposite, across, adjacent, peakType);

    if (!newStartPoint) {
      return null;
    }

    // Calculate our new font size
    const newFontSize = calculateFontSize(text, newStartPoint, fontSlope, opposite, heightToFontSizeRatio);
    if (!newFontSize) {
      return null;
    }
    fontSize = newFontSize;

    // Sometimes we "bounce" between two (or three) different spots. In this case,
//.........這裏部分代碼省略.........

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

  const isX1 = peak.A.slope <= 0;

  // 1. Running from bottom to top, find the maximum width point
  let maxWidth = 0;
  let maxWidthY;
  let maxWidthLeftCollisionX;
  let leftCollisionX;
  let rightCollisionX;
  const bottomY = peak.bottom.y + 1;
  const topY = peak.top.y - 1;

  // If there is less than a pixel between the top and bottom,
  // we can't fit any meaningful text here.
  if ((topY - bottomY) < MINIMUM_SPACE_PX) {
    return null;
  }

  let leftCollidingLine;
  let rightCollidingLine;
  if (isX1) {
    leftCollidingLine = peak.C;
    rightCollidingLine = peak.B;
  } else {
    leftCollidingLine = peak.A;
    rightCollidingLine = peak.D;
  }

  for (let testY = bottomY; testY < topY; testY++) {
    // 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) {
//.........這裏部分代碼省略.........

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;

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