refactor: plt preview
This commit is contained in:
parent
1da5cfb2ea
commit
7fd53650e3
|
|
@ -0,0 +1,385 @@
|
|||
import { createSignal, For, Show, createMemo } from 'solid-js';
|
||||
import type { PageData } from './hooks/usePDFExport';
|
||||
import type { CardShape } from './types';
|
||||
import { pts2plotter } from '../../plotcutter';
|
||||
|
||||
export interface PltPreviewProps {
|
||||
pages: PageData[];
|
||||
cardWidth: number;
|
||||
cardHeight: number;
|
||||
shape: CardShape;
|
||||
bleed: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export interface CardPath {
|
||||
pageIndex: number;
|
||||
cardIndex: number;
|
||||
points: [number, number][];
|
||||
centerX: number;
|
||||
centerY: number;
|
||||
pathD: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
|
||||
*/
|
||||
function getCardShapePoints(
|
||||
shape: CardShape,
|
||||
width: number,
|
||||
height: number
|
||||
): [number, number][] {
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算多边形的中心点
|
||||
*/
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据进度计算小球在路径上的位置
|
||||
*/
|
||||
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
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* PLT 预览组件 - 显示切割路径预览
|
||||
*/
|
||||
export function PltPreview(props: PltPreviewProps) {
|
||||
const a4Width = 297; // 横向 A4
|
||||
const a4Height = 210;
|
||||
|
||||
// 收集所有卡片路径
|
||||
const cardPaths: CardPath[] = [];
|
||||
let pathIndex = 0;
|
||||
|
||||
// 计算切割尺寸（排版尺寸减去出血）
|
||||
const cutWidth = props.cardWidth - props.bleed * 2;
|
||||
const cutHeight = props.cardHeight - props.bleed * 2;
|
||||
|
||||
for (const page of props.pages) {
|
||||
for (const card of page.cards) {
|
||||
if (card.side !== 'front') continue;
|
||||
|
||||
const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight);
|
||||
const pagePoints = shapePoints.map(([x, y]) => [
|
||||
card.x + props.bleed + x,
|
||||
a4Height - (card.y + props.bleed + y)
|
||||
] as [number, number]);
|
||||
|
||||
const center = calculateCenter(pagePoints);
|
||||
const pathD = pointsToSvgPath(pagePoints);
|
||||
|
||||
cardPaths.push({
|
||||
pageIndex: page.pageIndex,
|
||||
cardIndex: pathIndex++,
|
||||
points: pagePoints,
|
||||
centerX: center.x,
|
||||
centerY: center.y,
|
||||
pathD
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 生成 HPGL 代码用于下载
|
||||
const allPaths = cardPaths.map(p => p.points);
|
||||
const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
|
||||
|
||||
// 进度控制 (0 到 cardPaths.length)
|
||||
const [progress, setProgress] = createSignal(0);
|
||||
|
||||
// 计算当前正在切割的卡片索引
|
||||
const currentPathIndex = createMemo(() => {
|
||||
const p = progress();
|
||||
if (p <= 0) return -1;
|
||||
if (p >= cardPaths.length) return cardPaths.length - 1;
|
||||
return Math.floor(p);
|
||||
});
|
||||
|
||||
// 计算当前小球位置
|
||||
const ballPosition = createMemo(() => {
|
||||
const p = progress();
|
||||
if (p <= 0 || cardPaths.length === 0) return null;
|
||||
|
||||
const cardIndex = Math.min(Math.floor(p), cardPaths.length - 1);
|
||||
const cardProgress = p - cardIndex;
|
||||
const cardPath = cardPaths[cardIndex];
|
||||
|
||||
return getPointOnPath(cardPath.points, cardProgress);
|
||||
});
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!plotterCode) {
|
||||
alert('没有可导出的卡片');
|
||||
return;
|
||||
}
|
||||
|
||||
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-export-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleProgressChange = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setProgress(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">
|
||||
{/* 头部控制栏 */}
|
||||
<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-4 flex-1 max-w-md">
|
||||
<span class="text-sm text-gray-600 whitespace-nowrap">切割进度</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={cardPaths.length}
|
||||
step="0.01"
|
||||
value={progress()}
|
||||
onInput={handleProgressChange}
|
||||
class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
/>
|
||||
<span class="text-sm text-gray-600 whitespace-nowrap w-20 text-right">
|
||||
{Math.floor(progress())} / {cardPaths.length}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<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={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>
|
||||
|
||||
{/* 预览区域 */}
|
||||
<div class="flex flex-col items-center gap-8 mt-20">
|
||||
<For each={props.pages}>
|
||||
{(page) => {
|
||||
const pageCardPaths = cardPaths.filter(p => p.pageIndex === page.pageIndex);
|
||||
|
||||
return (
|
||||
<svg
|
||||
class="bg-white shadow-xl"
|
||||
viewBox={`0 0 ${a4Width} ${a4Height}`}
|
||||
style={{
|
||||
width: `${a4Width}mm`,
|
||||
height: `${a4Height}mm`
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* A4 边框 */}
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width={a4Width}
|
||||
height={a4Height}
|
||||
fill="none"
|
||||
stroke="#ccc"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
|
||||
{/* 页面边框 */}
|
||||
<rect
|
||||
x={page.frameBounds.minX}
|
||||
y={page.frameBounds.minY}
|
||||
width={page.frameBounds.maxX - page.frameBounds.minX}
|
||||
height={page.frameBounds.maxY - page.frameBounds.minY}
|
||||
fill="none"
|
||||
stroke="#888"
|
||||
stroke-width="0.2"
|
||||
/>
|
||||
|
||||
{/* 切割路径 */}
|
||||
<For each={pageCardPaths}>
|
||||
{(path) => {
|
||||
const currentIndex = currentPathIndex();
|
||||
const isCurrentPath = currentIndex === path.cardIndex;
|
||||
const isCompleted = currentIndex > path.cardIndex;
|
||||
const displayColor = isCurrentPath ? '#ef4444' : (isCompleted ? '#10b981' : '#3b82f6');
|
||||
|
||||
return (
|
||||
<g>
|
||||
{/* 切割路径（虚线） */}
|
||||
<path
|
||||
d={path.pathD}
|
||||
fill="none"
|
||||
stroke={displayColor}
|
||||
stroke-width="0.3"
|
||||
stroke-dasharray="2 1"
|
||||
/>
|
||||
|
||||
{/* 序号标签 */}
|
||||
<g transform={`translate(${path.centerX}, ${path.centerY})`}>
|
||||
<circle
|
||||
r="2"
|
||||
fill="white"
|
||||
stroke={displayColor}
|
||||
stroke-width="0.1"
|
||||
/>
|
||||
<text
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
font-size="1.5"
|
||||
fill={displayColor}
|
||||
font-weight="bold"
|
||||
>
|
||||
{path.cardIndex + 1}
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
|
||||
{/* 动画小球 */}
|
||||
<Show when={ballPosition()}>
|
||||
{(pos) => (
|
||||
<circle
|
||||
cx={pos()[0]}
|
||||
cy={pos()[1]}
|
||||
r="0.8"
|
||||
fill="#ef4444"
|
||||
/>
|
||||
)}
|
||||
</Show>
|
||||
</svg>
|
||||
);
|
||||
}}
|
||||
</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 #3b82f6" }}></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 dashed #ef4444" }}></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 dashed #10b981" }}></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;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { For, Show } from 'solid-js';
|
||||
import { createSignal, For, Show } from 'solid-js';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
import { usePageLayout } from './hooks/usePageLayout';
|
||||
import { usePDFExport, type ExportOptions } from './hooks/usePDFExport';
|
||||
|
|
@ -7,6 +7,7 @@ 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;
|
||||
|
|
@ -21,7 +22,9 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
const { store } = props;
|
||||
const { getA4Size, pages, cropMarks } = usePageLayout(store);
|
||||
const { exportToPDF } = usePDFExport(store, props.onClose);
|
||||
const { exportToPlt } = usePlotterExport(store);
|
||||
const { generatePltData, downloadPltFile } = usePlotterExport(store);
|
||||
|
||||
const [showPltPreview, setShowPltPreview] = createSignal(false);
|
||||
|
||||
const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
|
||||
const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
|
||||
|
|
@ -41,20 +44,25 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
await exportToPDF(pages(), cropMarks(), options);
|
||||
};
|
||||
|
||||
const handleExportPlt = () => {
|
||||
exportToPlt(pages());
|
||||
const handleOpenPltPreview = () => {
|
||||
setShowPltPreview(true);
|
||||
};
|
||||
|
||||
const handleClosePltPreview = () => {
|
||||
setShowPltPreview(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<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}
|
||||
/>
|
||||
<Show when={!showPltPreview()} fallback={<PltPreview pages={pages()} cardWidth={store.state.dimensions?.cardWidth || 56} cardHeight={store.state.dimensions?.cardHeight || 88} shape={store.state.shape} bleed={store.state.bleed || 1} 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}
|
||||
/>
|
||||
|
||||
<PrintPreviewFooter store={store} />
|
||||
|
||||
|
|
@ -181,5 +189,6 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export interface PrintPreviewHeaderProps {
|
|||
store: DeckStore;
|
||||
pageCount: number;
|
||||
onExport: () => void;
|
||||
onExportPlt: () => void;
|
||||
onOpenPltPreview: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
|
|
@ -88,11 +88,11 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
|
|||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onClick={props.onExportPlt}
|
||||
onClick={props.onOpenPltPreview}
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,30 @@ import type { PageData } from './usePDFExport';
|
|||
import type { CardShape } from '../types';
|
||||
import { pts2plotter } from '../../../plotcutter';
|
||||
|
||||
export interface CardPathData {
|
||||
points: [number, number][];
|
||||
centerX: number;
|
||||
centerY: number;
|
||||
}
|
||||
|
||||
export interface PltExportData {
|
||||
paths: CardPathData[];
|
||||
plotterCode: string;
|
||||
a4Width: number;
|
||||
a4Height: number;
|
||||
}
|
||||
|
||||
export interface UsePlotterExportReturn {
|
||||
generatePltData: (pages: PageData[]) => PltExportData | null;
|
||||
downloadPltFile: (plotterCode: string) => void;
|
||||
exportToPlt: (pages: PageData[]) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
|
||||
* @param shape 卡片形状
|
||||
* @param width 卡片宽度（切割尺寸，不含出血）
|
||||
* @param height 卡片高度（切割尺寸，不含出血）
|
||||
*/
|
||||
function getCardShapePoints(
|
||||
shape: CardShape,
|
||||
|
|
@ -19,7 +37,6 @@ function getCardShapePoints(
|
|||
|
||||
switch (shape) {
|
||||
case 'circle': {
|
||||
// 圆形：生成 36 个点近似圆
|
||||
const radius = Math.min(width, height) / 2;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
|
@ -33,14 +50,12 @@ function getCardShapePoints(
|
|||
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]);
|
||||
|
|
@ -53,7 +68,6 @@ function getCardShapePoints(
|
|||
}
|
||||
case 'rectangle':
|
||||
default: {
|
||||
// 矩形：顺时针方向
|
||||
points.push([0, 0]);
|
||||
points.push([width, 0]);
|
||||
points.push([width, height]);
|
||||
|
|
@ -65,49 +79,87 @@ function getCardShapePoints(
|
|||
return points;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算多边形的中心点
|
||||
*/
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* PLT 导出 hook - 生成 HPGL 格式文件并下载
|
||||
*/
|
||||
export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
|
||||
const exportToPlt = (pages: PageData[]) => {
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
const shape = store.state.shape;
|
||||
const bleed = () => store.state.bleed || 1;
|
||||
const cardWidth = () => store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = () => store.state.dimensions?.cardHeight || 88;
|
||||
const shape = () => store.state.shape;
|
||||
const a4Width = 297; // 横向 A4
|
||||
const a4Height = 210;
|
||||
|
||||
// 计算所有页面的总尺寸
|
||||
const a4Width = 297; // 横向 A4
|
||||
const a4Height = 210;
|
||||
/**
|
||||
* 生成 PLT 数据（不下载，用于预览）
|
||||
*/
|
||||
const generatePltData = (pages: PageData[]): PltExportData | null => {
|
||||
const paths: CardPathData[] = [];
|
||||
const currentBleed = bleed();
|
||||
|
||||
// 收集所有卡片的轮廓点
|
||||
const allPaths: [number, number][][] = [];
|
||||
// 计算切割尺寸（排版尺寸减去出血）
|
||||
const cutWidth = cardWidth() - currentBleed * 2;
|
||||
const cutHeight = cardHeight() - currentBleed * 2;
|
||||
|
||||
for (const page of pages) {
|
||||
for (const card of page.cards) {
|
||||
// 只导出正面
|
||||
if (card.side !== 'front') continue;
|
||||
|
||||
// 获取卡片形状点（相对于卡片原点）
|
||||
const shapePoints = getCardShapePoints(shape, cardWidth, cardHeight);
|
||||
// 获取卡片形状点（相对于卡片原点，使用切割尺寸）
|
||||
const shapePoints = getCardShapePoints(shape(), cutWidth, cutHeight);
|
||||
|
||||
// 转换点到页面坐标（Y 轴翻转：SVG Y 向下，plotter Y 向上）
|
||||
// 转换点到页面坐标：
|
||||
// - X 轴：卡片位置 + 出血偏移
|
||||
// - Y 轴：翻转（SVG Y 向下，plotter Y 向上）
|
||||
const pagePoints = shapePoints.map(([x, y]) => [
|
||||
card.x + x,
|
||||
a4Height - (card.y + y)
|
||||
card.x + currentBleed + x,
|
||||
a4Height - (card.y + currentBleed + y)
|
||||
] as [number, number]);
|
||||
|
||||
allPaths.push(pagePoints);
|
||||
const center = calculateCenter(pagePoints);
|
||||
paths.push({
|
||||
points: pagePoints,
|
||||
centerX: center.x,
|
||||
centerY: center.y
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (allPaths.length === 0) {
|
||||
alert('没有可导出的卡片');
|
||||
return;
|
||||
if (paths.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 生成 HPGL 指令
|
||||
const allPaths = paths.map(p => p.points);
|
||||
const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1);
|
||||
|
||||
// 创建 Blob 并下载
|
||||
return {
|
||||
paths,
|
||||
plotterCode,
|
||||
a4Width,
|
||||
a4Height
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 下载 PLT 文件
|
||||
*/
|
||||
const downloadPltFile = (plotterCode: string) => {
|
||||
const blob = new Blob([plotterCode], { type: 'application/vnd.hp-HPGL' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
|
|
@ -119,5 +171,17 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
|
|||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return { exportToPlt };
|
||||
/**
|
||||
* 直接导出 PLT（兼容旧接口）
|
||||
*/
|
||||
const exportToPlt = (pages: PageData[]) => {
|
||||
const data = generatePltData(pages);
|
||||
if (!data) {
|
||||
alert('没有可导出的卡片');
|
||||
return;
|
||||
}
|
||||
downloadPltFile(data.plotterCode);
|
||||
};
|
||||
|
||||
return { generatePltData, downloadPltFile, exportToPlt };
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue