跳到内容
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 插件商店
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 插件商店
申请试用
  • 企业自动化
    • Compressor
  • 福昕CloudAPI
  • 福昕PDF SDK 软件开发工具包
    • 福昕PDF SDK(ActiveX)
    • 福昕PDF SDK(桌面/服务器)
    • 福昕PDF SDK(Plug-in)
    • 福昕 PDF SDK(安卓)
    • 福昕PDF SDK(iOS)
    • 福昕PDF SDK(Web)
  • 福昕管理控制台
    • 公有云
    • 私有云
    • 通用情况
  • 福昕阅读器
    • RMS插件
  • 福昕高级编辑器
    • AI助手
    • Mac版本
      • 常规问题
    • Windows版本
      • 表单
      • ECM集成
      • 互联PDF
      • 企业管理指南
      • 保护
      • 内容编辑
      • 创建PDF
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • Foxit eSign
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • PDF注释,WebSDK,缩放

WebSDK注释缩放:以中心为基准放大/缩小

  • 福昕知识库
  • 2026-06-29

概述

在 PDF 文档处理中,经常需要对已有注释(Annotation)的边框进行缩放操作。本文提供一套基于 JavaScript 的工具方法,实现获取注释矩形大小,并以矩形中心点为原点进行等比例放大或缩小,返回缩放后的新边框坐标。

适用场景

  • PDF 注释自适应缩放:根据文本/图片内容自动调整注释边框大小
  • 批量缩放注释:统一调整页面中多个注释的显示尺寸
  • 注释编辑工具:拖拽四角缩放时,保持注释中心位置不变
  • 注释与页面元素对齐:以注释中心为锚点,精确匹配目标尺寸

核心代码

				
					var originalRect = annots[0][0].getRect()
// 原矩形坐标(原点:左下角)
const originalRect = {
left: 167.17929077148438,
bottom: 288.0683898925781,
right: 317.1792907714844,
top: 333.0683898925781
};
/**
- 以矩形中心为基准缩放,返回新的边框坐标(左下角原点)
- @param {object} rect 原矩形 {left, bottom, right, top}
- @param {number} scale 缩放比例(1=原大小,1.2=放大20%,0.8=缩小20%)
- @returns {object} 新矩形坐标
*/
function scaleFromCenter(rect, scale) {
    // 1. 计算原宽高
    const width = rect.right - rect.left;const height = rect.top - rect.bottom;
    // 2. 计算中心点坐标(左下角原点)
    const centerX = rect.left + width / 2;
    const centerY = rect.bottom + height / 2;
    // 3. 计算缩放后的新宽高
    const newWidth = width * scale;
    const newHeight = height * scale;
    // 4. 以中心为基准计算新坐标
    const newLeft = centerX - newWidth / 2;
    const newRight = centerX + newWidth / 2;
    const newBottom = centerY - newHeight / 2;
    const newTop = centerY + newHeight / 2;
    return {
        left: newLeft,
        bottom: newBottom,
        right: newRight,
        top: newTop
    };
}

				
			

使用示例

				
					// --- 放大 1.5 倍 ---
const scaledUp = scaleFromCenter(originalRect, 1.5);
console.log('放大 1.5 倍坐标:', scaledUp);
// 输出:
// {
//   left:   92.17929077148438,
//   bottom: 265.5683898925781,
//   right:  392.1792907714844,
//   top:    355.5683898925781
// }

// --- 缩小 0.5 倍 ---
const scaledDown = scaleFromCenter(originalRect, 0.5);
console.log('缩小 0.5 倍坐标:', scaledDown);
// 输出:
// {
//   left:   204.67929077148438,
//   bottom: 310.5683898925781,
//   right:  279.67929077148438,
//   top:    310.5683898925781
// }

// --- 应用缩放后的坐标(示例:设置注释新边框) ---
annot.setRect(scaledUp);
				
			

注意事项

  1. scale 参数校验:建议在实际项目中对 scale <= 0 的情况做防护,避免生成非法坐标。
  2. 坐标系一致性:确保整个计算链路使用同一种坐标系,混用会导致注释位置偏移。
  3. 精度问题:PDF 坐标通常保留较高精度(float64),缩放后可能出现浮点误差,对最终显示影响极小可忽略。
免费申请 SDK 试用

相关内容

多份PDF文档批量打印不同份数?福昕来帮你!

在线批注PDF后,如何将不带注释数据的文件流回传服务器?

在福昕高级PDF编辑器中如设置常用图章

在福昕高级PDF编辑器中如何将鼠标滚轮为缩放操作

粘贴图像到PDF文件

取消增强细线选项解决字体毛刺现象

32位电脑安装64位安装包报错提示

如何设置启动软件启动时开启上一次会话

选择文本或图像时不显示浮动工具条该如何处理

如何通过裁剪页功能调整页面留白

推荐内容

多份PDF文档批量打印不同份数?福昕来帮你!

在线批注PDF后,如何将不带注释数据的文件流回传服务器?

在福昕高级PDF编辑器中如设置常用图章

在福昕高级PDF编辑器中如何将鼠标滚轮为缩放操作

粘贴图像到PDF文件

取消增强细线选项解决字体毛刺现象

32位电脑安装64位安装包报错提示

如何设置启动软件启动时开启上一次会话

选择文本或图像时不显示浮动工具条该如何处理

如何通过裁剪页功能调整页面留白

产品
  • 应用行业
  • 白皮书
开发支持
  • 开发中心
  • SDK文档资料

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

©2026 福建福昕软件开发股份有限公司 版权所有

隐私策略