Vue3 在线 PDF 编辑 1.0 文字、圆、矩形批注

各位开发者朋友，继上次分享 PDF 画线批注的实现方案后，今天继续为大家解析基于 Vue3 的在线 PDF 编辑 1.0 项目诞生记中其他核心功能的技术细节。接下来，我们将深入探讨文字批注、图形批注等功能的具体实现。

基于 fabric-Canvas 的文字批注：交互设计与技术实现

在 fabric-Canvas 提供的多种文字处理方案中，本项目选用了 fabric.IText 组件实现文字批注功能。该组件具备丰富的自定义属性，可满足大部分批注场景需求，若开发者有特殊需求，也可参考 fabric 官方文档选择其他适配方案。在交互设计上，项目采用长按触发文字添加的方式，该设计平衡了误触概率与操作便捷性，当然开发者也可根据实际需求调整交互逻辑。

typescript 复制代码

const startLine = async (event: { page: string, canvas: any }, e: any) => {
    if (drawConfig.value.type === "text") {
        longPressTimer = setTimeout(() => {
            addText(event, e);
        }, 1000);
        return
    }
}

上述代码在鼠标按下事件中，通过判断当前批注类型是否为文字，并设置 1 秒的长按检测机制，超时后触发 addText 方法创建文字批注：

php 复制代码

const addText = (event: { page: string, canvas: any }, e: any) => {
    const currentIText = new fabric.IText("双击输入文本", {
        left: e.pointer.x,
        top: e.pointer.y,
        fontSize: drawConfig.value.fontSize,
        fill: drawConfig.value.fontColor,
        editable: true,
        lockScalingFlip: true, 
        lockUniScaling: true 
    });
    event.canvas.add(currentIText)
    event.canvas.requestRenderAll();
}

通过实例化 fabric.IText 对象，设置文字的位置、样式及交互属性，最终将其添加至 canvas 画布并完成渲染。

基于 fabric-Canvas 的圆、矩形批注：图形绘制的统一处理逻辑

圆形与矩形批注的实现遵循相似的技术路径，通过判断当前批注类型，调用对应的 fabric 图形组件完成绘制：

ini 复制代码

if (drawConfig.value.type === "round") {
    isDraw = true
    downPoint = { x: pointer.x, y: pointer.y };
    currentObjet = new fabric.Circle({
        left: pointer.x,
        top: pointer.y,
        radius: 0,
        fill: 'transparent',
        stroke: drawConfig.value.lineColor,
        strokeWidth: drawConfig.value.lineWidth,
        selectable: true
    });
    event.canvas.add(currentObjet);
} else if (drawConfig.value.type === "rect") {
    isDraw = true
    downPoint = { x: pointer.x, y: pointer.y };
    currentObjet = new fabric.Rect({
        left: pointer.x,
        top: pointer.y,
        width: 0,
        height: 0,
        fill: 'transparent',
        stroke: drawConfig.value.lineColor,
        strokeWidth: drawConfig.value.lineWidth,
        selectable: true
    });
    event.canvas.add(currentObjet);
}

在用户操作过程中，所有批注元素均支持选中、拖拽及删除操作。通过监听键盘事件，实现删除功能：

ini 复制代码

const handleKeyDown = (e: { key: string }) => {
    if (e.key === 'Delete') {
        const activeObject = fabricCanvas.getActiveObject();
        if (activeObject) {
            fabricCanvas.remove(activeObject);
            fabricCanvas.renderAll();
        }
    }
};

当用户按下 Delete 键时，系统获取当前选中的批注对象并将其从画布中移除，确保操作的流畅性与灵活性。

以上为本项目文字、圆形及矩形批注功能的核心实现方案。后续将带来下载与保存功能的详细解析，并计划在 2.0 版本中新增缩放、图片添加等功能。欢迎各位开发者前往项目仓库获取源码，也期待在评论区与大家探讨更多功能优化方向，共同完善项目生态。