Vue3 在线 PDF 编辑 1.0 批注回显与文字批注优化

各位开发者朋友！上周带大家解锁了 PDF 画线、图形及文字批注的实现逻辑，今天继续带来 1.0 版本的功能补充与交互优化解析。话不多说，直接上干货！

功能补充：基于 fabric-Canvas 的批注回显

在# Vue3 在线 PDF 编辑 1.0 保存、下载中我们介绍了批注保存逻辑，本周来聊聊如何「唤醒」这些保存的批注数据。回显功能的核心在于利用 fabric-Canvas 的序列化能力，将保存的 JSON 数据「翻译」回画布对象：

ini 复制代码

const dataObj = jsonData[`annotation-canvas_${i - 1}`];
dataObj && fabricCanvas.loadFromJSON(dataObj, () => {
    fabricCanvas.renderAll(); // 加载完成后刷新画布
});

只需通过loadFromJSON方法传入保存的 JSON 数据，fabric 会自动解析并重建批注内容，实现「一键还原」。

被保存的批注数据示例

功能完善：文字批注交互升级

上周我们采用「长按触发」添加文字批注，但实际使用中发现长按操作不够直观。本周优化为「点击按钮 + 智能定位」模式，根据当前页面可视区域自动将文本添加到页头或页尾：

优化前 vs 优化后

旧交互	新交互
长按 1 秒触发文字输入	点击按钮直接添加，智能定位
需手动点击画布确定位置	自动识别可视区域，一键定位

核心代码：智能定位逻辑

arduino 复制代码

const addText = (event: { page: string | number, canvas: any, canvasRefs: any }) => {
    if (!event.canvas || !event.canvasRefs) return;
    const rect = event.canvasRefs.getBoundingClientRect(); // 获取当前页位置
    const viewportHeight = window.innerHeight; // 视口高度
    const isTopVisible = rect.top >= 0 && rect.top <= viewportHeight; // 判断页面是否在顶部可见区域
    
    // 智能计算文本位置：顶部可见则添加到页头，否则添加到页尾
    const pointer = {
        x: 30, // 距左侧30px
        y: isTopVisible ? 50 : rect.height - 50 // 顶部50px或底部50px
    };
    
    const currentIText = new fabric.IText("双击输入文本", {
        left: pointer.x,
        top: pointer.y,
        fontSize: drawConfig.value.fontSize,
        fill: drawConfig.value.fontColor,
        editable: true,
        lockScalingFlip: true,
        lockUniScaling: true
    });
    event.canvas.add(currentIText).renderAll();
};

效果演示

总结

本次优化聚焦「用户体验」与「功能完整性」，通过 fabric-Canvas 的高效序列化实现批注回显，并针对文字批注交互做了场景化改进。目前 1.0 版本已具备批注、保存、下载、回显全流程能力，后续将重点推进 2.0 版本的缩放、图片插入等功能。

欢迎各位前往项目仓库拉取源码，也期待在评论区听到你对功能优化的建议 ------ 你的想法很可能会成为下一个版本的亮点！ 😊