From eef72a043b3aa095ec95107a0fd5a5c9ed210545 Mon Sep 17 00:00:00 2001 From: hypercross Date: Sun, 15 Mar 2026 01:31:16 +0800 Subject: [PATCH] refactor: corner radius --- src/components/md-deck/PltPreview.tsx | 214 +++++++++++++++--- src/components/md-deck/PrintPreview.tsx | 2 +- src/components/md-deck/hooks/deckStore.ts | 10 +- .../md-deck/hooks/usePlotterExport.ts | 125 +++++++++- src/plotcutter/plotter.ts | 140 +++++++----- 5 files changed, 399 insertions(+), 92 deletions(-) diff --git a/src/components/md-deck/PltPreview.tsx b/src/components/md-deck/PltPreview.tsx index d1b61cb..b178644 100644 --- a/src/components/md-deck/PltPreview.tsx +++ b/src/components/md-deck/PltPreview.tsx @@ -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 (
@@ -182,6 +325,18 @@ export function PltPreview(props: PltPreviewProps) {

PLT 切割预览

+ + +
+
+ + {/* 图例说明 */} +
+
+
+ 空走路径 +
+
+
+ 切割路径 +
+
+
+ 刀头 +
+
); } - -/** - * 将路径点转换为 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; -} diff --git a/src/components/md-deck/PrintPreview.tsx b/src/components/md-deck/PrintPreview.tsx index 1eb7c50..15ec6f0 100644 --- a/src/components/md-deck/PrintPreview.tsx +++ b/src/components/md-deck/PrintPreview.tsx @@ -53,7 +53,7 @@ export function PrintPreview(props: PrintPreviewProps) { }; return ( - }> + }>
void; setBleed: (bleed: number) => void; setPadding: (padding: number) => void; + setCornerRadius: (cornerRadius: number) => void; setShape: (shape: CardShape) => void; // 数据设置 @@ -146,6 +149,7 @@ 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, @@ -209,6 +213,9 @@ export function createDeckStore( setState({ padding }); updateDimensions(); }; + const setCornerRadius = (cornerRadius: number) => { + setState({ cornerRadius }); + }; const setShape = (shape: CardShape) => { setState({ shape }); }; @@ -377,6 +384,7 @@ export function createDeckStore( setGridH, setBleed, setPadding, + setCornerRadius, setShape, setCards, setActiveTab, diff --git a/src/components/md-deck/hooks/usePlotterExport.ts b/src/components/md-deck/hooks/usePlotterExport.ts index adc9f3d..d4bc2df 100644 --- a/src/components/md-deck/hooks/usePlotterExport.ts +++ b/src/components/md-deck/hooks/usePlotterExport.ts @@ -7,10 +7,13 @@ export interface CardPathData { points: [number, number][]; centerX: number; centerY: number; + startPoint: [number, number]; + endPoint: [number, number]; } export interface PltExportData { paths: CardPathData[]; + travelPaths: [number, number][][]; plotterCode: string; a4Width: number; a4Height: number; @@ -22,17 +25,78 @@ export interface UsePlotterExportReturn { exportToPlt: (pages: PageData[]) => void; } +/** + * 生成带圆角的矩形路径点 + */ +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 / 2; + 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); + 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; +} + /** * 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角） - * @param shape 卡片形状 - * @param width 卡片宽度（切割尺寸，不含出血） - * @param height 卡片高度（切割尺寸，不含出血） */ 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) { @@ -95,11 +159,45 @@ function calculateCenter(points: [number, number][]): { x: number; y: number } { }; } +/** + * 生成空走路径（抬刀移动路径） + * 从左上角出发，连接所有卡片的起点/终点，最后返回左上角 + */ +function generateTravelPaths( + cardPaths: CardPathData[], + 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 导出 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; @@ -112,6 +210,7 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn { const generatePltData = (pages: PageData[]): PltExportData | null => { const paths: CardPathData[] = []; const currentBleed = bleed(); + const currentCornerRadius = cornerRadius(); // 计算切割尺寸（排版尺寸减去出血） const cutWidth = cardWidth() - currentBleed * 2; @@ -122,7 +221,7 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn { if (card.side !== 'front') continue; // 获取卡片形状点（相对于卡片原点，使用切割尺寸） - const shapePoints = getCardShapePoints(shape(), cutWidth, cutHeight); + const shapePoints = getCardShapePoints(shape(), cutWidth, cutHeight, currentCornerRadius); // 转换点到页面坐标： // - X 轴：卡片位置 + 出血偏移 @@ -133,10 +232,15 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn { ] as [number, number]); const center = calculateCenter(pagePoints); + const startPoint = pagePoints[0]; + const endPoint = pagePoints[pagePoints.length - 1]; + paths.push({ points: pagePoints, centerX: center.x, - centerY: center.y + centerY: center.y, + startPoint, + endPoint }); } } @@ -145,11 +249,18 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn { return null; } + // 生成空走路径 + const travelPaths = generateTravelPaths(paths, a4Height); + + // 生成 HPGL 代码（包含空走路径，从左上角出发并返回） const allPaths = paths.map(p => p.points); - const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1); + const startPoint: [number, number] = [0, a4Height]; // 左上角 + const endPoint: [number, number] = [0, a4Height]; // 返回左上角 + const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1, startPoint, endPoint); return { paths, + travelPaths, plotterCode, a4Width, a4Height diff --git a/src/plotcutter/plotter.ts b/src/plotcutter/plotter.ts index e7a9c23..b3775e2 100644 --- a/src/plotcutter/plotter.ts +++ b/src/plotcutter/plotter.ts @@ -1,73 +1,101 @@ -import {normalize} from "./normalize"; +import { normalize } from "./normalize"; -export function pts2plotter(pts: [number, number][][], width: number, height: number, px2mm = 0.1){ - let str = init(width * px2mm, height * px2mm); +/** + * 生成 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); - // 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); + // 按 X 轴然后 Y 轴排序路径 + 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; + }); - let lead = true; - for(const path of sorted){ - for (const cmd of poly(normalize(path), height, px2mm, lead)) { - str += cmd; - } - lead = false; + // 从起点到第一个路径 + 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)}`; } + + // 路径之间移动 + 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 += end(); + // 返回终点 + str += ` U${plu(end[0] * px2mm)},${plu((height - end[1]) * px2mm)}`; + str += endCommand(); - return str; + return str; } -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]; +// 兼容旧版本（不使用新参数） +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 init(w: number, h: number) { - return ` IN TB26,${plu(w)},${plu(h)} CT1 U0,0 D0,0 D40,0`; + return ` IN TB26,${plu(w)},${plu(h)} CT1`; } -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 endCommand() { + return ' @ @'; } function plu(n: number) { - return Math.round(n / 0.025); -} \ No newline at end of file + return Math.round(n / 0.025); +}