Files
ttrpg-tools/src/components/utils/dimensions.ts
T
2026-02-27 12:24:51 +08:00

74 lines
2.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import type { Dimensions } from '../types';
export interface DimensionOptions {
size: string;
bleed: string;
padding: string;
grid: string;
}
/**
* 解析卡牌尺寸和网格配置
*/
export function calculateDimensions(options: DimensionOptions): Dimensions {
const [width, height] = options.size.split('x').map(Number);
const [bleedW, bleedH] = options.bleed.includes('x')
? options.bleed.split('x').map(Number)
: [Number(options.bleed), Number(options.bleed)];
const [padW, padH] = options.padding.includes('x')
? options.padding.split('x').map(Number)
: [Number(options.padding), Number(options.padding)];
// 实际卡牌尺寸(含出血)
const cardWidth = width + bleedW * 2;
const cardHeight = height + bleedH * 2;
// 网格区域尺寸(减去 padding)
const gridAreaWidth = width - padW * 2;
const gridAreaHeight = height - padH * 2;
// 解析网格
const [gridW, gridH] = options.grid.split('x').map(Number);
// 每个网格单元的尺寸(mm
const cellWidth = gridAreaWidth / gridW;
const cellHeight = gridAreaHeight / gridH;
// 网格区域起点(相对于卡牌左上角,含 bleed 和 padding
const gridOriginX = bleedW + padW;
const gridOriginY = bleedH + padH;
return {
cardWidth,
cardHeight,
gridAreaWidth,
gridAreaHeight,
cellWidth,
cellHeight,
gridW,
gridH,
gridOriginX,
gridOriginY
};
}
/**
* 计算 layer 位置样式(单位:mm)
*/
export function getLayerStyle(
layer: { x1: number; y1: number; x2: number; y2: number },
dims: Dimensions
): { left: string; top: string; width: string; height: string } {
const left = (layer.x1 - 1) * dims.cellWidth;
const top = (layer.y1 - 1) * dims.cellHeight;
const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
return {
left: `${left}mm`,
top: `${top}mm`,
width: `${width}mm`,
height: `${height}mm`
};
}