2.7 KiB
2.7 KiB
OpenPrint 图表三修:矢量 PDF + 饼图空白 + 标签对齐
承接上轮「原生 SVG 图表组件」(chartkit + PrintChart + ChartViewLayer + data-binder 接入 + ChartProps)。本轮修复/增强三件事。
1. PDF 图表走矢量(svg2pdf)
之前:整页 HTML 经 foreignObject 栅格化成 PNG 再 addImage → 图表是位图,放大发虚。
现在:混合矢量导出(src/core/export-engine/export-pdf.ts)
- 每页先
stripCharts(page)剥离 chart 控件 → 栅格化(文本/表格位图底图)→addImage作背景; - 再遍历该页 chart 节点,用
svg2pdf把其 SVG 以矢量注入 jsPDF 对应 mm 盒(x/y/width/height)。 - 思源宋体矢量文本:
/fonts/SourceHanSerifCN-Regular.ttf(1.0M 子集)注册进 jsPDF 为SourceHanSerifCN;chartkit 三个渲染器 SVG 根font-family改为'SourceHanSerifCN','PingFang SC',...优先。 - 三重兜底:图表旋转 → 整页退回全栅格化;单图 svg2pdf 失败 → 该图单独栅格化兜底;字体加载失败 → 整页退回全栅格化。非图表页行为不变。
2. 饼图中间空白(bug 修复)
根因:chartkit/core.ts 的 arcPath 实心饼画成 M start A end Z(圆弧+弦 = 圆缺段),楔形不到圆心 → 中间空白。
修复:实心饼改为 M cx cy L start A end Z(真正到达圆心的楔形);环形保持外弧+内弧环形扇区;360° 整圆特例用两段半圆弧。新增回归测试:饼图 path 必须含圆心坐标。
3. 标签默认对齐(功能)
ChartOptions新增labelAlign?: 'left' | 'center' | 'right',默认left(解决"下面的标签默认都居中")。chartkit/core.ts新增legendStartX/xAxisLabelPos两个 helper:bar/line的 x 轴类目标签、bar/line/pie的图例均按labelAlign对齐(图例居中/右对齐按单行总宽偏移)。ChartProps.vue外观区新增「标签对齐」下拉(左 / 中 / 右)。
验证结果
vue-tsc --build:0 错误vitest:249 测全绿(chartkit 11 + 原有 238)vite build:成功(pdfchunk 因并入 svg2pdf.js 由 400→487kB,属动态加载导出包,无害)vitedev server:HTTP 200
⚠️ 验证缺口(需在真实浏览器确认)
svg2pdf 的矢量渲染、中文 TTF 注入、旋转页回退逻辑无法在本环境(happy-dom)验证——export-pdf.spec.ts 只 mock 栅格化层以验证 jsPDF 装配。请用户在 Chromium 中实际导出含图表的 PDF,确认:
- 图表在 PDF 中随缩放保持清晰(矢量);
- 中文标签正常显示(非方块/空白);
- 含旋转图表的页面正确回退为位图且不丢图。