refactor: corner radius

2026-03-15 01:31:16 +08:00
parent fdc5a4656f
commit eef72a043b
5 changed files with 399 additions and 92 deletions
@@ -13,7 +13,8 @@ export const DECK_DEFAULTS = {
  GRID_W: 5,
  GRID_H: 8,
  BLEED: 1,
-  PADDING: 2
+  PADDING: 2,
+  CORNER_RADIUS: 3
 } as const;

 export interface DeckState {
@@ -24,6 +25,7 @@ export interface DeckState {
  gridH: number;
  bleed: number;
  padding: number;
+  cornerRadius: number;
  shape: CardShape;
  fixed: boolean;
  src: string;
@@ -76,6 +78,7 @@ export interface DeckActions {
  setGridH: (grid: number) => 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,
@@ -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