hypercross/ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: corner radius

Browse Source
This commit is contained in:
hypercross
2026-03-15 01:31:16 +08:00
parent fdc5a4656f
commit eef72a043b
5 changed files with 399 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/md-deck/PltPreview.tsx
+187 -27
View File
@@ -9,6 +9,7 @@ export interface PltPreviewProps {
cardHeight: number;
shape: CardShape;
bleed: number;
cornerRadius: number;
onClose: () => void;
}
@@ -19,6 +20,72 @@ export interface CardPath {
centerX: number;
centerY: number;
pathD: string;
startPoint: [number, number];
endPoint: [number, number];
}
/**
* 生成带圆角的矩形路径点
* @param width 矩形宽度
* @param height 矩形高度
* @param cornerRadius 圆角半径（mm）
* @param segmentsPerCorner 每个圆角的分段数
*/
function getRoundedRectPoints(
width: number,
height: number,
cornerRadius: number,
segmentsPerCorner: number = 4
): [number, number][] {
const points: [number, number][] = [];
const r = Math.min(cornerRadius, width / 2, height / 2);
if (r <= 0) {
// 无圆角，返回普通矩形
points.push([0, 0]);
points.push([width, 0]);
points.push([width, height]);
points.push([0, height]);
return points;
}
// 左上角圆角（从顶部开始，顺时针）
for (let i = 0; i < segmentsPerCorner; i++) {
const angle = (Math.PI / 2) * (i / segmentsPerCorner);
points.push([
r + r * Math.cos(angle - Math.PI / 2),
r + r * Math.sin(angle - Math.PI / 2)
]);
}
// 右上角圆角
for (let i = 0; i < segmentsPerCorner; i++) {
const angle = (Math.PI / 2) * (i / segmentsPerCorner);
points.push([
width - r + r * Math.cos(angle),
r + r * Math.sin(angle)
]);
}
// 右下角圆角
for (let i = 0; i < segmentsPerCorner; i++) {
const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI / 2;
points.push([
width - r + r * Math.cos(angle),
height - r + r * Math.sin(angle)
]);
}
// 左下角圆角
for (let i = 0; i < segmentsPerCorner; i++) {
const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI;
points.push([
r + r * Math.cos(angle),
height - r + r * Math.sin(angle)
]);
}
return points;
}
/**
@@ -27,8 +94,13 @@ export interface CardPath {
function getCardShapePoints(
shape: CardShape,
width: number,
height: number
height: number,
cornerRadius: number = 0
): [number, number][] {
if (shape === 'rectangle' && cornerRadius > 0) {
return getRoundedRectPoints(width, height, cornerRadius);
}
const points: [number, number][] = [];
switch (shape) {
@@ -115,6 +187,59 @@ function getPointOnPath(points: [number, number][], progress: number): [number,
];
}
/**
* 将路径点转换为 SVG path 命令
*/
function pointsToSvgPath(points: [number, number][], closed = true): string {
if (points.length === 0) return '';
const [startX, startY] = points[0];
let d = `M ${startX} ${startY}`;
for (let i = 1; i < points.length; i++) {
const [x, y] = points[i];
d += ` L ${x} ${y}`;
}
if (closed) {
d += ' Z';
}
return d;
}
/**
* 生成空走路径（抬刀移动路径）
*/
function generateTravelPaths(
cardPaths: CardPath[],
a4Height: number
): [number, number][][] {
const travelPaths: [number, number][][] = [];
// 起点：左上角 (0, a4Height) - 注意 SVG 坐标 Y 向下，plotter 坐标 Y 向上
const startPoint: [number, number] = [0, a4Height];
if (cardPaths.length === 0) {
return travelPaths;
}
// 从起点到第一张卡的起点
travelPaths.push([startPoint, cardPaths[0].startPoint]);
// 卡片之间的移动
for (let i = 0; i < cardPaths.length - 1; i++) {
const currentEnd = cardPaths[i].endPoint;
const nextStart = cardPaths[i + 1].startPoint;
travelPaths.push([currentEnd, nextStart]);
}
// 从最后一张卡返回起点
travelPaths.push([cardPaths[cardPaths.length - 1].endPoint, startPoint]);
return travelPaths;
}
/**
* PLT 预览组件 - 显示切割路径预览
*/
@@ -122,6 +247,9 @@ export function PltPreview(props: PltPreviewProps) {
const a4Width = 297; // 横向 A4
const a4Height = 210;
// 使用传入的圆角值，但也允许用户修改
const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);
// 收集所有卡片路径
const cardPaths: CardPath[] = [];
let pathIndex = 0;
@@ -134,7 +262,7 @@ export function PltPreview(props: PltPreviewProps) {
for (const card of page.cards) {
if (card.side !== 'front') continue;
const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight);
const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight, cornerRadius());
const pagePoints = shapePoints.map(([x, y]) => [
card.x + props.bleed + x,
a4Height - (card.y + props.bleed + y)
@@ -143,17 +271,27 @@ export function PltPreview(props: PltPreviewProps) {
const center = calculateCenter(pagePoints);
const pathD = pointsToSvgPath(pagePoints);
// 起点和终点（对于闭合路径是同一点）
const startPoint = pagePoints[0];
const endPoint = pagePoints[pagePoints.length - 1];
cardPaths.push({
pageIndex: page.pageIndex,
cardIndex: pathIndex++,
points: pagePoints,
centerX: center.x,
centerY: center.y,
pathD
pathD,
startPoint,
endPoint
});
}
}
// 生成空走路径
const travelPaths = generateTravelPaths(cardPaths, a4Height);
const travelPathD = travelPaths.map(path => pointsToSvgPath(path, false)).join(' ');
// 生成 HPGL 代码用于下载
const allPaths = cardPaths.map(p => p.points);
const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
@@ -175,6 +313,11 @@ export function PltPreview(props: PltPreviewProps) {
URL.revokeObjectURL(url);
};
const handleCornerRadiusChange = (e: Event) => {
const target = e.target as HTMLInputElement;
setCornerRadius(Number(target.value));
};
return (
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
<div class="min-h-screen py-20 px-4">
@@ -182,6 +325,18 @@ export function PltPreview(props: PltPreviewProps) {
<div class="fixed top-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-3 flex items-center gap-4 z-50">
<h2 class="text-base font-bold m-0">PLT 切割预览</h2>
<div class="flex items-center gap-2">
<label class="text-sm text-gray-600">圆角 (mm):</label>
<input
type="number"
min="0"
max="10"
step="0.5"
value={cornerRadius()}
onInput={handleCornerRadiusChange}
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
/>
</div>
<div class="flex items-center gap-2 flex-1">
<button
onClick={handleDownload}
class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-1"
@@ -237,10 +392,20 @@ export function PltPreview(props: PltPreviewProps) {
stroke-width="0.2"
/>
{/* 空走路径（虚线） */}
<Show when={travelPathD}>
<path
d={travelPathD}
fill="none"
stroke="#999"
stroke-width="0.2"
stroke-dasharray="2 2"
/>
</Show>
{/* 切割路径 */}
<For each={pageCardPaths}>
{(path) => {
return (
<g>
{/* 切割路径 */}
@@ -253,8 +418,8 @@ export function PltPreview(props: PltPreviewProps) {
{/* 动画小球 */}
<circle
r="0.8"
fill="#ef4444"
r="0.8"
fill="#ef4444"
>
<animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
</animateMotion>
@@ -287,28 +452,23 @@ export function PltPreview(props: PltPreviewProps) {
}}
</For>
</div>
{/* 图例说明 */}
<div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 flex items-center gap-4 z-50">
<div class="flex items-center gap-2">
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #999" }}></div>
<span class="text-sm text-gray-600">空走路径</span>
</div>
<div class="flex items-center gap-2">
<div class="w-6 h-0.5" style={{ "border-bottom": "2px solid #3b82f6" }}></div>
<span class="text-sm text-gray-600">切割路径</span>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-red-500"></div>
<span class="text-sm text-gray-600">刀头</span>
</div>
</div>
</div>
</div>
);
}
/**
* 将路径点转换为 SVG path 命令
*/
function pointsToSvgPath(points: [number, number][], closed = true): string {
if (points.length === 0) return '';
const [startX, startY] = points[0];
let d = `M ${startX} ${startY}`;
for (let i = 1; i < points.length; i++) {
const [x, y] = points[i];
d += ` L ${x} ${y}`;
}
if (closed) {
d += ' Z';
}
return d;
}