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