TypeScript DebugWave.drawTextBelowPoint方法代码示例

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

//.........这里部分代码省略.........