Compare commits
No commits in common. "7aba5d0c81e335e23b86152af64b69ce7e1957f1" and "0ed95291ba19103065c3c2a91fcc78b58ec424d2" have entirely different histories.
7aba5d0c81
...
0ed95291ba
|
|
@ -1,14 +1,12 @@
|
|||
import { Component, createSignal, createEffect, onCleanup, Show, createResource, createMemo } from 'solid-js';
|
||||
import { Component, createSignal, createEffect, onCleanup, Show, createResource } from 'solid-js';
|
||||
import { parseMarkdown } from '../markdown';
|
||||
import { extractSection } from '../data-loader';
|
||||
import mermaid from 'mermaid';
|
||||
import {getIndexedData} from "../data-loader/file-index";
|
||||
import { resolvePath } from './utils/path';
|
||||
|
||||
export interface ArticleProps {
|
||||
src: string;
|
||||
section?: string; // 指定要显示的标题（不含 #）
|
||||
iconPath?: string; // 图标路径前缀，默认为 "./assets"，空字符串表示禁用
|
||||
onLoaded?: () => void;
|
||||
onError?: (error: Error) => void;
|
||||
class?: string; // 额外的 class 用于样式控制
|
||||
|
|
@ -30,12 +28,6 @@ export const Article: Component<ArticleProps> = (props) => {
|
|||
fetchArticleContent
|
||||
);
|
||||
|
||||
// 解析 iconPath，默认为 "./assets"，空字符串表示禁用
|
||||
const iconPrefix = createMemo(() => {
|
||||
if (props.iconPath === '') return undefined; // 空字符串禁用图标前缀
|
||||
return resolvePath(props.src, props.iconPath ?? "./assets");
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
const data = content();
|
||||
if (data) {
|
||||
|
|
@ -58,7 +50,7 @@ export const Article: Component<ArticleProps> = (props) => {
|
|||
<div class="text-red-500">加载失败：{content.error?.message}</div>
|
||||
</Show>
|
||||
<Show when={!content.loading && !content.error && content()}>
|
||||
<div class="relative" innerHTML={parseMarkdown(content()!, iconPrefix())} />
|
||||
<div class="relative" innerHTML={parseMarkdown(content()!)} />
|
||||
</Show>
|
||||
</article>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ export function CardPreview(props: CardPreviewProps) {
|
|||
let cardRef: HTMLDivElement | undefined;
|
||||
|
||||
return (
|
||||
<div class="flex justify-center drop-shadow">
|
||||
<div class="flex justify-center">
|
||||
<Show when={store.state.activeTab < store.state.cards.length}>
|
||||
<div
|
||||
ref={cardRef}
|
||||
class="relative bg-white border border-gray-300 overflow-hidden"
|
||||
class="relative bg-white border border-gray-300 shadow-lg overflow-hidden"
|
||||
classList={{ 'select-none': store.state.isEditing }}
|
||||
style={{
|
||||
width: `${store.state.dimensions?.cardWidth}mm`,
|
||||
|
|
|
|||
|
|
@ -1,229 +0,0 @@
|
|||
import { createSignal, For, Show, createMemo } from 'solid-js';
|
||||
import { parsePlt, extractCutPaths } from '../../plotcutter/parser';
|
||||
import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
|
||||
import type { CardPath } from '../../plotcutter/types';
|
||||
import { calculateCenter, contourToSvgPath } from '../../plotcutter/contour';
|
||||
|
||||
export interface PltPreviewProps {
|
||||
/** PLT 文件内容 */
|
||||
pltCode: string;
|
||||
/** 关闭回调 */
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 PLT 代码解析并生成卡片路径数据
|
||||
*/
|
||||
function parsePltToCardPaths(pltCode: string): {
|
||||
cutPaths: [number, number][][];
|
||||
cardPaths: CardPath[];
|
||||
width: number;
|
||||
height: number;
|
||||
} {
|
||||
const parsed = parsePlt(pltCode);
|
||||
const cutPaths = extractCutPaths(parsed, 5); // 5mm 阈值
|
||||
|
||||
// 将解析的路径转换为 CardPath 格式用于显示
|
||||
const cardPaths: CardPath[] = cutPaths.map((points, index) => {
|
||||
const center = calculateCenter(points);
|
||||
const pathD = contourToSvgPath(points);
|
||||
const startPoint = points[0];
|
||||
const endPoint = points[points.length - 1];
|
||||
|
||||
return {
|
||||
pageIndex: 0,
|
||||
cardIndex: index,
|
||||
points,
|
||||
centerX: center.x,
|
||||
centerY: center.y,
|
||||
pathD,
|
||||
startPoint,
|
||||
endPoint
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
cutPaths,
|
||||
cardPaths,
|
||||
width: parsed.width || 0,
|
||||
height: parsed.height || 0
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* PLT 预览组件 - 基于 PLT 文本解析显示切割路径预览
|
||||
*
|
||||
* 所有显示参数（尺寸、路径等）都从 PLT 文本解析获取。
|
||||
*/
|
||||
export function PltPreview(props: PltPreviewProps) {
|
||||
// 解析传入的 PLT 代码
|
||||
const parsedData = createMemo(() => {
|
||||
if (!props.pltCode) {
|
||||
return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[], width: 0, height: 0 };
|
||||
}
|
||||
return parsePltToCardPaths(props.pltCode);
|
||||
});
|
||||
|
||||
// 生成空走路径
|
||||
const travelPathD = createMemo(() => {
|
||||
const cardPaths = parsedData().cardPaths;
|
||||
const height = parsedData().height;
|
||||
if (cardPaths.length === 0) return '';
|
||||
const travelPaths = generateTravelPaths(cardPaths, height);
|
||||
return travelPathsToSvg(travelPaths);
|
||||
});
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!props.pltCode) {
|
||||
alert('没有可导出的卡片');
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([props.pltCode], { type: 'application/vnd.hp-HPGL' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
||||
<div class="min-h-screen py-20 px-4">
|
||||
{/* 头部控制栏 */}
|
||||
<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 flex-1">
|
||||
<Show when={parsedData().width > 0}>
|
||||
<span class="text-sm text-gray-500">
|
||||
尺寸：{parsedData().width.toFixed(1)}mm × {parsedData().height.toFixed(1)}mm
|
||||
</span>
|
||||
</Show>
|
||||
<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"
|
||||
disabled={parsedData().cardPaths.length === 0}
|
||||
>
|
||||
📥 下载 PLT
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={props.onClose}
|
||||
class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1.5 rounded text-sm font-medium cursor-pointer"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 预览区域 */}
|
||||
<Show
|
||||
when={parsedData().width > 0 && parsedData().height > 0}
|
||||
fallback={
|
||||
<div class="flex items-center justify-center h-screen text-gray-500">
|
||||
无法解析 PLT 文件尺寸
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class="flex flex-col items-center gap-8 mt-20">
|
||||
<svg
|
||||
class="bg-white shadow-xl"
|
||||
viewBox={`0 0 ${parsedData().width} ${parsedData().height}`}
|
||||
style={{
|
||||
width: `${Math.min(parsedData().width, 800)}mm`,
|
||||
height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}mm`
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* 边框 */}
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width={parsedData().width}
|
||||
height={parsedData().height}
|
||||
fill="none"
|
||||
stroke="#ccc"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
|
||||
{/* 空走路径（虚线） */}
|
||||
<Show when={travelPathD()}>
|
||||
<path
|
||||
d={travelPathD()}
|
||||
fill="none"
|
||||
stroke="#999"
|
||||
stroke-width="0.2"
|
||||
stroke-dasharray="2 2"
|
||||
/>
|
||||
</Show>
|
||||
|
||||
{/* 切割路径 */}
|
||||
<For each={parsedData().cardPaths}>
|
||||
{(path) => {
|
||||
return (
|
||||
<g>
|
||||
{/* 切割路径 */}
|
||||
<path
|
||||
d={path.pathD}
|
||||
fill="none"
|
||||
stroke="#3b82f6"
|
||||
stroke-width="0.3"
|
||||
/>
|
||||
|
||||
{/* 动画小球 */}
|
||||
<circle
|
||||
r="0.8"
|
||||
fill="#ef4444"
|
||||
>
|
||||
<animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
|
||||
</animateMotion>
|
||||
</circle>
|
||||
|
||||
{/* 序号标签 */}
|
||||
<g transform={`translate(${path.centerX}, ${path.centerY})`}>
|
||||
<circle
|
||||
r="2"
|
||||
fill="white"
|
||||
stroke="#3b82f6"
|
||||
stroke-width="0.1"
|
||||
/>
|
||||
<text
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
font-size="1.5"
|
||||
fill="#3b82f6"
|
||||
font-weight="bold"
|
||||
>
|
||||
{path.cardIndex + 1}
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</svg>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 图例说明 */}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { createSignal, For, Show } from 'solid-js';
|
||||
import { For, Show } from 'solid-js';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
import { usePageLayout } from './hooks/usePageLayout';
|
||||
import { usePDFExport, type ExportOptions } from './hooks/usePDFExport';
|
||||
|
|
@ -7,7 +7,6 @@ import { getShapeSvgClipPath } from './hooks/shape-styles';
|
|||
import { PrintPreviewHeader } from './PrintPreviewHeader';
|
||||
import { PrintPreviewFooter } from './PrintPreviewFooter';
|
||||
import { CardLayer } from './CardLayer';
|
||||
import { PltPreview } from './PltPreview';
|
||||
|
||||
export interface PrintPreviewProps {
|
||||
store: DeckStore;
|
||||
|
|
@ -22,10 +21,7 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
const { store } = props;
|
||||
const { getA4Size, pages, cropMarks } = usePageLayout(store);
|
||||
const { exportToPDF } = usePDFExport(store, props.onClose);
|
||||
const { generatePltData } = usePlotterExport(store);
|
||||
|
||||
const [showPltPreview, setShowPltPreview] = createSignal(false);
|
||||
const [pltCode, setPltCode] = createSignal('');
|
||||
const { exportToPlt } = usePlotterExport(store);
|
||||
|
||||
const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
|
||||
const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
|
||||
|
|
@ -45,31 +41,20 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
await exportToPDF(pages(), cropMarks(), options);
|
||||
};
|
||||
|
||||
const handleOpenPltPreview = () => {
|
||||
const data = generatePltData();
|
||||
if (data) {
|
||||
setPltCode(data.pltCode);
|
||||
setShowPltPreview(true);
|
||||
} else {
|
||||
alert('没有可预览的卡片');
|
||||
}
|
||||
};
|
||||
|
||||
const handleClosePltPreview = () => {
|
||||
setShowPltPreview(false);
|
||||
const handleExportPlt = () => {
|
||||
exportToPlt(pages());
|
||||
};
|
||||
|
||||
return (
|
||||
<Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />}>
|
||||
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
||||
<div class="min-h-screen py-20 px-4">
|
||||
<PrintPreviewHeader
|
||||
store={store}
|
||||
pageCount={pages().length}
|
||||
onExport={handleExport}
|
||||
onOpenPltPreview={handleOpenPltPreview}
|
||||
onClose={props.onClose}
|
||||
/>
|
||||
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
||||
<div class="min-h-screen py-20 px-4">
|
||||
<PrintPreviewHeader
|
||||
store={store}
|
||||
pageCount={pages().length}
|
||||
onExport={handleExport}
|
||||
onExportPlt={handleExportPlt}
|
||||
onClose={props.onClose}
|
||||
/>
|
||||
|
||||
<PrintPreviewFooter store={store} />
|
||||
|
||||
|
|
@ -196,6 +181,5 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export interface PrintPreviewHeaderProps {
|
|||
store: DeckStore;
|
||||
pageCount: number;
|
||||
onExport: () => void;
|
||||
onOpenPltPreview: () => void;
|
||||
onExportPlt: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
|
|
@ -88,11 +88,11 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
|
|||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onClick={props.onOpenPltPreview}
|
||||
onClick={props.onExportPlt}
|
||||
class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<span>📐</span>
|
||||
<span>PLT 预览</span>
|
||||
<span>导出 PLT</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={props.onExport}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@ export const DECK_DEFAULTS = {
|
|||
GRID_W: 5,
|
||||
GRID_H: 8,
|
||||
BLEED: 1,
|
||||
PADDING: 2,
|
||||
CORNER_RADIUS: 3
|
||||
PADDING: 2
|
||||
} as const;
|
||||
|
||||
export interface DeckState {
|
||||
|
|
@ -25,7 +24,6 @@ export interface DeckState {
|
|||
gridH: number;
|
||||
bleed: number;
|
||||
padding: number;
|
||||
cornerRadius: number;
|
||||
shape: CardShape;
|
||||
fixed: boolean;
|
||||
src: string;
|
||||
|
|
@ -78,7 +76,6 @@ export interface DeckActions {
|
|||
setGridH: (grid: number) => void;
|
||||
setBleed: (bleed: number) => void;
|
||||
setPadding: (padding: number) => void;
|
||||
setCornerRadius: (cornerRadius: number) => void;
|
||||
setShape: (shape: CardShape) => void;
|
||||
|
||||
// 数据设置
|
||||
|
|
@ -149,7 +146,6 @@ export function createDeckStore(
|
|||
gridH: DECK_DEFAULTS.GRID_H,
|
||||
bleed: DECK_DEFAULTS.BLEED,
|
||||
padding: DECK_DEFAULTS.PADDING,
|
||||
cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
|
||||
shape: 'rectangle',
|
||||
fixed: false,
|
||||
src: initialSrc,
|
||||
|
|
@ -213,9 +209,6 @@ export function createDeckStore(
|
|||
setState({ padding });
|
||||
updateDimensions();
|
||||
};
|
||||
const setCornerRadius = (cornerRadius: number) => {
|
||||
setState({ cornerRadius });
|
||||
};
|
||||
const setShape = (shape: CardShape) => {
|
||||
setState({ shape });
|
||||
};
|
||||
|
|
@ -384,7 +377,6 @@ export function createDeckStore(
|
|||
setGridH,
|
||||
setBleed,
|
||||
setPadding,
|
||||
setCornerRadius,
|
||||
setShape,
|
||||
setCards,
|
||||
setActiveTab,
|
||||
|
|
|
|||
|
|
@ -1,121 +1,123 @@
|
|||
import type { DeckStore } from './deckStore';
|
||||
import { calculateSinglePageLayout, generateTravelPaths } from '../../../plotcutter/layout';
|
||||
import { pts2plotter } from '../../../plotcutter/plotter';
|
||||
|
||||
export interface PltExportData {
|
||||
/** 单页满排时的 PLT 代码 */
|
||||
pltCode: string;
|
||||
/** 排版区域宽度 (mm) */
|
||||
frameWidth: number;
|
||||
/** 排版区域高度 (mm) */
|
||||
frameHeight: number;
|
||||
/** 每页卡片数 */
|
||||
cardsPerPage: number;
|
||||
}
|
||||
import type { PageData } from './usePDFExport';
|
||||
import type { CardShape } from '../types';
|
||||
import { pts2plotter } from '../../../plotcutter';
|
||||
|
||||
export interface UsePlotterExportReturn {
|
||||
/** 生成单页满排时的 PLT 数据 */
|
||||
generatePltData: () => PltExportData | null;
|
||||
/** 下载 PLT 文件 */
|
||||
downloadPltFile: (pltCode: string) => void;
|
||||
/** 直接导出 PLT（打开下载） */
|
||||
exportToPlt: () => void;
|
||||
exportToPlt: (pages: PageData[]) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* PLT 导出 hook - 生成单页满排时的 HPGL 格式文件
|
||||
*
|
||||
* 刀路只关心单页排满的情况，不考虑实际牌组的张数。
|
||||
* PLT 坐标系统以 frameBoundsWithMargin 左上角为原点 (0,0)。
|
||||
* 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
|
||||
*/
|
||||
function getCardShapePoints(
|
||||
shape: CardShape,
|
||||
width: number,
|
||||
height: number
|
||||
): [number, number][] {
|
||||
const points: [number, number][] = [];
|
||||
|
||||
switch (shape) {
|
||||
case 'circle': {
|
||||
// 圆形：生成 36 个点近似圆
|
||||
const radius = Math.min(width, height) / 2;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
for (let i = 0; i < 36; i++) {
|
||||
const angle = (i / 36) * Math.PI * 2;
|
||||
points.push([
|
||||
centerX + radius * Math.cos(angle),
|
||||
centerY + radius * Math.sin(angle)
|
||||
]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'triangle': {
|
||||
// 正三角形：顶点向上
|
||||
points.push([width / 2, 0]);
|
||||
points.push([0, height]);
|
||||
points.push([width, height]);
|
||||
break;
|
||||
}
|
||||
case 'hexagon': {
|
||||
// 六边形：尖顶向上
|
||||
const halfW = width / 2;
|
||||
const quarterH = height / 4;
|
||||
points.push([halfW, 0]);
|
||||
points.push([width, quarterH]);
|
||||
points.push([width, height - quarterH]);
|
||||
points.push([halfW, height]);
|
||||
points.push([0, height - quarterH]);
|
||||
points.push([0, quarterH]);
|
||||
break;
|
||||
}
|
||||
case 'rectangle':
|
||||
default: {
|
||||
// 矩形：顺时针方向
|
||||
points.push([0, 0]);
|
||||
points.push([width, 0]);
|
||||
points.push([width, height]);
|
||||
points.push([0, height]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
/**
|
||||
* PLT 导出 hook - 生成 HPGL 格式文件并下载
|
||||
*/
|
||||
export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
|
||||
const bleed = () => store.state.bleed || 1;
|
||||
const cornerRadius = () => store.state.cornerRadius ?? 3;
|
||||
const cardWidth = () => store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = () => store.state.dimensions?.cardHeight || 88;
|
||||
const shape = () => store.state.shape;
|
||||
const orientation = () => store.state.printOrientation || 'landscape';
|
||||
const exportToPlt = (pages: PageData[]) => {
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
const shape = store.state.shape;
|
||||
|
||||
/**
|
||||
* 生成单页满排时的 PLT 数据
|
||||
*/
|
||||
const generatePltData = (): PltExportData | null => {
|
||||
const layout = calculateSinglePageLayout({
|
||||
cardWidth: cardWidth(),
|
||||
cardHeight: cardHeight(),
|
||||
shape: shape(),
|
||||
bleed: bleed(),
|
||||
cornerRadius: cornerRadius(),
|
||||
orientation: orientation()
|
||||
});
|
||||
// 计算所有页面的总尺寸
|
||||
const a4Width = 297; // 横向 A4
|
||||
const a4Height = 210;
|
||||
|
||||
if (layout.cardPaths.length === 0) {
|
||||
return null;
|
||||
// 收集所有卡片的轮廓点
|
||||
const allPaths: [number, number][][] = [];
|
||||
|
||||
for (const page of pages) {
|
||||
for (const card of page.cards) {
|
||||
// 只导出正面
|
||||
if (card.side !== 'front') continue;
|
||||
|
||||
// 获取卡片形状点（相对于卡片原点）
|
||||
const shapePoints = getCardShapePoints(shape, cardWidth, cardHeight);
|
||||
|
||||
// 转换点到页面坐标（Y 轴翻转：SVG Y 向下，plotter Y 向上）
|
||||
const pagePoints = shapePoints.map(([x, y]) => [
|
||||
card.x + x,
|
||||
a4Height - (card.y + y)
|
||||
] as [number, number]);
|
||||
|
||||
allPaths.push(pagePoints);
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 frameBoundsWithMargin 作为 PLT 的坐标系统
|
||||
const frameBounds = layout.frameBoundsWithMargin;
|
||||
const pltWidth = frameBounds.width;
|
||||
const pltHeight = frameBounds.height;
|
||||
if (allPaths.length === 0) {
|
||||
alert('没有可导出的卡片');
|
||||
return;
|
||||
}
|
||||
|
||||
// 将卡片路径转换为相对于 frameBoundsWithMargin 的坐标
|
||||
// 原点在 frameBoundsWithMargin 的左上角
|
||||
const relativePaths = layout.cardPaths.map(cardPath => {
|
||||
const relativePoints = cardPath.points.map(([x, y]) => {
|
||||
// 转换为相对于 frameBounds 左上角的坐标
|
||||
const relativeX = x - frameBounds.x;
|
||||
const relativeY = y - frameBounds.y;
|
||||
// 翻转 Y 轴（plotter 坐标 Y 向上，SVG 坐标 Y 向下）
|
||||
// 在 frameBounds 坐标系中，原点在左上，Y 向下为正
|
||||
// 在 plotter 坐标系中，原点在左下，Y 向上为正
|
||||
// 所以 plotterY = pltHeight - relativeY
|
||||
return [relativeX, pltHeight - relativeY] as [number, number];
|
||||
});
|
||||
return relativePoints;
|
||||
});
|
||||
// 生成 HPGL 指令
|
||||
const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1);
|
||||
|
||||
// 起点和终点都在 frameBoundsWithMargin 的左上角 (0, pltHeight)
|
||||
// 在 plotter 坐标系中，左上角是 (0, height)
|
||||
const startPoint: [number, number] = [0, pltHeight];
|
||||
const endPoint: [number, number] = [0, pltHeight];
|
||||
|
||||
// 生成 HPGL 代码
|
||||
const plotterCode = pts2plotter(relativePaths, pltWidth, pltHeight, 1, startPoint, endPoint);
|
||||
|
||||
return {
|
||||
pltCode: plotterCode,
|
||||
frameWidth: pltWidth,
|
||||
frameHeight: pltHeight,
|
||||
cardsPerPage: layout.cardsPerPage
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 下载 PLT 文件
|
||||
*/
|
||||
const downloadPltFile = (pltCode: string) => {
|
||||
const blob = new Blob([pltCode], { type: 'application/vnd.hp-HPGL' });
|
||||
// 创建 Blob 并下载
|
||||
const blob = new Blob([plotterCode], { type: 'application/vnd.hp-HPGL' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
||||
link.download = `deck-export-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
/**
|
||||
* 直接导出 PLT（打开下载）
|
||||
*/
|
||||
const exportToPlt = () => {
|
||||
const data = generatePltData();
|
||||
if (!data) {
|
||||
alert('没有可导出的卡片');
|
||||
return;
|
||||
}
|
||||
downloadPltFile(data.pltCode);
|
||||
};
|
||||
|
||||
return { generatePltData, downloadPltFile, exportToPlt };
|
||||
return { exportToPlt };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export interface CardData {
|
|||
|
||||
export type CardSide = 'front' | 'back';
|
||||
|
||||
export type { CardShape } from '../../plotcutter/contour';
|
||||
export type CardShape = 'rectangle' | 'circle' | 'triangle' | 'hexagon';
|
||||
|
||||
export interface Layer {
|
||||
prop: string;
|
||||
|
|
|
|||
|
|
@ -1,236 +0,0 @@
|
|||
import type { CardShape, ContourPoint, ContourBounds } from './types';
|
||||
|
||||
// 重新导出类型以兼容旧导入路径
|
||||
export type { CardShape, ContourPoint, ContourBounds };
|
||||
|
||||
/**
|
||||
* 生成带圆角的矩形轮廓点
|
||||
* @param width 矩形宽度
|
||||
* @param height 矩形高度
|
||||
* @param cornerRadius 圆角半径（mm）
|
||||
* @param segmentsPerCorner 每个圆角的分段数
|
||||
*/
|
||||
export 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) - Math.PI;
|
||||
points.push([
|
||||
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),
|
||||
r + r * Math.sin(angle)
|
||||
]);
|
||||
}
|
||||
|
||||
// 右下角圆角
|
||||
for (let i = 0; i <= segmentsPerCorner; i++) {
|
||||
const angle = (Math.PI / 2) * (i / segmentsPerCorner);
|
||||
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/2;
|
||||
points.push([
|
||||
r + r * Math.cos(angle),
|
||||
height - r + r * Math.sin(angle)
|
||||
]);
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
|
||||
*/
|
||||
export function getCardShapePoints(
|
||||
shape: CardShape,
|
||||
width: number,
|
||||
height: number,
|
||||
cornerRadius: number = 0
|
||||
): [number, number][] {
|
||||
if (shape === 'rectangle' && cornerRadius > 0) {
|
||||
return getRoundedRectPoints(width, height, cornerRadius);
|
||||
}
|
||||
|
||||
const points: [number, number][] = [];
|
||||
|
||||
switch (shape) {
|
||||
case 'circle': {
|
||||
const radius = Math.min(width, height) / 2;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
for (let i = 0; i < 36; i++) {
|
||||
const angle = (i / 36) * Math.PI * 2;
|
||||
points.push([
|
||||
centerX + radius * Math.cos(angle),
|
||||
centerY + radius * Math.sin(angle)
|
||||
]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'triangle': {
|
||||
points.push([width / 2, 0]);
|
||||
points.push([0, height]);
|
||||
points.push([width, height]);
|
||||
break;
|
||||
}
|
||||
case 'hexagon': {
|
||||
const halfW = width / 2;
|
||||
const quarterH = height / 4;
|
||||
points.push([halfW, 0]);
|
||||
points.push([width, quarterH]);
|
||||
points.push([width, height - quarterH]);
|
||||
points.push([halfW, height]);
|
||||
points.push([0, height - quarterH]);
|
||||
points.push([0, quarterH]);
|
||||
break;
|
||||
}
|
||||
case 'rectangle':
|
||||
default: {
|
||||
points.push([0, 0]);
|
||||
points.push([width, 0]);
|
||||
points.push([width, height]);
|
||||
points.push([0, height]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算多边形的中心点
|
||||
*/
|
||||
export function calculateCenter(points: [number, number][]): { x: number; y: number } {
|
||||
let sumX = 0;
|
||||
let sumY = 0;
|
||||
for (const [x, y] of points) {
|
||||
sumX += x;
|
||||
sumY += y;
|
||||
}
|
||||
return {
|
||||
x: sumX / points.length,
|
||||
y: sumY / points.length
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算轮廓的边界框
|
||||
*/
|
||||
export function calculateBounds(points: [number, number][]): ContourBounds {
|
||||
if (points.length === 0) {
|
||||
return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
|
||||
}
|
||||
|
||||
let minX = Infinity;
|
||||
let minY = Infinity;
|
||||
let maxX = -Infinity;
|
||||
let maxY = -Infinity;
|
||||
|
||||
for (const [x, y] of points) {
|
||||
minX = Math.min(minX, x);
|
||||
minY = Math.min(minY, y);
|
||||
maxX = Math.max(maxX, x);
|
||||
maxY = Math.max(maxY, y);
|
||||
}
|
||||
|
||||
return { minX, minY, maxX, maxY };
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据进度计算点在路径上的位置
|
||||
*/
|
||||
export function getPointOnPath(points: [number, number][], progress: number): [number, number] {
|
||||
if (points.length === 0) return [0, 0];
|
||||
if (points.length === 1) return points[0];
|
||||
|
||||
const totalSegments = points.length;
|
||||
const scaledProgress = progress * totalSegments;
|
||||
const segmentIndex = Math.floor(scaledProgress);
|
||||
const segmentProgress = scaledProgress - segmentIndex;
|
||||
|
||||
const currentIndex = Math.min(segmentIndex, points.length - 1);
|
||||
const nextIndex = (currentIndex + 1) % points.length;
|
||||
|
||||
const [x1, y1] = points[currentIndex];
|
||||
const [x2, y2] = points[nextIndex];
|
||||
|
||||
return [
|
||||
x1 + (x2 - x1) * segmentProgress,
|
||||
y1 + (y2 - y1) * segmentProgress
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 将轮廓点转换为 SVG path 命令
|
||||
* @param points 轮廓点数组
|
||||
* @param closed 是否闭合路径
|
||||
*/
|
||||
export function contourToSvgPath(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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 平移轮廓点（添加偏移量）
|
||||
*/
|
||||
export function translateContour(
|
||||
points: [number, number][],
|
||||
offsetX: number,
|
||||
offsetY: number
|
||||
): [number, number][] {
|
||||
return points.map(([x, y]) => [x + offsetX, y + offsetY] as [number, number]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 翻转轮廓（用于 SVG 坐标转换，Y 轴翻转）
|
||||
* @param points 轮廓点
|
||||
* @param height 画布高度
|
||||
*/
|
||||
export function flipContourY(
|
||||
points: [number, number][],
|
||||
height: number
|
||||
): [number, number][] {
|
||||
return points.map(([x, y]) => [x, height - y] as [number, number]);
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
export * from "./bezier";
|
||||
export * from "./vector";
|
||||
export * from "./plotter";
|
||||
export * from "./contour";
|
||||
export * from "./layout";
|
||||
export * from "./types";
|
||||
export * from "./parser";
|
||||
export * from "./plotter";
|
||||
|
|
@ -1,247 +0,0 @@
|
|||
import { contourToSvgPath } from './contour';
|
||||
import { getCardShapePoints, calculateCenter } from './contour';
|
||||
import type { CardPath, SinglePageLayout, LayoutOptions, CardPosition } from './types';
|
||||
|
||||
const A4_WIDTH_PORTRAIT = 210;
|
||||
const A4_HEIGHT_PORTRAIT = 297;
|
||||
const A4_WIDTH_LANDSCAPE = 297;
|
||||
const A4_HEIGHT_LANDSCAPE = 210;
|
||||
const DEFAULT_PRINT_MARGIN = 5;
|
||||
|
||||
/**
|
||||
* 生成空走路径（抬刀移动路径）
|
||||
* @param cardPaths 卡片切割路径
|
||||
* @param a4Height A4 纸高度（用于坐标转换）
|
||||
*/
|
||||
export 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将旅行路径转换为 SVG path 命令
|
||||
*/
|
||||
export function travelPathsToSvg(travelPaths: [number, number][][]): string {
|
||||
return travelPaths.map(path => contourToSvgPath(path, false)).join(' ');
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算所有卡片轮廓的总边界框
|
||||
*/
|
||||
export function calculateTotalBounds(cardPaths: CardPath[]): {
|
||||
minX: number;
|
||||
minY: number;
|
||||
maxX: number;
|
||||
maxY: number;
|
||||
width: number;
|
||||
height: number;
|
||||
} {
|
||||
if (cardPaths.length === 0) {
|
||||
return { minX: 0, minY: 0, maxX: 0, maxY: 0, width: 0, height: 0 };
|
||||
}
|
||||
|
||||
let minX = Infinity;
|
||||
let minY = Infinity;
|
||||
let maxX = -Infinity;
|
||||
let maxY = -Infinity;
|
||||
|
||||
for (const cardPath of cardPaths) {
|
||||
for (const [x, y] of cardPath.points) {
|
||||
minX = Math.min(minX, x);
|
||||
minY = Math.min(minY, y);
|
||||
maxX = Math.max(maxX, x);
|
||||
maxY = Math.max(maxY, y);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
minX,
|
||||
minY,
|
||||
maxX,
|
||||
maxY,
|
||||
width: maxX - minX,
|
||||
height: maxY - minY
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算单页满排时的排版布局和刀路
|
||||
*
|
||||
* 此函数只关心单页排满的情况，不考虑实际牌组的张数。
|
||||
* 返回的布局信息可以用于：
|
||||
* - 预览单页最大容量时的刀路
|
||||
* - 计算排版参数
|
||||
* - 生成 PLT 文件
|
||||
*/
|
||||
export function calculateSinglePageLayout(options: LayoutOptions): SinglePageLayout {
|
||||
const {
|
||||
cardWidth,
|
||||
cardHeight,
|
||||
shape,
|
||||
bleed,
|
||||
cornerRadius,
|
||||
orientation,
|
||||
printMargin = DEFAULT_PRINT_MARGIN
|
||||
} = options;
|
||||
|
||||
// 确定 A4 尺寸
|
||||
const a4Width = orientation === 'landscape' ? A4_WIDTH_LANDSCAPE : A4_WIDTH_PORTRAIT;
|
||||
const a4Height = orientation === 'landscape' ? A4_HEIGHT_LANDSCAPE : A4_HEIGHT_PORTRAIT;
|
||||
|
||||
// 计算可用区域
|
||||
const usableWidth = a4Width - printMargin * 2;
|
||||
const usableHeight = a4Height - printMargin * 2;
|
||||
|
||||
// 计算每行/每页的卡片数
|
||||
const cardsPerRow = Math.floor(usableWidth / cardWidth);
|
||||
const rowsPerPage = Math.floor(usableHeight / cardHeight);
|
||||
const cardsPerPage = cardsPerRow * rowsPerPage;
|
||||
|
||||
// 计算网格居中偏移
|
||||
const maxGridWidth = cardsPerRow * cardWidth;
|
||||
const maxGridHeight = rowsPerPage * cardHeight;
|
||||
const offsetX = (a4Width - maxGridWidth) / 2;
|
||||
const offsetY = (a4Height - maxGridHeight) / 2;
|
||||
|
||||
// 计算切割尺寸（排版尺寸减去出血）
|
||||
const cutWidth = cardWidth - bleed * 2;
|
||||
const cutHeight = cardHeight - bleed * 2;
|
||||
|
||||
// 生成卡片位置和刀路
|
||||
const cardPositions: CardPosition[] = [];
|
||||
const cardPaths: CardPath[] = [];
|
||||
|
||||
for (let i = 0; i < cardsPerPage; i++) {
|
||||
const row = Math.floor(i / cardsPerRow);
|
||||
const col = i % cardsPerRow;
|
||||
|
||||
// 卡片位置（左下角坐标）
|
||||
const x = offsetX + col * cardWidth;
|
||||
const y = offsetY + row * cardHeight;
|
||||
|
||||
cardPositions.push({ x, y, cardIndex: i });
|
||||
|
||||
// 生成形状轮廓点（相对于卡片左下角）
|
||||
const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
|
||||
|
||||
// 平移到页面坐标并翻转 Y 轴（SVG Y 向下，plotter Y 向上）
|
||||
const pagePoints = shapePoints.map(([px, py]) => [
|
||||
x + bleed + px,
|
||||
a4Height - (y + bleed + py)
|
||||
] as [number, number]);
|
||||
|
||||
const center = calculateCenter(pagePoints);
|
||||
const pathD = contourToSvgPath(pagePoints);
|
||||
const startPoint = pagePoints[0];
|
||||
const endPoint = pagePoints[pagePoints.length - 1];
|
||||
|
||||
cardPaths.push({
|
||||
pageIndex: 0,
|
||||
cardIndex: i,
|
||||
points: pagePoints,
|
||||
centerX: center.x,
|
||||
centerY: center.y,
|
||||
pathD,
|
||||
startPoint,
|
||||
endPoint
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
cardPositions,
|
||||
cardPaths,
|
||||
a4Width,
|
||||
a4Height,
|
||||
cardsPerRow,
|
||||
rowsPerPage,
|
||||
cardsPerPage,
|
||||
frameBounds: {
|
||||
minX: offsetX,
|
||||
minY: offsetY,
|
||||
maxX: offsetX + maxGridWidth,
|
||||
maxY: offsetY + maxGridHeight
|
||||
},
|
||||
frameBoundsWithMargin: {
|
||||
x: offsetX - 1,
|
||||
y: offsetY - 1,
|
||||
width: maxGridWidth + 2,
|
||||
height: maxGridHeight + 2
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据卡片位置生成刀路（用于自定义布局）
|
||||
*/
|
||||
export function generateCardPathsFromPositions(
|
||||
positions: CardPosition[],
|
||||
options: Omit<LayoutOptions, 'orientation' | 'printMargin'> & { a4Height: number }
|
||||
): CardPath[] {
|
||||
const {
|
||||
cardWidth,
|
||||
cardHeight,
|
||||
shape,
|
||||
bleed,
|
||||
cornerRadius,
|
||||
a4Height
|
||||
} = options;
|
||||
|
||||
// 计算切割尺寸
|
||||
const cutWidth = cardWidth - bleed * 2;
|
||||
const cutHeight = cardHeight - bleed * 2;
|
||||
|
||||
const cardPaths: CardPath[] = [];
|
||||
|
||||
for (const pos of positions) {
|
||||
// 生成形状轮廓点（相对于卡片左下角）
|
||||
const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
|
||||
|
||||
// 平移到页面坐标并翻转 Y 轴
|
||||
const pagePoints = shapePoints.map(([px, py]) => [
|
||||
pos.x + bleed + px,
|
||||
a4Height - (pos.y + bleed + py)
|
||||
] as [number, number]);
|
||||
|
||||
const center = calculateCenter(pagePoints);
|
||||
const pathD = contourToSvgPath(pagePoints);
|
||||
const startPoint = pagePoints[0];
|
||||
const endPoint = pagePoints[pagePoints.length - 1];
|
||||
|
||||
cardPaths.push({
|
||||
pageIndex: 0,
|
||||
cardIndex: pos.cardIndex,
|
||||
points: pagePoints,
|
||||
centerX: center.x,
|
||||
centerY: center.y,
|
||||
pathD,
|
||||
startPoint,
|
||||
endPoint
|
||||
});
|
||||
}
|
||||
|
||||
return cardPaths;
|
||||
}
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
import type { ParsedPlt } from './types';
|
||||
|
||||
/**
|
||||
* HPGL 单位转换系数
|
||||
*/
|
||||
const HPGL_UNIT = 0.025; // 1 HPGL unit = 0.025mm
|
||||
|
||||
/**
|
||||
* 解析 HPGL/PLT 代码，提取路径信息
|
||||
*
|
||||
* 支持的命令：
|
||||
* - IN: 初始化
|
||||
* - TB: 定义绘图区域
|
||||
* - CT: 设置切线角度
|
||||
* - SP: 选择画笔
|
||||
* - PU: 抬笔移动
|
||||
* - PD: 下笔绘制
|
||||
* - D: 绘制到指定点（简写）
|
||||
* - U: 抬笔移动到指定点（简写）
|
||||
* - @: 结束命令
|
||||
*/
|
||||
export function parsePlt(pltCode: string): ParsedPlt {
|
||||
const result: ParsedPlt = {
|
||||
paths: [],
|
||||
startPoint: undefined,
|
||||
endPoint: undefined,
|
||||
width: undefined,
|
||||
height: undefined
|
||||
};
|
||||
|
||||
// 解析 TB 命令获取页面尺寸
|
||||
const tbMatch = pltCode.match(/TB(\d+),(\d+),(\d+)/);
|
||||
if (tbMatch) {
|
||||
const width = Number(tbMatch[2]) * HPGL_UNIT;
|
||||
const height = Number(tbMatch[3]) * HPGL_UNIT;
|
||||
result.width = width;
|
||||
result.height = height;
|
||||
}
|
||||
|
||||
// 提取所有下笔绘制的路径
|
||||
// 解析逻辑：跟踪 PU/PD/U/D 命令，收集 PD/D 命令的点
|
||||
const lines = pltCode.split(' ');
|
||||
let currentPath: [number, number][] = [];
|
||||
let isPenDown = false;
|
||||
let currentPosition: [number, number] = [0, 0];
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
|
||||
// 解析 PU 命令（抬笔移动）
|
||||
const puMatch = trimmed.match(/PU\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
||||
if (puMatch) {
|
||||
if (currentPath.length > 0) {
|
||||
result.paths.push([...currentPath]);
|
||||
currentPath = [];
|
||||
}
|
||||
isPenDown = false;
|
||||
currentPosition = [
|
||||
Number(puMatch[1]) * HPGL_UNIT,
|
||||
Number(puMatch[2]) * HPGL_UNIT
|
||||
];
|
||||
continue;
|
||||
}
|
||||
|
||||
// 解析 PD 命令（下笔绘制）
|
||||
const pdMatch = trimmed.match(/PD\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
||||
if (pdMatch) {
|
||||
const newPoint: [number, number] = [
|
||||
Number(pdMatch[1]) * HPGL_UNIT,
|
||||
Number(pdMatch[2]) * HPGL_UNIT
|
||||
];
|
||||
|
||||
if (!isPenDown) {
|
||||
// 新的路径起点
|
||||
currentPath = [newPoint];
|
||||
isPenDown = true;
|
||||
} else {
|
||||
currentPath.push(newPoint);
|
||||
}
|
||||
currentPosition = newPoint;
|
||||
continue;
|
||||
}
|
||||
|
||||
// 解析 U 命令（抬笔移动，简写）
|
||||
const uMatch = trimmed.match(/U\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
||||
if (uMatch) {
|
||||
if (currentPath.length > 0) {
|
||||
result.paths.push([...currentPath]);
|
||||
currentPath = [];
|
||||
}
|
||||
isPenDown = false;
|
||||
currentPosition = [
|
||||
Number(uMatch[1]) * HPGL_UNIT,
|
||||
Number(uMatch[2]) * HPGL_UNIT
|
||||
];
|
||||
continue;
|
||||
}
|
||||
|
||||
// 解析 D 命令（下笔绘制，简写）
|
||||
const dMatch = trimmed.match(/D\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
||||
if (dMatch) {
|
||||
const newPoint: [number, number] = [
|
||||
Number(dMatch[1]) * HPGL_UNIT,
|
||||
Number(dMatch[2]) * HPGL_UNIT
|
||||
];
|
||||
|
||||
if (!isPenDown) {
|
||||
// 新的路径起点
|
||||
currentPath = [newPoint];
|
||||
isPenDown = true;
|
||||
} else {
|
||||
currentPath.push(newPoint);
|
||||
}
|
||||
currentPosition = newPoint;
|
||||
continue;
|
||||
}
|
||||
|
||||
// 解析 PA 命令（绝对坐标移动）
|
||||
const paMatch = trimmed.match(/PA\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
||||
if (paMatch) {
|
||||
const newPoint: [number, number] = [
|
||||
Number(paMatch[1]) * HPGL_UNIT,
|
||||
Number(paMatch[2]) * HPGL_UNIT
|
||||
];
|
||||
|
||||
if (isPenDown) {
|
||||
currentPath.push(newPoint);
|
||||
} else {
|
||||
if (currentPath.length > 0) {
|
||||
result.paths.push([...currentPath]);
|
||||
currentPath = [];
|
||||
}
|
||||
currentPosition = newPoint;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// 检查结束命令
|
||||
if (trimmed.includes('@')) {
|
||||
if (currentPath.length > 0) {
|
||||
result.paths.push([...currentPath]);
|
||||
currentPath = [];
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理最后一条路径
|
||||
if (currentPath.length > 0) {
|
||||
result.paths.push([...currentPath]);
|
||||
}
|
||||
|
||||
// 设置起点和终点
|
||||
if (result.paths.length > 0) {
|
||||
const firstPath = result.paths[0];
|
||||
const lastPath = result.paths[result.paths.length - 1];
|
||||
|
||||
if (firstPath.length > 0) {
|
||||
result.startPoint = firstPath[0];
|
||||
}
|
||||
if (lastPath.length > 0) {
|
||||
result.endPoint = lastPath[lastPath.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从解析的 PLT 数据中提取切割路径（排除空走路径）
|
||||
*
|
||||
* 空走路径特征：
|
||||
* - 路径长度短（通常是直线移动）
|
||||
* - 连接两个切割路径的终点和起点
|
||||
*
|
||||
* @param parsedPlt 解析后的 PLT 数据
|
||||
* @param minCutLength 最小切割路径长度阈值（mm），小于此值的路径被视为空走路径
|
||||
*/
|
||||
export function extractCutPaths(parsedPlt: ParsedPlt, minCutLength: number = 5): [number, number][][] {
|
||||
const allPaths = parsedPlt.paths;
|
||||
const cutPaths: [number, number][][] = [];
|
||||
|
||||
for (const path of allPaths) {
|
||||
if (path.length < 2) continue;
|
||||
|
||||
// 计算路径长度
|
||||
let pathLength = 0;
|
||||
for (let i = 1; i < path.length; i++) {
|
||||
const [x1, y1] = path[i - 1];
|
||||
const [x2, y2] = path[i];
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
pathLength += Math.sqrt(dx * dx + dy * dy);
|
||||
}
|
||||
|
||||
// 如果路径长度大于阈值，认为是切割路径
|
||||
if (pathLength >= minCutLength) {
|
||||
cutPaths.push(path);
|
||||
}
|
||||
}
|
||||
|
||||
return cutPaths;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将解析的路径转换为 SVG path 命令
|
||||
*/
|
||||
export function parsedPltToSvg(paths: [number, number][]): string {
|
||||
if (paths.length === 0) return '';
|
||||
|
||||
const [startX, startY] = paths[0];
|
||||
let d = `M ${startX} ${startY}`;
|
||||
|
||||
for (let i = 1; i < paths.length; i++) {
|
||||
const [x, y] = paths[i];
|
||||
d += ` L ${x} ${y}`;
|
||||
}
|
||||
|
||||
d += ' Z';
|
||||
return d;
|
||||
}
|
||||
|
|
@ -1,101 +1,73 @@
|
|||
import { normalize } from "./normalize";
|
||||
import {normalize} from "./normalize";
|
||||
|
||||
/**
|
||||
* 生成 HPGL 代码，支持指定起点和终点
|
||||
* @param pts 路径点数组
|
||||
* @param width 页面宽度（mm）
|
||||
* @param height 页面高度（mm）
|
||||
* @param px2mm 像素到毫米的转换系数
|
||||
* @param startPoint 起点坐标（mm），默认为左上角 [0, height]
|
||||
* @param endPoint 终点坐标（mm），默认为左上角 [0, height]
|
||||
*/
|
||||
export function pts2plotter(
|
||||
pts: [number, number][][],
|
||||
width: number,
|
||||
height: number,
|
||||
px2mm = 0.1,
|
||||
startPoint?: [number, number],
|
||||
endPoint?: [number, number]
|
||||
) {
|
||||
const start = startPoint ?? [0, height];
|
||||
const end = endPoint ?? [0, height];
|
||||
|
||||
let str = init(width * px2mm, height * px2mm);
|
||||
export function pts2plotter(pts: [number, number][][], width: number, height: number, px2mm = 0.1){
|
||||
let str = init(width * px2mm, height * px2mm);
|
||||
|
||||
// 按 X 轴然后 Y 轴排序路径
|
||||
const sorted = pts.slice();
|
||||
sorted.sort(function (a, b) {
|
||||
const [ax, ay] = topleft(a);
|
||||
const [bx, by] = topleft(b);
|
||||
// sort paths by x(long) then by y(short)
|
||||
const sorted = pts.slice();
|
||||
sorted.sort(function (a, b) {
|
||||
const [ax,ay] = topleft(a);
|
||||
const [bx,by] = topleft(b);
|
||||
|
||||
if (ax !== bx) return ax - bx;
|
||||
return ay - by;
|
||||
});
|
||||
if (ax !== bx) return ax - bx;
|
||||
return ay - by;
|
||||
});
|
||||
|
||||
// 从起点到第一个路径
|
||||
if (sorted.length > 0) {
|
||||
const firstPath = sorted[0];
|
||||
str += ` U${plu(start[0] * px2mm)},${plu((height - start[1]) * px2mm)}`;
|
||||
str += ` D${plu(firstPath[0][0] * px2mm)},${plu((height - firstPath[0][1]) * px2mm)}`;
|
||||
|
||||
// 切割第一个路径
|
||||
for (let i = 1; i < firstPath.length; i++) {
|
||||
const pt = firstPath[i];
|
||||
str += ` D${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
|
||||
let lead = true;
|
||||
for(const path of sorted){
|
||||
for (const cmd of poly(normalize(path), height, px2mm, lead)) {
|
||||
str += cmd;
|
||||
}
|
||||
lead = false;
|
||||
}
|
||||
|
||||
// 路径之间移动
|
||||
for (let i = 1; i < sorted.length; i++) {
|
||||
const prevPath = sorted[i - 1];
|
||||
const currPath = sorted[i];
|
||||
|
||||
// 抬刀移动到下一个路径起点
|
||||
str += ` U${plu(currPath[0][0] * px2mm)},${plu((height - currPath[0][1]) * px2mm)}`;
|
||||
// 下刀切割
|
||||
str += ` D${plu(currPath[0][0] * px2mm)},${plu((height - currPath[0][1]) * px2mm)}`;
|
||||
|
||||
for (let j = 1; j < currPath.length; j++) {
|
||||
const pt = currPath[j];
|
||||
str += ` D${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 返回终点
|
||||
str += ` U${plu(end[0] * px2mm)},${plu((height - end[1]) * px2mm)}`;
|
||||
str += endCommand();
|
||||
str += end();
|
||||
|
||||
return str;
|
||||
return str;
|
||||
}
|
||||
|
||||
// 兼容旧版本（不使用新参数）
|
||||
export function pts2plotterLegacy(
|
||||
pts: [number, number][][],
|
||||
width: number,
|
||||
height: number,
|
||||
px2mm = 0.1
|
||||
) {
|
||||
return pts2plotter(pts, width, height, px2mm);
|
||||
}
|
||||
|
||||
function topleft(pts: [number, number][]) {
|
||||
let minx = NaN;
|
||||
let miny = NaN;
|
||||
for (const pt of pts) {
|
||||
if (isNaN(minx) || minx > pt[0]) minx = pt[0];
|
||||
if (isNaN(miny) || miny > pt[1]) miny = pt[1];
|
||||
}
|
||||
return [minx, miny] as [number, number];
|
||||
function topleft(pts: [number, number][]){
|
||||
let minx = NaN;
|
||||
let miny = NaN;
|
||||
for(const pt of pts){
|
||||
if (isNaN(minx) || minx > pt[0]) minx = pt[0];
|
||||
if (isNaN(miny) || miny > pt[1]) miny = pt[1];
|
||||
}
|
||||
return [minx, miny] as [number, number];
|
||||
}
|
||||
|
||||
function init(w: number, h: number) {
|
||||
return ` IN TB26,${plu(w)},${plu(h)} CT1`;
|
||||
return ` IN TB26,${plu(w)},${plu(h)} CT1 U0,0 D0,0 D40,0`;
|
||||
}
|
||||
|
||||
function endCommand() {
|
||||
return ' @ @';
|
||||
function end() {
|
||||
return ' U0,0 @ @';
|
||||
}
|
||||
|
||||
function* poly(pts: [number, number][], height: number, px2mm: number, lead = false){
|
||||
function cutpt(down: boolean, pt: [number, number]) {
|
||||
return ` ${down ? 'D' : 'U'}${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
|
||||
}
|
||||
|
||||
if (lead) {
|
||||
yield cutpt(false, [0, 0]);
|
||||
yield cutpt(true, [0, 1]);
|
||||
}
|
||||
|
||||
yield cutpt(false, pts[0]);
|
||||
for(const pt of pts){
|
||||
yield cutpt(true, pt);
|
||||
}
|
||||
}
|
||||
|
||||
function sqrlen(x: number, y: number) {
|
||||
return x * x + y * y;
|
||||
}
|
||||
|
||||
function lerp(s: [number, number], e: [number, number], i: number) {
|
||||
return [s[0] + (e[0] - s[0]) * i, s[1] + (e[1] - s[1]) * i] as typeof s;
|
||||
}
|
||||
|
||||
function plu(n: number) {
|
||||
return Math.round(n / 0.025);
|
||||
}
|
||||
return Math.round(n / 0.025);
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
/**
|
||||
* 边界框
|
||||
*/
|
||||
export interface Bounds {
|
||||
minX: number;
|
||||
minY: number;
|
||||
maxX: number;
|
||||
maxY: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 带边距的边界框（用于裁切标记）
|
||||
*/
|
||||
export interface BoundsWithMargin {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片形状类型
|
||||
*/
|
||||
export type CardShape = 'rectangle' | 'circle' | 'triangle' | 'hexagon';
|
||||
|
||||
/**
|
||||
* 轮廓点类型
|
||||
*/
|
||||
export interface ContourPoint {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 轮廓边界框
|
||||
*/
|
||||
export interface ContourBounds {
|
||||
minX: number;
|
||||
minY: number;
|
||||
maxX: number;
|
||||
maxY: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片切割路径
|
||||
*/
|
||||
export interface CardPath {
|
||||
pageIndex: number;
|
||||
cardIndex: number;
|
||||
points: [number, number][];
|
||||
centerX: number;
|
||||
centerY: number;
|
||||
pathD: string;
|
||||
startPoint: [number, number];
|
||||
endPoint: [number, number];
|
||||
}
|
||||
|
||||
/**
|
||||
* 单页排版结果
|
||||
*/
|
||||
export interface SinglePageLayout {
|
||||
/** 单页满排时的卡片位置 */
|
||||
cardPositions: CardPosition[];
|
||||
/** 对应的刀路路径 */
|
||||
cardPaths: CardPath[];
|
||||
/** A4 纸宽度 (mm) */
|
||||
a4Width: number;
|
||||
/** A4 纸高度 (mm) */
|
||||
a4Height: number;
|
||||
/** 每行卡片数 */
|
||||
cardsPerRow: number;
|
||||
/** 每页行数 */
|
||||
rowsPerPage: number;
|
||||
/** 每页总卡片数 */
|
||||
cardsPerPage: number;
|
||||
/** 排版区域边界框 */
|
||||
frameBounds: Bounds;
|
||||
/** 带边距的边界框（用于裁切标记） */
|
||||
frameBoundsWithMargin: BoundsWithMargin;
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片位置
|
||||
*/
|
||||
export interface CardPosition {
|
||||
x: number;
|
||||
y: number;
|
||||
cardIndex: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 排版选项
|
||||
*/
|
||||
export interface LayoutOptions {
|
||||
/** 卡片宽度 (mm) */
|
||||
cardWidth: number;
|
||||
/** 卡片高度 (mm) */
|
||||
cardHeight: number;
|
||||
/** 卡片形状 */
|
||||
shape: CardShape;
|
||||
/** 出血 (mm) */
|
||||
bleed: number;
|
||||
/** 圆角半径 (mm) */
|
||||
cornerRadius: number;
|
||||
/** 打印方向 */
|
||||
orientation: 'portrait' | 'landscape';
|
||||
/** 打印边距 (mm) */
|
||||
printMargin?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* PLT 解析结果
|
||||
*/
|
||||
export interface ParsedPlt {
|
||||
/** 解析出的路径 */
|
||||
paths: [number, number][][];
|
||||
/** 起点坐标 (mm) */
|
||||
startPoint?: [number, number];
|
||||
/** 终点坐标 (mm) */
|
||||
endPoint?: [number, number];
|
||||
/** 页面宽度 (mm) */
|
||||
width?: number;
|
||||
/** 页面高度 (mm) */
|
||||
height?: number;
|
||||
}
|
||||
Loading…
Reference in New Issue