本文整理匯總了TypeScript中@/renderers/d3-wave/util.getTextDimensions函數的典型用法代碼示例。如果您正苦於以下問題:TypeScript getTextDimensions函數的具體用法?TypeScript getTextDimensions怎麽用?TypeScript getTextDimensions使用的例子?那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了getTextDimensions函數的4個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: getZLabel
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);
}
示例2: getYLabel
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,
//.........這裏部分代碼省略.........
示例3: getXLabel
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) {
//.........這裏部分代碼省略.........
示例4: getWLabel
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;
//.........這裏部分代碼省略.........